Chrome中查看网页源码或调试页面有七种方法：一、Ctrl+U/Command+Option+U查看原始HTML；二、右键“查看页面源代码”；三、地址栏输入view-source:；四、F12打开开发者工具看实时DOM；五、菜单栏进入开发者工具；六、chrome://extensions/开启开发者模式；七、右键“检查”定位元素。
如果您需要在谷歌浏览器中快速获取网页原始结构或调试页面行为，则需调用源代码查看功能或启用开发者工具。以下是多种实操路径，覆盖不同操作习惯与使用场景：
一、使用快捷键查看网页原始HTML源码
该方式直接触发浏览器向服务器请求未经JavaScript动态修改的初始HTML文档，适用于验证服务端输出是否正确。
1、在Chrome中打开目标网页。
2、按下Ctrl + U（Windows/Linux）或Command + Option + U（macOS）。
3、浏览器将新开一个标签页，以纯文本形式显示该网页的原始HTML源代码，URL前缀为view-source:。
二、通过右键菜单查看页面源代码
此方法无需记忆组合键，利用图形化上下文菜单即可访问原始HTML，适合临时查看或键盘操作受限的用户。
1、确保目标网页已在Chrome中完全加载。
2、在页面任意空白区域点击鼠标右键。
3、从弹出菜单中选择“查看页面源代码”选项。
4、新标签页将立即加载并展示该网页的完整HTML源码。
三、在地址栏输入指令强制进入源码模式
该方式绕过常规渲染流程，直接解析并显示服务器返回的原始响应体，可排除前端路由或单页应用（SPA）干扰。
1、保持目标网页处于当前激活标签页。
2、点击地址栏，将光标置于当前URL最前端。
3、输入view-source:（注意末尾冒号），随后按回车键。
4、页面刷新后将以只读文本格式呈现原始HTML，不执行脚本或样式。
四、打开开发者工具查看实时DOM结构
开发者工具展示的是经过HTML解析、CSS应用及JavaScript执行后的最终DOM树，反映用户实际看到的页面状态，适用于分析动态内容与交互逻辑。
1、在Chrome中打开目标网页。
2、按下F12键，或Ctrl + Shift + I（Windows/Linux），或Command + Option + I（macOS）。
3、确认顶部标签页已切换至“Elements”面板。
4、左侧树状结构即为当前实时渲染的HTML DOM，支持展开节点、高亮对应页面区域及临时编辑属性。
五、通过浏览器菜单导航启用开发者工具
当快捷键被系统级软件拦截、键盘布局异常或用户偏好图形化路径时，可通过顶层菜单稳定唤起开发者工具，确保功能入口始终可达。
1、点击Chrome右上角的三个垂直排列的点（“更多”按钮）。
2、在下拉菜单中依次选择“更多工具” → “开发者工具”。
3、开发者工具将以停靠模式（默认底部）或独立窗口模式打开，初始视图为“Elements”面板。
六、开启开发者模式以管理扩展程序
开发者模式是Chrome中用于加载未打包扩展、查看扩展ID及本地源文件的必要开关，关闭状态下无法显示扩展调试相关功能入口。
1、在Chrome地址栏输入chrome://extensions/并按回车键访问扩展程序管理页面。
2、点击右上角的“开发者模式”开关，将其由灰色变为蓝色。
3、页面顶部将立即出现“加载已解压的扩展程序”、“打包扩展程序”等新增按钮，表明开发者模式已成功启用。
七、通过右键检查特定元素定位其HTML代码
该方法聚焦于页面局部结构，可快速定位并高亮某元素在DOM中的位置，特别适合前端调试与样式调整。
1、在Chrome中打开目标网页。
2、将鼠标光标移动到您想要检查的页面元素上。
3、点击鼠标右键，在弹出的菜单中选择“检查”选项。
4、浏览器底部或侧边会打开开发者工具面板，并自动高亮显示所选元素对应的HTML代码。
