“查看网页源代码”看到的是服务器返回的原始HTML，但若页面经JS动态渲染（如React/Vue），则仅显示占位结构；要确认真实发布内容，应通过Network面板抓取原始响应、curl命令获取服务器输出，或对比线上HTML与构建产物，并检查带哈希的JS文件是否更新。
浏览器右键“查看网页源代码”只能看到渲染后的 HTML
发布后的 HTML 页面，用户通过浏览器访问时，右键 → 查看网页源代码 看到的确实是服务器返回的原始 HTML，但前提是：它没被 JavaScript 动态重写过。如果页面用了 React、Vue 或大量 document.write()、innerHTML 操作，你看到的源码里可能只有 <div id="root"></div> 这类占位结构，真实内容是运行时才插入的。
所以“查看已发布源码”的第一层含义，就是确认你真正想看的是哪一层：
- 服务器吐出的原始 HTML（即网络请求中
Response的原始文本） - DOM 当前实际结构（即 JS 执行后的真实节点树）
- 构建产物（如
dist/目录下打包好的静态文件）
用开发者工具的 Network 面板抓取原始响应
这是验证“线上到底发布了什么 HTML”的最可靠方式。打开浏览器开发者工具（F12 或 Cmd+Option+I），切换到 Network 标签页，刷新页面，找到主文档请求（通常类型为 document，名称是 index.html 或根路径 /），点击它，在右侧选 Response 或 Preview 标签。
注意几个关键点：
立即学习“前端免费学习笔记（深入）”；
- 确保禁用缓存：勾选
Disable cache（否则可能看到本地缓存的旧版本） - 检查状态码：如果是
304，说明服务端没变，但你看到的仍是上次缓存的内容 - 对比 URL：确认你访问的域名和部署地址一致，比如误访问了
https://staging.example.com却以为是生产环境
直接 curl 或 wget 获取服务器返回的 HTML
绕过浏览器，用命令行确认服务器真实输出，适合排查 CDN 缓存、Nginx 重写、或 SSR 是否生效等问题。
curl -s https://example.com | head -n 20
常用技巧：
- 加
-H "User-Agent: ..."模拟特定客户端（有些站点对爬虫或旧 UA 做了降级） - 用
-I查看响应头，确认Cache-Control、Content-Encoding: gzip等是否影响内容呈现 - 若页面走 HTTPS 且有证书问题，加
-k跳过验证（仅调试用） - 如果返回的是压缩内容（
gzip），用curl -H "Accept-Encoding:" ...强制关闭压缩
HTML 构建产物本身不等于“发布源码”
很多人把本地 npm run build 生成的 dist/index.html 当作“已发布源码”，但实际部署过程可能引入偏差：
- CI/CD 流水线里执行了额外的
sed替换（比如把API_BASE换成线上地址） - CDN 开启了“HTML 自动压缩”或“JS 内联”，导致线上 HTML 和本地
dist不一致 - 使用了
service worker缓存旧版 HTML，即使服务器已更新，用户仍加载旧文件
所以真要对比，得拿线上 curl 下来的 HTML 和你本地构建产物做 diff，而不是只信本地文件。
最常被忽略的一点：HTML 里引用的 <script src="main.a1b2c3.js"></script> 这类带哈希的资源，其内容变化不会反映在 HTML 源码里——你得单独下载并检查那个 JS 文件，才能确认逻辑是否真的更新了。
