DevScope - 网页开发诊断工具 作者： POLPROG

DevScope 是一套专业的浏览器开发工具，用于按需检查和诊断当前网页。
无需在多个分散工具之间切换，即可分析页面结构、CSS、性能、网络活动、安全标头、无障碍、SEO、存储、JavaScript 运行时和已检测框架。

🧩 DOM 与元素检查

• 分析 DOM 深度、复杂度、重复 ID、脱离节点、内联样式和语义结构
• 直接在页面上选择元素，并使用高亮覆盖层和面包屑导航
• 查看常见结构反模式的可操作改进建议

🎨 CSS 检查与实时编辑

• 查看计算样式、盒模型以及实际生效的属性
• 检测 specificity 冲突和潜在布局问题
• 实时编辑样式、立即查看变化并重置单个属性

⚡ 性能与 CORE WEB VITALS

• 查看 Core Web Vitals、绘制时间、资源时间和长任务
• 分析 JavaScript 执行信号以及不同类型资源的使用情况
• 识别加载缓慢的资源和可能的性能瓶颈

🌐 网络、存储与运行时

• 按类型和状态整理网络请求并检查时间详情
• 查看 LocalStorage、SessionStorage、Cookie、IndexedDB 和 Cache API
• 检查运行时错误、控制台消息、事件监听器、计时器和脚本活动

🔐 安全与无障碍

• 检查 HTTPS、混合内容、CSP、HSTS、Permissions-Policy 和 X-Frame-Options
• 运行面向 WCAG 的 ARIA、对比度、landmark、标签和替代文本检查
• 使用清晰结果和建议确定修复优先级

🔎 SEO 与框架检测

• 检查 meta 标签、Open Graph、canonical URL、结构化数据、标题层级和可索引性
• 检测 React、Vue、Angular、Svelte、jQuery、Next.js、Nuxt.js、Tailwind CSS、Bootstrap 等
• 查看可用版本信息和可能已过时的依赖项

🏥 网站健康报告

• 生成按 P0、P1 和 P2 分组的优先级结果
• 使用 0 到 100 的 DX Score 快速了解技术健康度
• 在一份报告中查看稳定性、网络、性能和 DOM 质量

📊 导出与比较

• 将报告导出为 JSON、CSV 或 Markdown
• 创建快照并比较结果以发现回归问题
• 导出单独模块以进行有针对性的分析

🛠 面向真实调试工作

可将面板停靠在右侧或底部，也可使用浮动模式、调整大小，并通过 Ctrl+Shift+D 快速切换。

Shadow DOM 隔离有助于减少对被检查页面的影响。支持浅色和深色主题、系统同步以及 15 种语言界面。

🔒 隐私优先

扩展不会收集个人数据、跟踪浏览活动、使用分析或 telemetry，也不会连接外部服务器。

所有页面分析都在设备本地完成。偏好设置保存在浏览器中并留在本机。

🏢 关于作者

DevScope 由 POLPROG 开发，这是一家波兰科技公司，专注于开发重视隐私的浏览器扩展、Web 应用和移动应用。

网站: https://polprog.pl/
DevScope 产品页面: 查看产品页面
Chrome 版本: 在 Chrome Web Store 中查看