View Rendered Source 插件评测：前端和SEO必装的渲染源码对比神器

用了几年“查看源代码”，我一直以为那就是网页的真实样子。直到遇到 View Rendered Source 这个 Chrome 插件，才发现自己被骗了好久——浏览器最终渲染出的 DOM，和服务器吐出的原始 HTML 可能完全不同，尤其当页面用了 Angular、React 或 Vue.js 这些框架时，JavaScript 早就把页面改了八百遍。

核心功能：三个视角看清页面真相

安装后右键或点击图标，直接看到三个面板：Raw（服务器原始源码）、Rendered（浏览器渲染后的 DOM）、Difference（差异高亮）。行级对比把 JS 修改的每一个标签都标出来，再也不用对着控制台发呆。相比传统“查看源代码”只能看到静态文本，这个插件直接展示动态渲染后的结构，对使用 React、Vue.js、Angular 的开发者来说，调试 SSR 或客户端渲染问题太实用了。

SEO 人员必备：模拟 Googlebot 动态渲染

Google 官方的动态渲染方案（Dynamic Rendering）要求服务器区分 bot 和用户。这个插件内置了 “Mobile User-Agent” 和 “Googlebot” 请求开关，一键查看 Googlebot 看到的版本。我用它在 Gatsby 和 Prerender 站点测试过，发现 JS 未执行时的空壳问题，比用 Search Console 方便十倍。其他同类工具如 “Web Developer” 插件虽然也有查看渲染源码的功能，但缺少行级差异对比和 bot 模拟，精准度差一截。

实际体验：轻量、精准、免费

插件只有几百 KB，不影响浏览器速度。对比 “HTML Source Viewer” 或 “View Page Source”，View Rendered Source 的 “差异” 视图是杀手级功能——颜色块标记新增、删除、修改的行，一眼看出 JS 动了哪些手脚。对于动态加载内容（比如 Ajax 后的列表），传统查看源码完全失效，而它完美捕捉。不过注意：它只显示当前 DOM 快照，无法追踪实时变化，这点不如 “React Developer Tools” 精细，但作为快速诊断工具已经足够。

强烈推荐给了做 SEO 的朋友和 React 新手。如果遇到 Google 索引问题，先用它看看 bot 视角的页面，很可能就是渲染差异导致的。免费、开源、开发者在 Twitter 上回复很快，没理由不装一个。