“查看网页源代码”显示的是服务器返回的原始HTML，不含JS动态修改内容；应使用开发者工具Elements面板查看实时DOM，Network面板确认HTML来源。
浏览器右键“查看网页源代码”看到的不是实时 DOM
点击右键选择“查看网页源代码”，打开的是服务器返回的原始 HTML 字符串，不包含 JavaScript 动态插入的内容、也不反映后续 JS 修改过的 innerHTML 或 class 变化。比如一个按钮被 JS 点击后添加了 active 类，源代码里完全看不到这个变化。
真正想看“当前页面实际渲染成什么样”，得用开发者工具里的元素面板：
- Windows/Linux 按
Ctrl+Shift+I（或F12），Mac 按Cmd+Option+I - 切换到
Elements标签页（Chrome / Edge / Firefox 都叫这个名字） - 用左上角的
✓图标（或按Ctrl+Shift+C）开启元素选择模式，鼠标悬停/点击页面任意位置，对应 DOM 节点会高亮并自动定位到树中
Elements 面板里右键菜单的关键选项
在 Elements 面板中选中某个节点后，右键弹出菜单里这几个最常用：
-
Copy → Copy element：复制当前节点的完整 HTML（含子节点） -
Copy → Copy outerHTML：和上面一样，是默认行为 -
Copy → Copy innerHTML：只复制子内容，不含当前标签自身 -
Edit as HTML：直接双击编辑该节点的 HTML，改完回车立即生效（仅当前会话有效，刷新即还原） -
Break on → attribute modifications：当这个元素的属性被 JS 修改时，自动断点暂停，适合调试动态 class 切换
console 里快速查看和操作 DOM 结构
在 Console 标签页可以直接执行 JS 查看结构，比翻 Elements 面板更快定位：
立即学习“前端免费学习笔记（深入）”；
document.body
document.querySelector('header nav')
document.querySelectorAll('button[data-action]')
输出结果可点击展开，查看其子节点、属性、计算样式等。注意：
-
document.body输出的是实时 DOM 对象，不是字符串 - 想看字符串形式的 HTML，加
.outerHTML：document.body.outerHTML - 用
console.dir()可以强制以对象方式展开，比直接输变量更清晰：console.dir(document.forms[0])
Network 面板查原始 HTML 文件来源
如果想确认某段 HTML 是从哪个请求来的（比如 SPA 的初始 index.html、SSR 渲染结果、还是某个 AJAX 加载的片段），要切到 Network 面板：
- 刷新页面，找到类型为
document的第一项（通常是index.html） - 点开它，在
Response标签页看到的就是服务器吐出的原始 HTML - 对比
Elements面板里的结构，差的部分基本就是 JS 补上去的
特别注意：有些框架（如 Next.js、Nuxt）会在 HTML 中注入 __NEXT_DATA__ 或 window.__NUXT__ 这类脚本，它们不是渲染结果，而是客户端水合（hydration）用的数据源——别误以为那是页面内容本身。
