Chrome提供五种查看HTML源码或DOM的方法：一、Ctrl+U/Command+Option+U查看原始HTML；二、右键选“查看页面源代码”；三、地址栏输入view-source:；四、F12进入开发者工具Elements面板查实时DOM；五、菜单栏“更多工具→开发者工具”。
如果您正在使用Chrome浏览器访问网页，但需要快速获取其底层HTML结构，则可通过多种原生方式直接调取源码。以下是具体操作路径：
一、使用快捷键查看原始HTML源代码
该方法直接触发浏览器加载服务器返回的初始HTML文档，不包含JavaScript动态插入或修改的内容，适用于验证服务端输出是否符合预期。
1、在Chrome中打开目标网页。
2、按下键盘上的Ctrl + U组合键（Windows/Linux系统）或Command + Option + U（macOS系统）。
3、浏览器将新开一个标签页，以纯文本形式显示该网页未经渲染的原始HTML源代码。
二、通过右键菜单调出源代码视图
此方式无需记忆快捷键，利用图形化上下文菜单即可访问原始HTML文件，适合对键盘操作不熟悉或临时需要查看的用户。
1、确保目标网页已在Chrome中完全加载。
2、在页面任意空白区域点击鼠标右键。
3、从弹出菜单中选择“查看页面源代码”选项。
4、新标签页将立即加载并展示该网页的完整HTML源码，URL前缀为view-source:。
三、利用地址栏指令强制进入源码模式
通过在当前地址栏手动添加协议前缀，可绕过常规页面渲染流程，直接请求并显示原始HTML响应体，适用于需排除前端路由干扰的场景。
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”面板。
4、此时可查看、搜索或交互式探索当前页面的DOM结构。
