1、通过右键菜单选择“查看网页源代码”可快速查看页面HTML结构；2、使用F12或Command+Option+I打开开发者工具，切换至Elements面板分析实时DOM；3、在地址栏输入view-source:网址可直接查看高亮的原始HTML；4、通过保存源码为.html文件，可在本地编辑器中离线分析。
如果您想了解某个网页的结构或调试网页内容，查看其源代码是一个基础且有效的手段。Chrome浏览器提供了多种方式来查看和分析网页源代码，帮助用户快速获取所需信息。
本文运行环境：MacBook Pro，macOS Sonoma
一、使用右键菜单查看页面源代码
通过鼠标右键可以直接访问当前页面的源代码，适合快速查看整体HTML结构。
1、在Chrome浏览器中打开目标网页。
2、在页面任意位置点击鼠标右键，弹出上下文菜单。
3、选择“查看网页源代码”选项。
4、新标签页将打开，显示该页面的完整HTML源码。
二、使用开发者工具查看实时DOM结构
开发者工具不仅能查看初始源代码，还能展示经过JavaScript修改后的当前DOM树，适用于动态内容分析。
1、打开目标网页后，按下键盘上的 F12 或 Command+Option+I（Mac）启动开发者工具。
2、切换到“Elements”面板，左侧显示的是当前页面的DOM结构。
3、可展开或折叠标签节点，查看具体元素的属性与嵌套关系。
4、右键点击任意DOM元素，可执行复制、编辑或断点调试等操作。
三、通过地址栏指令直接查看源码
利用特殊的URL前缀可以强制浏览器以纯文本形式展示页面原始HTML代码。
1、在Chrome地址栏输入 view-source:https://www.example.com，将网址替换为实际目标地址。
2、按下回车后，页面将以语法高亮的形式展示原始HTML内容。
3、此方法不加载CSS与JavaScript，仅用于静态源码浏览。
四、保存并离线分析网页源代码
将网页源代码保存至本地，便于后续深入分析或对比不同版本。
1、使用右键菜单中的“查看网页源代码”功能打开源码页面。
2、按下 Command+S（Mac）或 Ctrl+S（Windows/Linux）快捷键。
3、选择保存路径，将文件命名为“.html”扩展名格式。
4、使用代码编辑器打开该文件，进行搜索、标注或版本比对。
