要查看网页原始 html 源代码或实时 dom 结构，可采用五种方法：一、浏览器 “查看网页源代码”获取初始 HTML；二、开发者 工具 “元素”面板检查动态 DOM；三、地址栏执行javascript 指令提取源码；四、用扩展导出结构化 HTML 快照；五、命令行curl 抓取原始响应。
如果您希望了解网页的原始代码构成或检查页面元素的嵌套关系，则需要直接查看 HTML 源代码与实时渲染后的页面结构。以下是实现这一目标的多种方法：
一、使用 浏览器“查看网页源代码”功能
该方法可快速获取服务器返回的原始 HTML 文本，适用于分析初始文档结构和静态内容。
1、在 chrome、edge 或firefox中打开目标网页。
2、右键点击页面任意空白区域，在弹出菜单中选择“查看网页源代码”（Chrome/Edge）或“查看页面源代码”（Firefox）。
立即学习 “ 前端免费学习笔记（深入）”；
3、浏览器将新打开一个标签页，显示未经渲染的纯 HTML 文本，包含所有原始标签、注释及内联脚本。
二、使用浏览器开发者 工具 检查 DOM 结构
该方法展示的是经过 javascript 动态修改后的实时文档 对象 模型（DOM），能准确反映当前页面结构与样式状态。
1、在网页上按快捷键Ctrl+Shift+I（windows/linux）或Cmd+Option+I（macOS）打开开发者工具。
2、切换到 “元素”（Elements） 面板，左侧显示树状结构的 HTML 节点，支持展开 / 折叠、高亮对应页面区域。
3、鼠标悬停在某个 HTML 标签上时，页面中对应元素会被绿色边框高亮；点击该标签可查看右侧的样式、计算属性与 事件 监听器。
三、通过地址栏输入 javascript 指令直接查看源码
此方式绕过右键菜单限制，适用于禁用上下文菜单的网页环境，但仅返回原始 HTML字符串。
1、确保目标网页已完全加载。
2、在浏览器地址栏中删除当前 URL，输入：javascript:alert(document.documentElement.outerHTML)，然后按回车。
3、弹出对话框中显示完整 HTML 源码；如需复制，可改用：javascript:document.body.innerText=document.documentElement.outerHTML，再全选复制。
四、使用浏览器扩展导出结构化 HTML 快照
该方法适合批量保存带格式的结构视图，尤其适用于对比不同状态下的 DOM 差异。
1、在 Chrome 网上应用店中安装支持 DOM 导出的扩展，例如 “Web Developer” 或“HTML CodeSniffer”。
2、点击扩展图标，选择 “View Source”→“View Generated Source” 以获取 js 执行后生成的 HTML。
3、部分扩展提供 “Export DOM Tree as HTML” 选项，可将当前结构保存为本地文件并保留缩进与注释。
五、通过命令行工具远程抓取 HTML 源码
适用于 自动化 场景或无法图形化操作的服务器环境，获取未经浏览器解析的原始响应流。
1、打开终端或命令提示符，确保已安装 curl 工具。
2、执行命令：curl -s https://example.com | head -n 50，其中 - s 静默模式，head 限制输出前 50 行。
3、如需完整保存，运行：curl -o page.html https://example.com，生成 page.html 文件供离线查看。
以上就是
