应根据分析目的选择原始html源码或实时dom：快捷键ctrl+u/command+option+u、右键“查看页面源代码”、地址栏输入view-source:均可查看原始html；f12或菜单栏“更多工具→开发者工具”进入elements面板查看实时dom。
如果您在Chrome中需要获取网页的底层结构信息，但不确定应使用原始HTML源码还是实时渲染后的DOM，需根据分析目的选择对应路径。以下是多种查看方式：
一、使用快捷键查看原始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、在展开列表中点击“开发者工具”，面板立即加载。
