在Chrome浏览器中查看和修改页面源代码的方法如下：
1. 快速打开开发者工具：
- 使用快捷键`Ctrl+Shift+I`（Windows）或`Cmd+Opt+I`（Mac），直接进入开发者工具面板，默认显示“Elements”标签页，即HTML源码视图。
2. 通过右键菜单访问：
- 在网页任意区域点击右键，选择“检查”或“查看页面源代码”。前者进入可编辑的开发者工具，后者打开纯文本源码页面（只能查看，无法修改）。
3. 定位并高亮特定元素：
- 在开发者工具中，点击左上角的“选择元素”图标（鼠标箭头+方块），然后悬停在网页目标区域，对应源码行会自动高亮，便于快速定位。
4. 实时修改HTML和CSS：
- 在“Elements”面板中找到需要修改的标签或属性，直接双击文本进行编辑。例如，将div改为span，或调整`style`中的`color`值，页面会立即反映更改效果。
5. 保存本地副本：
- 若需长期保留修改后的代码，可点击右上角三点菜单，选择“保存完整副本”，将当前页面的HTML、CSS、JS等资源下载到本地。
6. 使用“Sources”面板调试脚本：
- 切换到“Sources”标签页，可查看页面加载的所有JavaScript文件。设置断点后刷新页面，能逐行调试脚本逻辑，观察变量变化。
7. 模拟移动端代码测试：
- 按`Ctrl+Shift+M`（Windows）或`Cmd+Opt+M`（Mac）切换至手机模式，修改媒体查询相关的CSS代码，预览移动端页面效果。
8. 验证XPath和CSS选择器：
- 在“Elements”面板右键点击元素，选择“Copy XPath”或“Copy Selector”，获取精准定位代码，用于自动化测试或脚本开发。
通过以上操作，可直接在Chrome中查看、修改页面源码，并实时预览效果，无需额外工具。