url: "http://xhslink.com/o/UINHiPD3O9"
title: "🔧 Chrome MCP调试我踩了一周坑 - 小红书"
date_saved: 2026-03-21
category: tech
tags: [AI工具, 效率提升, 前端开发, Chrome, MCP协议]
source: direct
reminder: false
cross_skills: []
session_mention: never
url_hash: "af325830e890"
🔧 Chrome MCP调试我踩了一周坑 - 小红书
**Summary**: Chrome MCP调试工具提高前端开发效率
Key Points
- Chrome MCP调试工具可以让AI直接查看浏览器的调试现场
- 减少手动复制和粘贴的步骤
- 可以直接在浏览器里执行JS和修改DOM
Content
创作中心 业务合作 发现 直播 发布 通知 沪ICP备13030189号 | 营业执照 | 2024沪公网安备31010102002533号 | 增值电信业务经营许可证：沪B2-20150021 | 医疗器械网络交易服务第三方平台备案：(沪)网械平台备字[2019]第00006号 | 互联网药品信息服务资格证书：(沪)-经营性-2023-0144 | 违法不良信息举报电话：4006676810 | 上海市互联网举报中心 | 网上有害信息举报专区 | 自营经营者信息 | 网络文化经营许可证：沪网文(2024)1344-086号 | 个性化推荐算法 网信算备310101216601302230019号 © 2014-2026 行吟信息科技（上海）有限公司 地址：上海市黄浦区马当路388号C座 电话：9501-3888 更多 沪ICP备13030189号 | 营业执照 | 2024沪公网安备31010102002533号 | 增值电信业务经营许可证：沪B2-20150021 | 医疗器械网络交易服务第三方平台备案：(沪)网械平台备字[2019]第00006号 | 互联网药品信息服务资格证书：(沪)-经营性-2023-0144 | 违法不良信息举报电话：4006676810 | 上海市互联网举报中心 | 网上有害信息举报专区 | 自营经营者信息 | 网络文化经营许可证：沪网文(2024)1344-086号 | 个性化推荐算法 网信算备310101216601302230019号 © 2014-2026 行吟信息科技（上海）有限公司 地址：上海市黄浦区马当路388号C座 电话：9501-3888 发财 关注 内容可能使用AI技术生成 1/6 发财 关注 🔧 Chrome MCP调试我踩了一周坑 上周用 AI 写了个前端组件，跑起来直接白屏。把报错复制给 Claude，来回粘贴了七八次，改了又坏……后来才发现，Chrome 官方已经出了 DevTools MCP，能让 AI 直接"看"到浏览器的调试现场，根本不用你手动复制任何东西。 一周踩坑总结： 以前的调试流程：DevTools 复制报错 → 粘贴给 AI → 改代码 → 又出问题 → 反复循环，一个 Bug 光切窗口就切 20 多次。 现在的做法：在 chrome://flags 里搜 DevTools MCP 开启实验功能，Claude Desktop 配置文件里加一个 MCP server，之后直接在 DevTools 里用自然语言描述问题，Claude 能读 Console 报错、Network 请求状态、DOM 结构，全程零复制。 大多数人没注意到的一点：MCP 不只是"看"，Claude 还能直接在浏览器里执行 JS、修改 DOM，验证修复效果。测试交互逻辑不用再自己写测试代码了。 不够顺滑的是：localStorage 的内容它读不到（安全限制），部分版本 Chrome 的 AI 面板偶发消失，需要重开 DevTools。还是实验功能，偶尔不稳定。 提示词示例（直接复制用）： 「我点击提交按钮后 Console 出现报错，Network 里接口返回了 200 但页面没更新，帮我找出是哪段逻辑的问题」 体感上：原来 30 分钟的 Bug，现在 5-8 分钟搞定。工具的价值不在炫技，在于少废话多干活。 #AI工具 #效率提升 #职场干货 #前端开发 #Chrome #MCP协议 #编程效率 5天前 上海 加载中