Judge — 页面性能体检 | 让"系统好慢啊"变成可定位的诊断报告

你一定遇到过这些痛点

"系统好慢啊"

"后台打开特别卡，你们看看吧" —— 来自产品/运营同事的工单

开发收到后无法复现，不知道是哪个接口慢、是网络问题还是后端问题，工单挂了三天没人领。

扯皮：前端还是后端的锅？

"接口 2 秒才返回，肯定是后端慢" / "我后端日志才 50ms，是你前端的问题"

双方各执一词，缺少客观数据。排查成本远高于 bug 本身。

HTTP 200 但业务报错

"监控没告警啊，接口都是 200" —— 但页面显示的是空数据或错误提示

后端返回 HTTP 200 + JSON 里 status=-1，常规监控发现不了，用户看到的是白屏或异常。

"刚才还好好的，突然就卡了"

"我也不知道点了什么，反正就卡住了" —— 同事描述 bug 的日常

没有操作轨迹，开发无法复现。来回沟通 5 轮才定位到是某个按钮触发了慢查询。

用户自己网差，却说系统有问题

"所有页面都慢，肯定是你们服务器挂了"

开发排查半天，发现是用户在用公司 VPN，下行只有 0.5Mbps。但当时没证据证明。

F12 开发者工具？算了吧

"让他打开 F12 截图给我" / "什么是 F12？"

非技术人员用不了 DevTools，你也不可能远程接管每个人的电脑。

装上 Judge，一键出报告

🔍

慢接口 Top 排名 + 5 类归因

自动按耗时排序，每条标注原因：后端慢 / 网络拥塞 / 首次连接慢 / 浏览器排队 / 响应过大。前后端不用再吵。

🎯

业务层失败检测

HTTP 200 但 JSON 里 biz.status 异常？Judge 自动识别并高亮。常规监控看不到的问题，这里一目了然。

📜

完整 PDF 报告

带 IP 水印的专业诊断报告，直接粘到工单或发邮件。开发收到即可定位，不用再来回问。

📈

网络环境 0-100 评分

综合下行带宽、RTT、丢包推算的客观分数。"是不是我网差？" —— 看这个数字就知道。

👁

用户操作轨迹

自动记录最近 30 次点击/输入/跳转。"我刚才点了什么来着？" —— 不用问了，报告里有。

⚠

JS 异常 + 资源加载失败

"页面白了" 的真实原因。运行时报错、unhandled rejection、CSS/JS/图片加载失败，全部捕获。

完整功能清单

诊断
慢接口 Top N 排名
按耗时倒序，每条标注 5 类原因标签（后端慢 / 网络拥塞 / 首次连接 / 浏览器排队 / 响应过大）
诊断
前后端责任判定
利用 Resource Timing + 服务端 extend.runtime 交叉验证，客观区分谁的问题
检测
业务层失败抓取
HTTP 200 但 JSON 业务状态码异常，自动识别并展示响应体详情
检测
HTTP 状态异常
4xx / 5xx / 超时等非 200 接口单独列出，含响应体片段
评估
网络环境 0-100 评分
综合 navigator.connection + 域名实测 RTT，得出客观网络质量分数
评估
Web Vitals 体验指标
LCP / FCP / CLS / INP / TTFB / Long Tasks，用好/中/差三档直观展示
追踪
用户操作轨迹
最近 30 次点击/输入/路由跳转/页面切换，带时间戳和元素定位。不记录密码。
追踪
JS 异常 + 资源失败
window.onerror、unhandledrejection、link/script/img 加载失败，完整错误栈
架构
iframe 多框架支持
后台管理系统常用 iframe 嵌套，Judge 自动采集所有子框架数据并合并分析
导出
PDF / 摘要 / 完整报告
一键生成带 IP 水印的 PDF；复制文字摘要粘到工单；打开网页版完整交互报告
告警
被动 Badge 提醒
页面出现接口异常或 JS 报错时，扩展图标自动显示红/琥珀色角标计数
检测
域名 Ping 实测
对页面涉及的每个 API 域名发送探测请求，实测 RTT 和连通性

Judge 页面性能体检

你一定遇到过这些痛点

装上 Judge，一键出报告

慢接口 Top 排名 + 5 类归因

业务层失败检测

完整 PDF 报告

网络环境 0-100 评分

用户操作轨迹

JS 异常 + 资源加载失败

使用只需 3 步

打开慢页面

复现卡顿操作

点扩展图标

完整功能清单

隐私承诺：零数据上传

Judge 是一个纯本地工具