可通过五种方法查看网页HTML源码：一、右键检查或快捷键调出开发者工具Elements面板；二、地址栏输入view-source前缀查看原始HTML；三、右键“查看网页源代码”获静态快照；四、Console中执行document.documentElement.outerHTML输出完整HTML字符串；五、Network面板启用Preserve log后刷新观察HTML变化。
如果您在浏览网页时需要查看或调试页面的HTML源码，则可以通过浏览器内置的开发者工具快速调出原始HTML结构。以下是实现此操作的多种方法：
一、使用快捷键调出开发者工具并切换至Elements面板
该方法利用浏览器默认快捷键直接唤起开发者工具，并自动定位到HTML结构视图，适用于所有主流浏览器（Chrome、Edge、Firefox、Safari等）。
1、在网页任意位置右键，选择检查选项。
2、或直接按下键盘组合键：Ctrl+Shift+I（Windows/Linux）或Cmd+Option+I（macOS）。
立即学习“前端免费学习笔记（深入）”；
3、打开后，默认显示为Elements标签页，即可看到实时渲染的HTML树状结构。
二、通过地址栏输入chrome://view-source/前缀查看原始HTML
此方式可直接加载未经过JavaScript动态修改的原始HTML源文件，适合分析服务端返回的初始HTML内容。
1、复制当前网页的完整URL（例如https://example.com/page.html）。
2、在地址栏中将URL改为：chrome://view-source:https://example.com/page.html（Chrome/Edge）或view-source:https://example.com/page.html（Firefox）。
3、按回车键，浏览器将以纯文本形式展示服务器返回的原始HTML源码。
三、右键菜单选择“查看网页源代码”
该方式调出的是静态HTML快照，不包含DOM动态变更后的结果，但操作最直观，适合快速查阅初始源码。
1、在网页空白区域右键单击。
2、在弹出菜单中点击查看网页源代码（Chrome/Edge）或查看源代码（Firefox）。
3、新标签页将打开纯文本格式的HTML源码，支持搜索与复制，但无法交互式展开折叠节点。
四、使用控制台命令document.documentElement.outerHTML输出HTML字符串
该方法通过JavaScript执行指令获取当前完整HTML文档的序列化字符串，可用于复制或进一步处理。
1、按F12或Ctrl+Shift+I打开开发者工具。
2、切换至Console面板。
3、输入以下命令并回车：document.documentElement.outerHTML。
4、控制台将打印出当前页面完整的HTML字符串，可全选复制用于外部编辑器比对。
五、启用“Preserve log”后刷新页面观察HTML加载过程
当页面存在重定向或多阶段HTML注入时，启用日志保留功能可防止Elements面板在刷新后清空初始HTML结构。
1、打开开发者工具，切换至Network面板。
2、勾选顶部工具栏中的Preserve log复选框。
3、刷新页面，随后切换回Elements面板，即可在刷新前后持续观察HTML节点变化。
