17370845950

“查看网页源代码”看到的是服务器返回的原始HTML，但若页面经JS动态渲染（如React/Vue），则仅显示占位结构；要确认真实发布内容，应通过Network面板抓取原始响应、curl命令获取服务器输出，或对比线上HTML与构建产物，并检查带哈希的JS文件是否更新。

浏览器右键“查看网页源代码”只能看到渲染后的 HTML

发布后的 HTML 页面，用户通过浏览器访问时，右键 → 查看网页源代码 看到的确实是服务器返回的原始 HTML，但前提是：它没被 JavaScript 动态重写过。如果页面用了 React、Vue 或大量 document.write()、innerHTML 操作，你看到的源码里可能只有 这类占位结构，真实内容是运行时才插入的。

所以“查看已发布源码”的第一层含义，就是确认你真正想看的是哪一层：

• 服务器吐出的原始 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 里引用的 这类带哈希的资源，其内容变化不会反映在 HTML 源码里——你得单独下载并检查那个 JS 文件，才能确认逻辑是否真的更新了。