Cursor + BrowserTools：告别繁琐调试，轻松提升网页质量
在之前的分享里，聊过 Cursor 搭配 BrowserTools 如何让前端调试变得丝滑，当时有意略过了审计功能——因为怕内容太膨胀。今天单独把这个模块拆出来，好好说说它到底有多能打。
审计模式
BrowserTools 的审计能力，底层靠的是 Lighthouse 引擎和 NextJS 专项检测模块，两者合体后，能做的事情远不止跑个分那么简单。
- ：基于 WCAG 2.1 标准，自动抓 ARIA 标签缺失、色彩对比度异常这些问题——实测准确率能到 92%。
无障碍审计
- ：深度分析 FCP、FID 等核心指标，还支持 SPA 应用的动态监测，定位资源加载瓶颈非常准。
性能审计
- ：独创 NextJS 框架专项检测，针对 ISR、SSR 渲染模式给出定制优化建议，这个在其他工具里很少见。
SEO 审计
- ：涵盖 HTTPS 部署、API 弃用警告等 23 项开发规范检测，基本覆盖了日常开发的主要坑点。
最佳实践审计
- ：智能识别技术栈后执行组合检测，比如发现是 NextJS 站点，会自动加载路由检测模块。
全站审计模式
技术特色
- ：基于 Puppeteer 构建的沙箱环境，检测结果不受浏览器插件干扰，数据更干净。
无头浏览器自动化
- ：输出 JSON 格式报告，可以直接集成到 CI/CD 流水线里，省去人工二次处理的麻烦。
结构化审计结果
- ：多轮检测无需重复加载页面，效率直接提升 300%。
60 秒会话保持
实战演示
这次所有实例都拿百度官网来跑，地址就是 https://www.baidu.com。动手之前先确认几个前置条件：
- 浏览器装好 Chrome 扩展，并确认启用。
- Cursor 打开 MCP，确保绿灯状态。
- 命令行运行 Node Server。
- Cursor 记得切换到 Agent 模式。
无障碍审计
提示词：
@https://www.baidu.com/ 运行无障碍审计结果：
主要展示了三块内容：审计得分、关键问题、优化改进建议。每一项都直接指向具体元素，不用再手动排查。
性能审计
提示词：
@https://www.baidu.com/ 运行性能审计结果：
给出了性能得分，以及 LCP、FCP、SI、TTI、CLS、TBT 这些关键指标。还有优化机会、页面统计数据（总大小、请求数、资源分布、第三方资源、主线程阻塞时间），最后附上优化建议。一套组合拳打下来，性能瓶颈一目了然。
SEO 审计
提示词：
@https://www.baidu.com/ 运行SEO审计结果：
输出 SEO 得分、主要问题、分类统计（通过项、失败项、需手动检查、不适用项），以及优先改进建议。对于注重搜索排名的站点来说，这个模块相当实用。
最佳实践审计
提示词：
@https://www.baidu.com/ 运行最佳实践审计结果：
包含最佳实践得分、主要问题、分类统计、分类得分、优先改进建议。覆盖了从安全到代码规范的多维度检测。
前面四个是单项审计，接下来是组合拳。
全站审计
提示词：
@https://www.baidu.com/ 运行全站审计结果：
一次性把无障碍、性能、SEO、最佳实践四个审计按顺序执行，最终返回一份综合报告。省去了分多次跑的麻烦，适合做全面体检。
补充一点
BrowserTools 文档里常提到的“调试模式”，其实就是前一篇分享中多个命令（日志、截图）的合并执行，这里就不再展开了。
结语
这次主要展示了 BrowserTools 在网页质量分析上的实战玩法。不用频繁切换到浏览器 DevTools 或者其他独立工具，在 Cursor 里直接跑审计，效率提升非常明显。有需要的同学不妨试试，可能会回不去。
