摘要
对比Chrome DevTools与Playwright MCP工具，实测15分钟复刻月PV20万网站、10分钟采集小红书数据、优化AI生成代码，提供自动化测试与性能调试场景选择指南。
国外有一个很逆天的摸鱼网站 DrawAFish（drawafish.com）
功能非常简单，首页是一个大鱼缸，上面是来自世界各地的用户画的鱼，而且都很丑
这么简陋的网站，没想到一个月居然有 20 多万人浏览。。如果挂谷歌联盟广告的话，收入可能有 400 美金
太离谱了，用 AI 复刻它不就是分分钟的事吗？
直接打开 Claude Code，输入提示词：
[!TIP]
只使用 Chrome DevTools 一个 MCP 工具，对 "https://drawafish.com/" 进行复刻，深入网站二级网页，包括画好的鱼在幕布上游动的网页，以及相关的功能，完成后对复刻网站进行各项功能校验检查。
然后就有了一个外观 80% 相似，功能可以说一模一样的网站了：
我知道样式还很丑，但这才过去 15 分钟。。跑一个 MVP 验证效率非常足够了。
原网站长这样，是不是很像！
当然这不是今天要聊的。
有没发现我用了一个新的 MCP——Chrome DevTools MCP
这是前阵子谷歌亲自下场，把亲儿子 Chrome 的开发能力打包而成的
相比于原先用的最多的 Playwright：
Kimi k2 爬数据
用 Playwright MCP 让 AI 改它自己写的屎山代码
体验下来，跟 Chrome 交互的更丝滑。
例如开头这个场景，用 Playwright 做出来是这样的：
功能是差不多的，但长得跟原网站就差很多了。
毕竟我们要做「复刻」肯定是越像越好！
今天就给大家介绍这个工具，看看它到底跟微软的 Playwright 有什么不同？各自又适合做什么场景呢？
文末附了对比结论。
先带着大家用一下。
—、部署流程
环境要求：Claude Code/最新 Chrome（重点）；Node.js（Playwright MCP 需额外安装）。
安装过程非常简单，有两种方式：第一种方式在 VS Code 下安装，三步搞定：
第一步，打开 VS Code 界面，运行 claude
第二步，然后在终端执行下面这行命令。
claude mcp add chrome-devtools npx chrome-devtools-mcp@latest
第三步，验证安装。添加成功后，启动 Claude Code，输入/mcp 命令，如果能在列表里看到绿色的 chrome-devtools，那就说明成功啦。
第二种方式：也可以在.claude\下修改或新建 mcp.json 文件中添加配置。
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["-y", "chrome-devtools-mcp@latest"]
}
}
}
二、实践案例
1、小红书热门笔记采集
先拿传统的小红书数据采集场景开刀，看能不能用它来监控小红书博主，抓取最近笔记：
[!TIP]
打开浏览器，进入小红书，接下来的所有操作都通过 chrome devtools mcp 工具来完成：帮我获取小红书今日红人榜前 5 名博主的最新的 3 条信息（博主名称、推文内容、推文链接、发布时间、回复数、转发数、点赞数、浏览数、推文类型、数据获取时间）注意需要滚动加载推文，以免遗漏。中间如果需要验证可提示我进行手工验证，最后保存到 Excel 文档中。
MCP 工具自行编制计划，列出步骤：
顺利跑起来了：
撞了墙会自行找解决方案
最终按要求生成的 Excel 文件：
花了不到 10 分钟，速度可以说是很快了：
2、「自动化」debug
之前我跑过用 Playwright mcp 去改 AI 自己写的屎山代码
首先，我们用常规用 Claude Code 生成一个类似小红书的简单网站，让 AI 给我们提示词：
然后把提示词丢给 Claude：
[!TIP]
现在请作为前端开发工程师，使用 React 和 Tailwind CSS 实现小红书风格的首页 Feed 流组件。具体要求：
- 布局：使用响应式网格布局（Grid Layout），在移动端单列显示，在平板和桌面端多列显示。
- 笔记卡片：每个卡片包含笔记图片（作为视觉焦点）、笔记标题、笔记内容摘要（最多显示两行）、发布者头像和昵称、点赞/收藏图标按钮。
- 交互：点击笔记卡片可以跳转到笔记详情页（暂时用
#占位）。 - 样式：整体设计清新简洁，图片比例固定，阴影柔和，符合现代审美。
请生成完整的 React 组件代码，包含必要的示例数据用于预览效果。
不出意外，它生成出来的是这个屎样子：
这完全没法看呀！！
接着就是 chrome-devtools`` mcp 出场了：
[!TIP]
使用 chrome-devtools 的 MCP，对小红书 clone 网站进行检查修复，优化视觉效果。
说实话，跑了 2 次，效果不佳，于是我怒了：
[!TIP]
你再自己看看，还是这么大？你是 XX 吗？赶紧再详细的查找一下原因，最后一次细致的查找原因并加以修改，改不好我会砸电脑的！！
就给解决了。。然后继续：
[!TIP]
对网站进行进一步优化，主要在视觉效果这块，要充分对照小红书的主页界面，复制包括网页布局、CCS 等要素。目前的视觉效果还是不好，主要呈现内容偏页面左边，页面右边留白太多。
就有了最终版本：
可以说，效果比之前提升的不是一点两点。
三、该怎么选？
至此，你应该也能感受到 Chrome DevTools 的能力，直接和 Playwright 做个对比。
首先是工具调用上：
两者覆盖浏览、交互与读取，但定位不同：
-
Playwright 面向自动化与端到端测试，内置代码生成与原生 HTTP 断言、跨 iframe 操作；
-
chrome-devtools 偏调试与分析，网络与性能追踪更强，支持页面选择、快照及环境仿真。
从更细的纬度上：
简单来说，**需要查找复杂问题的原因或者测试网页的性能时，可以优先选择 DevTools MCP **
而在流程测试验证上，优先选择 Playwright。
从以下示例提示词能把落地场景看得更清楚：
Playwright MCP（跑流程/验证）
[!TIP]
帮我跑一遍 [页面/流程]：步骤是 [登录 → 搜索 → 加购 → 下单]，如果任何一步失败，截屏并在表格记录失败步骤与报错文案。
[!TIP]
做多语言测试，逐个语言（[zh,en,fr…]）执行同一购买流程，对比重要文案是否一致并记录差异。
Chrome DevTools MCP（找原因/提速）
[!TIP]
体检这个 URL：[链接]。采集一次性能轨迹，告诉我最耗时的 5 个脚本/图片/第三方资源，并给出 3 条按影响排序的优化建议。
[!TIP]
抓取控制台与网络错误，按出现频次列出 Top 错误并指明对应文件与时间线，输出‘问题-证据-建议’清单。