Cursor + BrowserTools：告别繁琐调试，轻松提升网页质量

在之前的分享里，聊过 Cursor 搭配 BrowserTools 如何让前端调试变得丝滑，当时有意略过了审计功能——因为怕内容太膨胀。今天单独把这个模块拆出来，好好说说它到底有多能打。

审计模式

BrowserTools 的审计能力，底层靠的是 Lighthouse 引擎和 NextJS 专项检测模块，两者合体后，能做的事情远不止跑个分那么简单。

• 无障碍审计
  ：基于 WCAG 2.1 标准，自动抓 ARIA 标签缺失、色彩对比度异常这些问题——实测准确率能到 92%。

• 性能审计
  ：深度分析 FCP、FID 等核心指标，还支持 SPA 应用的动态监测，定位资源加载瓶颈非常准。

• SEO 审计
  ：独创 NextJS 框架专项检测，针对 ISR、SSR 渲染模式给出定制优化建议，这个在其他工具里很少见。

• 最佳实践审计
  ：涵盖 HTTPS 部署、API 弃用警告等 23 项开发规范检测，基本覆盖了日常开发的主要坑点。

• 全站审计模式
  ：智能识别技术栈后执行组合检测，比如发现是 NextJS 站点，会自动加载路由检测模块。

技术特色

• 无头浏览器自动化
  ：基于 Puppeteer 构建的沙箱环境，检测结果不受浏览器插件干扰，数据更干净。

• 结构化审计结果
  ：输出 JSON 格式报告，可以直接集成到 CI/CD 流水线里，省去人工二次处理的麻烦。

• 60 秒会话保持
  ：多轮检测无需重复加载页面，效率直接提升 300%。

实战演示

这次所有实例都拿百度官网来跑，地址就是 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 里直接跑审计，效率提升非常明显。有需要的同学不妨试试，可能会回不去。