Chrome 放大招，AI能自己打开浏览器帮你调bug了！

做前端、运营和产品的小伙伴，应该都懂这种日常崩溃：
改完一行代码切到浏览器刷新，按钮点了没反应，又得切回开发者工具翻半天控制台找报错； 做了个活动落地页，总觉得加载慢，但到底是图片太大还是脚本卡了，自己捣鼓半天也说不清楚...
以前我们总说AI写代码有多牛，但有个很尴尬的问题一直没解决，AI写出来的代码，能不能跑、跑起来啥样、有啥bug，它自己是瞎的。
它只会对着代码文本瞎琢磨，没法真的打开浏览器看一看、点一点，最后还得我们亲自来处理。
如果你也有这种烦恼，那Chrome官方开源的这个宝贝-Chrome DevTools MCP你一定要瞧一瞧。

Chrome 开发者官网：https://developer.chrome.com
Github 开源：https://github.com/ChromeDevTools/chrome-devtools-mcp


什么叫MCP其实不重要，你可以把它理解成一根万能数据线。
一头插在你平常用的AI编程助手上面，比如Cursor、Claude Code、GitHub Copilot等，只要支持MCP协议都能用。
另一头直接插进Chrome浏览器的核心，把开发者工具的全部能力，原封不动地开放给AI。

而且这可是Chrome官方亲儿子，和开发者工具原生打通，稳定性和功能完整度，比第三方工具高到不知道哪里去了。
安装也很简单，直接一句话让你的工具帮你进行部署就可以了。

以WorkBuddy为例，部署完后，在左侧找到“连接器”，然后右上角选择“自定义连接器”，然后就会在“我的MCP”找到这个找到chrome-devtools，点信任即可。

之后直接在对话窗口输入你的需求就可以了，比如我让它查站点的性能追踪和查LCP和CLS。

让它帮我分析网站的首屏性能也是轻轻松松。

很多做运营、产品的小伙伴，自己做了落地页或者官网，总觉得打开慢，但又不知道慢在哪。
想去测性能吧，Lighthouse全是英文，Performance面板看得眼花缭乱，各种专业名词看了头大。
这次我直接扔给AI一个网站地址，让AI帮我分析下这个网站的加载性能，找出主要拖慢速度的原因，给我点优化建议。

没有乱七八糟的专业术语，全是直白的结论和可落地的建议，甚至连优化完大概能快多少都给了个估算。
讲真的，这功能对非技术岗的朋友太友好了，以后不用再追着开发问为啥我们网站这么慢，自己先测一遍，拿着结论去沟通，效率直接翻倍。

当然了，也不是说有了它，前端就失业了，没那么夸张。
像特别复杂的交互逻辑、深层的业务bug，它也只能帮你定位表面问题，深层原因还得人来分析，还有一些非常冷门的浏览器API，目前支持还不是很全。
它最擅长的，是帮你解决那些简单但繁琐、重复又机械的事，比如找报错、测性能、跑流程、做检查。
大概能帮你省掉大部分时间的调试杂活，让你把时间花在真正需要思考的地方。
而且最重要的是，它完全开源免费，没有任何使用门槛，想用直接拿去用，感兴趣的可以试试。