需根据需求选择查看原始HTML或动态DOM:①Ctrl+U/Cmd+U、右键“查看网页源代码”、地址栏输入view-source:均可获取原始HTML;②右键“检查”或F12/Ctrl+Shift+I可查看实时渲染的DOM。

如果您希望在谷歌浏览器中快速获取网页的原始HTML结构或动态渲染后的DOM节点,则需根据实际需求选择对应方式。以下是查看网页源代码与审查元素的具体操作步骤:
一、使用快捷键查看原始HTML源代码
该方法直接调用浏览器内置指令,加载服务器返回的未经JavaScript处理的初始HTML文档,适用于验证后端输出是否正确。
1、确保Chrome中已打开目标网页且页面完全加载。
2、按下键盘组合键 Ctrl + U(Windows/Linux)或 Cmd + U(macOS)。
3、浏览器将新开一个标签页,以纯文本形式显示原始HTML源码,支持复制与查找。
二、通过右键菜单查看网页源代码
此方式无需记忆快捷键,利用图形化上下文菜单触发相同功能,适合临时操作或快捷访问。
1、在目标网页任意空白区域点击鼠标右键。
2、从弹出菜单中选择 “查看网页源代码” 选项。
3、新标签页自动打开,URL前缀为 view-source:,内容为原始HTML。
三、使用地址栏协议强制显示源码
该方式通过手动注入协议前缀,绕过常规页面渲染流程,可应对部分被JavaScript拦截或路由重写的页面场景。
1、保持目标网页处于当前激活标签页。
2、点击地址栏,将光标置于URL最前端。
3、输入 view-source:(注意末尾冒号),随后按回车键。
4、页面立即切换为只读文本格式的原始HTML,不执行脚本或样式。
四、通过右键审查特定元素
该方法聚焦于页面中某一可见组件,直接定位其在DOM树中的对应节点,适用于调试局部结构、样式或交互逻辑。
1、将鼠标悬停于您要检查的网页元素上,例如按钮、图片或文字块。
2、点击鼠标右键,在弹出菜单中选择 “检查” 选项。
3、开发者工具面板随即展开,默认高亮显示该元素在 Elements 面板中的位置。
五、使用快捷键打开开发者工具并查看实时DOM
此方式展示的是经过HTML解析、CSS应用及JavaScript执行后的最终DOM树,反映用户实际看到的页面状态。
1、在目标网页处于激活状态时,按下 F12 或 Ctrl + Shift + I(Windows/Linux)或 Cmd + Option + I(macOS)。
2、开发者工具面板弹出,默认进入 “Elements” 标签页。
3、左侧树状结构即为当前实时渲染的HTML DOM,支持展开节点、高亮对应区域及临时编辑属性。











