右键“查看网页源代码”看不到动态渲染内容，因只显示服务器返回的原始HTML，不含JS执行后插入的DOM；应使用开发者工具Elements面板或console中copy(document.documentElement.outerHTML)获取完整渲染后HTML。
右键“查看网页源代码”为什么经常看不到动态渲染的内容
因为浏览器里看到的页面，很多 HTML 是 JavaScript 运行后才插入进去的；右键 → 查看网页源代码只显示服务器返回的原始 HTML，不包含 JS 渲染后的结果。
常见错误现象：document.getElementById找不到元素、用爬虫抓到的页面为空、复制的 HTML 里没有你看到的商品列表。
- 真实使用场景：调试 Vue/React 页面、检查 SEO 可见内容、分析 AJAX 加载逻辑
- 正确做法是打开开发者工具（
F12或Ctrl+Shift+I），切换到Elements标签页——这里展示的是当前 DOM 树，含所有 JS 修改 - 注意：
Elements里右键选Copy → Copy outerHTML才能得到你“看见”的完整结构
Chrome 控制台里怎么快速导出当前渲染后的完整 HTML
不能直接保存 Elements 面板内容，但有可靠的一行命令替代手动复制粘贴。
在 Console 标签页中输入并回车：
立即学习“前端免费学习笔记（深入）”；
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
copy(document.documentElement.outerHTML)
然后去任意文本编辑器 Ctrl+V 即可粘贴完整 HTML（含所有动态插入的节点）。
- 这个方法比截图或手动复制更准确，尤其适合大页面或带大量内联样式/脚本的场景
- 注意：
document.documentElement包含根节点，而document.body.outerHTML只导出内容 - 如果页面用了 Shadow DOM，该命令不会自动展开影子根，需单独调用
shadowRoot.innerHTML
用 curl 或 requests 抓到的 HTML 和浏览器里看到的不一样，怎么办
这是服务端渲染（SSR）缺失或前端路由（如 react-router）导致的典型问题：服务器返回的是骨架 HTML，实际内容靠 JS 在客户端加载。
- 先确认是否为 CSR（Client-Side Rendering）：禁用浏览器 JS（DevTools →
Sensors → Disable JavaScript），刷新页面。如果空白或只剩 loading，说明依赖 JS 渲染 - 简单验证方式：用
curl -s URL | head -20看返回里有没有关键文字，再对比浏览器 Elements 面板里是否存在 - 若必须用服务端获取渲染后 HTML，可用 Puppeteer 或 Playwright 启动无头浏览器执行 JS，而不是直接请求原始 HTML
移动端 Safari 或微信内置浏览器怎么查看源码
手机端没有右键菜单，也不能开 F12，但仍有可行路径。
微信 iOS 版可借助「腾讯 x5 内核调试」：在地址栏输入 debugtbs.qq.com 开启调试，再通过电脑 Chrome 的 chrome://inspect 连接设备；安卓微信则需开启“开发者选项”并启用 USB 调试。
- 更轻量的办法：用 Safari 浏览器，在设置 → Safari → 高级 → 开启“Web 检查器”，连接 Mac 后用 Safari 开发菜单远程调试
- 注意：微信安卓版默认禁用
Web 检查器，且部分版本会拦截console.log输出，别依赖它查变量值 - 临时应急：在页面 JS 中插入
document.write('<pre class="brush:php;toolbar:false;">' + document.documentElement.outerHTML + '</pre>')强制输出（仅限测试，勿上线）
view-source: 链接看，很容易漏掉中间态。真正要确认“用户看到什么”，得盯住 Elements 面板里的实时 DOM。 
