原始HTML源代码可通过Ctrl+U（Windows/Linux）或Command+Option+U（macOS）、右键“查看网页源代码”、地址栏输入view-source:三种方式获取；实时DOM需用F12或右键“检查”打开开发者工具Elements面板。
如果您在谷歌浏览器中需要审查网页结构或调试前端代码，但不确定如何获取原始HTML或实时DOM信息，则可能是由于混淆了“源代码”与“渲染后DOM”的概念。以下是查看网页源代码及打开开发者工具的多种方法：
一、使用快捷键查看原始HTML源代码
该方法直接调用浏览器内置命令，加载服务器返回的未经JavaScript修改的初始HTML文档，适用于验证服务端输出或快速浏览静态结构。
1、在Chrome中打开目标网页。
2、按下键盘组合键 Ctrl + U（Windows/Linux系统）或 Command + Option + U（macOS系统）。
3、浏览器将新开一个标签页，以纯文本形式显示该页面的原始HTML源码，URL前缀为 view-source:。
二、通过右键菜单访问“查看网页源代码”
此方式不依赖键盘记忆，利用图形化上下文菜单触发同一底层指令，适合临时操作或快捷验证。
1、在目标网页任意空白区域点击鼠标右键。
2、从弹出菜单中选择 “查看网页源代码” 选项。
3、新标签页立即加载并展示该网页的完整HTML源文件，内容与快捷键方式完全一致。
三、使用地址栏协议前缀强制进入源码视图
该方法绕过常规交互路径，直接通过浏览器内部协议指令加载源码，适用于快捷访问或需排除前端路由干扰的场景。
1、确保目标网页已在当前标签页中完全加载。
2、点击地址栏，将光标置于当前URL最前端。
3、输入 view-source:（注意末尾冒号），随后按回车键。
4、页面刷新后以只读文本格式呈现原始HTML，不执行任何脚本或CSS样式。
四、通过F12快捷键打开开发者工具并定位到Elements面板
开发者工具提供的是经过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” 标签页，即可查看实时可交互的页面结构。
六、右键检查特定元素并自动定位DOM节点
该方法聚焦于页面中某个具体可视元素，直接高亮其在DOM树中的位置，特别适合前端开发者进行局部调试和样式排查。
1、在Chrome中打开目标网站。
2、将鼠标光标移动到您想检查的页面元素上。
3、点击鼠标右键，在弹出菜单中选择 “检查” 选项。
4、开发者工具面板自动弹出，并在 “Elements” 面板中高亮显示所选元素对应的HTML代码行。
