RenderScope: SSR vs CSR Viewer

代码木鱼

概述
🔍什么是 RenderScope？

RenderScope 是一款开发人员工具，旨在让您清晰、即时地比较 Web 服务器物理提供的内容（SSR — 服务器端渲染）和 JavaScript 运行后浏览器呈现的内容（CSR — 客户端渲染）。

这是诊断水合问题、SEO 渲染问题、Core Web Vitals 回归和依赖于 JavaScript 的布局变化的最快方法 - 无需任何复杂的设置。

---

⚡ 主要特点

🖥️ 并排预览
在干净的分割窗格布局中同时查看 SSR 和 CSR 输出 - 无需切换，无需重新加载。

📱 响应式设备模型
准确模拟桌面 (1440 像素)、平板电脑 (768 像素) 和移动设备 (414 像素) 视口尺寸。视图会自动缩放以完美适合您的屏幕。

🚫 真正的 JavaScript 隔离
SSR 窗格使用 iframe 沙箱严格禁用所有 JavaScript 执行 - 因此您所看到的正是爬虫或禁用 JS 的用户所看到的。

🔄 刷新按钮
只需单击一下即可同时重新加载 SSR 和 CSR 视图 - 无需重新加载整个页面。

🌗 深色和浅色模式
自动继承您系统的首选配色方案。随时从顶部栏手动切换。

🛡️ 智能标头绕过
自动绕过 X-Frame-Options 和 Content-Security-Policy 标头，因此几乎任何网站都可以在预览窗格中呈现。

📋 滚动条隔离
将干净的 CSS 注入加载的框架中以隐藏本机滚动条，确保无干扰、设备真实的体验。

---

👨‍💻 适合谁？

• 前端开发人员调试 SSR/CSR 渲染不一致问题
• SEO 工程师审核 Googlebot 实际看到的内容与用户看到的内容
• QA 工程师跨设备断点检查响应式设计
• 产品经理在发布前验证不同设备上的最终渲染

---

🔒 隐私第一
RenderScope 不收集、存储或传输任何用户数据。所有分析完全在设备上的浏览器中执行。没有账户，没有跟踪，没有分析。

📋 变更日志
v1.0.0 — 初始版本

RenderScope: SSR vs CSR Viewer 1.0.0.crx	.crx	1.0.0	94.01KiB	支持
RenderScope: SSR vs CSR Viewer 1.0.0.zip	.zip	1.0.0	94.01KiB	不支持