Xiao Tan
@tvytlx
技术专家，从阿里到澳洲到AI创业，随机对 AI 产品、AI 技巧发表感想
가입 March 2017
927 팔로잉 중 12.8K 팬
谷歌官方出了个 Chrome DevTools 的 MCP，接进 Claude Code 之后，网页性能优化这事直接全自动闭环了。
以前用 AI 写代码，它写完其实是瞎的。
网页哪里卡了、控制台报了什么错、内存有没有泄漏，得靠人打开浏览器看一眼，再当肉身传话筒复制喂给它。
现在装上这玩意，Claude Code 自己就能操控 Chrome。
自己跑 Lighthouse 测速、看网络请求、抓报错、截屏、拍内存快照。
你进到项目目录，把这段话扔给它就行：
“在 Chrome 里打开 [网址]，跑一遍 Lighthouse 和性能追踪。按影响大小列出最严重的 5 个问题并附上证据，在代码库里挨个修好，最后再测一遍把前后分数对比发我。”
找病灶、改代码、复查跑分，全在它自己脑子里转完了。
我觉得这背后有个挺明显的规律：
只要一件事的传感器能直接连上大模型，而且好坏有明确的量化标准，中间那个负责“看一眼再传话”的环节就会瞬间消失。
当然，要是让你调个“看着更大气一点”的排版，这种没法打分的主观审美它依然抓瞎。
但凡能变成数字和报错的苦力活，现在交给它比人省心太多了。
安装就一行命令：
claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest
（谷歌默认会收集统计数据，介意的话可以在后面加个 --no-usage-statistics）
照这个速度把工具挨个接下去，以后我坐在电脑前最大的作用，大概就是帮它交电费和偶尔按一下回车了。
더 보기
Claude Code can now run a Lighthouse audit on your website, fix what's slow, then prove it with a new score.
Add Google's official Chrome DevTools MCP:
claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest
Then open Claude Code in your site's folder and paste:
"Open [URL] in Chrome. Run a Lighthouse audit and a performance trace.
List the 5 biggest problems by impact, with the evidence for each.
Fix them in this codebase one at a time.
Run the audit again and show me the scores before and after."
It also reads network requests and console errors, and takes screenshots and memory snapshots.
Google collects usage statistics by default. Add --no-usage-statistics to opt out.
더 보기
