Chrome中查看网页源代码有五种方法：一用Ctrl+U或Cmd+Opt+U看原始HTML；二右键选“查看页面源代码”；三地址栏输view-source:；四用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，支持展开节点、高亮对应页面区域及临时编辑属性。
五、通过右键菜单精准定位特定元素源码
该方法不仅打开开发者工具，还能自动将焦点锁定在您点击的DOM节点上，特别适合审查特定区域的源代码结构。
1、在目标网页任意空白处右键单击，弹出上下文菜单。
2、从菜单中选择“检查”（Inspect）选项。
3、开发者工具随即展开，默认进入Elements面板，并高亮显示所点元素及其父级HTML节点。
