Claude Code 里 chrome-devtools-mcp 的启动机制，注册一次，按会话自动拉起

最新推荐文章于 2026-08-16 17:57:59 发布
原创 最新推荐文章于 2026-08-16 17:57:59 发布 · 101 阅读 · 0 GEO检测

AI 时代程序员必备技能

Codex、Claude Code、Cursor、Hermes Agent、OpenClaw等工程化实战专栏 ，讲透 AI 如何接管脏活累活

一键订阅

结论可以直接落地，使用下面这条命令把 chrome-devtools-mcp 加到 Claude Code 之后，我们通常不需要每次单独开一个终端去手动运行 MCP server。

claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest

这条命令做的事情不是把 chrome-devtools-mcp 安装成 Windows service、Linux daemon 或者 macOS launch agent，也不是让它常年在后台监听端口。它更像是在 Claude Code 的 MCP 配置里登记一条启动规则，名字叫 chrome-devtools，启动命令是 npx chrome-devtools-mcp@latest。ChromeDevTools 官方仓库在 Claude Code 小节里给出的 MCP only 安装命令正是这一条，说明这是面向 Claude Code 的正式接入方式。(GitHub)

AI 时代程序员必备技能

Codex、Claude Code、Cursor、Hermes Agent、OpenClaw等工程化实战专栏 ，讲透 AI 如何接管脏活累活

一键订阅
标签
#SAP #Cloud #Claude Code
了解本专栏 订阅专栏 解锁全文 超级会员免费看
玩转ClaudeCode：通过Chrome DevTools MCP实现页面抓取和调试的基础入门
2501_92808811的博客
10-05 1899
在当今数字化与智能化深度融合的时代，开发者对高效、灵活的页面数据抓取与调试工具需求日益增长。ClaudeCode 结合 Chrome DevTools 的 MCP（Multi-Context Protocol，多上下文协议）能力，为开发者提供了一种突破传统限制的新型解决方案——既能精准抓取动态渲染的页面数据，又能深度调试复杂前端逻辑。本文作为入门篇，将围绕核心概念解析、关键技巧拆解、典型应用场景说明，结合详细代码案例（重点分析超 500 字），带您迈出“玩转 ClaudeCode”的第一步。
Claude Code 完整使用教程（2026最新版）
热门推荐
程序猿_三产
04-12 1万+
《Claude Code 完整使用教程（2026最新版）》摘要： Claude Code 是 Anthropic 公司推出的智能编程工具，通过自然语言对话实现代码编写、调试和重构。本教程基于 v2.1.101 版本，涵盖安装配置、核心功能及最新特性。主要内容包括： 多平台安装方式（macOS/Linux/Windows） 桌面应用专属功能如并行会话、定时任务和语音模式 模型选择指南（Sonnet/Opus/Haiku） 快速入门示例：5分钟创建Node.js项目 核心功能：代码读写、命令执行、Git集成等
MCP+Agent+Chrome DevTools：UI测试新范式
weixin_30521161的博客
06-21 321
UI测试正从脚本编写走向声明式任务调度。其核心原理是通过标准化协议（如MCP）解耦任务定义、执行调度与浏览器控制，依托Chrome DevTools Protocol（CDP）实现对DOM、网络、渲染等底层行为的精确干预，从而提升测试稳定性与调试能力。该技术显著降低非工程师参与门槛，支撑视觉回归、跨浏览器兼容性比对、PR前置自动化等关键工程场景。本文聚焦于MCP协议驱动的Agent化UI测试架构，深入解析其如何以URL为入口，融合Playbook可复用逻辑与DevTools原子能力，构建高内聚、低耦合的现代
Cursor MCP：chrome-devtools-mcp
人不风流枉少年
01-10 1962
"args": ["-y",--executablePath: Chrome可执行文件路径（Windows路径使用正斜杠），通过右键桌面快捷图标通过打开文件所在的位置查看。Windows 路径中的反斜杠 \ 在 JSON 中需要转义为 \ \ ，或直接使用正斜杠 /。--headless: 是否无头模式运行（默认false，显示浏览器窗口）--viewport: 初始视口大小，例如 1920x1080--channel: Chrome版本通道（stable/canary/beta/dev）
Claude Code深度解析：MCP协议、Skills与subagent工作流
weixin_33755649的博客
06-22 535
Claude Code并非传统AI编程助手，而是一个基于模型控制协议（MCP）构建的本地化智能代理运行时。其核心在于将大模型能力解耦为可验证、可编排的原子技能（Skills），通过subagent实现任务链式执行，并借助hooks在代码语义层面触发实时响应。MCP协议作为轻量级双向流通信契约，使模型真正‘调用工具’而非‘猜测答案’，显著提升工程可控性与调试效率。该架构天然适配本地开发、安全敏感场景及CI/CD增强，为开发者提供比Copilot更底层、更可编程的AI协作范式。
Claude中引入 chrome-devtools-mcp 自动化测试
wu_bai的博客
03-24 858
如果你之前已为Claude Code安装了Chrome DevTools MCP，请务必先从你的安装和配置文件中移除它。(注: args 中的 browserUrl 必须与上面启动 Chrome 时一致)。安装 Node.js: 确保环境已安装 Node.js (推荐 v18+)。打开配置文件: 在用户主目录下打开 ~/.claude.json 文件。启动 Claude Code: 在项目目录下运行 claude。“打开网页 https://www.example.com”“检查当前页面有无红色报错”
VS Code 使用 Chrome DevTools MCP 实现浏览器自动化
小龙在线
09-29 3517
本文介绍了Chrome DevTools MCP的安装与使用方法。该工具具有操作失误率低、Token消耗少、原生支持Chrome浏览器等优势。安装需要Node.js 22.12.0+、Chrome最新版和npm环境。通过命令行添加MCP服务器后，可在VS Code中选择该工具进行测试。文中提供了详细配置截图和相关说明，并附上官方文档及GitHub项目链接供参考。
『MCP开发工具』Chrome DevTools MCP完全指南：AI驱动的浏览器自动化调试实战
老陈聊架构
01-17 4026
本文介绍如何利用Claude Code与Chrome DevTools MCP实现AI自动化浏览器调试。主要内容包括：1）MCP核心功能（页面自动化、动态调试、网络分析等）；2）安装配置指南；3）JS逆向实战案例，展示AI在1分钟内完成传统方法数小时的加密分析任务；4）高级应用场景（爬虫开发、自动化测试等）；5）最佳实践提示词编写技巧。该技术可提升工作效率100倍，降低技术门槛，适用于授权测试、学习研究等合法场景。
玩转ClaudeCode：通过Excel-MCP实现数据清洗并写入Excel
踏雨歌青春，诗酒趁年华
10-07 1万+
本文介绍了使用ClaudeCode结合ExcelMCP实现Excel自动化操作的方法。主要内容包括：1）安装启动ExcelMCP服务器；2）将ExcelMCP集成到ClaudeCode；3）通过ChromeDevTools爬取Confluence页面数据并写入Excel。文中提供了详细的安装步骤和操作示例，帮助开发者快速实现数据抓取与Excel自动化处理。最后还介绍了加入ClaudeCode开发者社区的相关信息。
Chrome DevTools MCP：让AI助手成为你的浏览器调试专家
gitblog_00189的博客
07-03 894
你是否曾经想过，如果AI助手能够像真正的开发者一样操作浏览器、分析性能、调试代码，那该有多好？现在，这个想法已经成为现实！Chrome DevTools MCP（Model-Context-Protocol）是一款革命性的工具，它打破了AI助手与浏览器调试之间的壁垒，让你的AI助手瞬间变身成为专业的浏览器调试专家。 在Web开发的世界里，我们常常面临这样的困境：手动调试耗时耗力，性能问题难以定位
让 AI 助手替你打开浏览器：Chrome DevTools MCP 从安装到排障的一线手记
gitblog_00740的博客
08-14 1085
"登录页转圈十几秒，F12 一打开又好了"——这句话大概能排进前端开发者的年度最心梗语录。你盯着 Network 面板逐条翻请求，手动刷新、录 trace、导快照，折腾一下午，最后可能只换来一句"偶发问题，无法复现"。 但如果有个助手能自己把浏览器打开，自己录性能轨迹、自己翻网络请求、自己分析内存，最后还直接把结论摆在你面前呢？这就是 Chrome DevTools MCP 在做的事——它让 C
Chrome DevTools MCP 实战指南：让AI助手替你操控浏览器的终极方案
gitblog_00526的博客
08-14 229
如果你曾为了复现一个 bug，对着 AI 助手反复打字描述"页面哪里不对"，最后还是要自己打开浏览器手动排查——那么恭喜你，你正需要 Chrome DevTools MCP。这是一个基于模型上下文协议（MCP）的服务器工具，它像一根"数据线"，把 AI 助手和真实的 Chrome 浏览器直接连通，让 AI 不仅能读懂代码，还能真正上手操作网页、抓取性能数据、定位内存问题，甚至替你完成整套测试流程。
Chrome DevTools MCP：如何让AI助手掌控浏览器调试与自动化
gitblog_00658的博客
07-21 158
Chrome DevTools MCP 是一款革命性的开源工具，它将强大的 Chrome DevTools 功能通过 Model Context Protocol 协议开放给各种AI编程助手。通过这个项目，您的AI助手（如 Claude、Cursor、Copilot 或 Gemini）可以直接控制浏览器、调试网页、分析性能并执行自动化任务，为开发者提供了前所未有的AI驱动开发体验。 ## 🚀
Chrome DevTools MCP：AI驱动的浏览器自动化和调试
xiaoshun007的专栏
11-10 395
您无需编写脚本，只需告诉 AI 助手您的需求（例如“导航到此页面并检查控制台错误”或“填写此表单并截屏”），它就会处理所有技术细节。最后，我们了解了这些工具如何协同工作，构建前端，以便 AI 能够看到它创建的内容。由于它只是众多 MCP 服务器之一，您可以将其与其他服务器（例如文件系统访问、数据库工具和 API）结合使用，以构建跨多个工具的工作流程。AI 会筛选列表并识别问题：“是的，四个 API 请求失败。AI助手能够理解您的意图，并执行相应的Chrome开发者工具，然后以易于理解的格式呈现结果。
浏览器自动化新境界：使用claude-code-local控制Brave浏览器的完整教程
gitblog_00824的博客
05-11 1129
**claude-code-local** 是一个革命性的本地AI代理工具，让你能够完全在本地设备上运行Claude Code，并通过本地AI模型控制Brave浏览器实现自动化操作。这个强大的工具支持Apple Silicon芯片，提供Gemma 4 31B、Llama 3.3 70B和Qwen 3.5 122B等多种大型语言模型，让你在完全离线、私密的环境中实现浏览器自动化。 ## 🎯 为什
现代AI编码助手与终端复用技术融合：从Claude Code到OpenCode的全景实践
vortex5的博客
12-16 1597
AI编程助手与终端复用器融合实践 本文探讨了AI编程助手（如Claude Code和OpenCode）与终端复用技术（tmux/iTerm2等）的融合实践。通过终端复用器，开发者可以实现AI会话的并行执行、持久监控和自动化交互。文章系统梳理了三类核心工具（会话编排器、终端增强插件、监控与UI工具）的工作原理，并详细介绍了Claude Code生态（Maniple、claude-tmux）和OpenCode生态（@runecraft/spawn、opencode-pty等）的具体配置与使用方式。
Claude Code VS Code插件安装与IDE级AI工作流配置指南
weixin_33700350的博客
07-16 477
IDE集成AI助手正从代码补全工具升级为具备工程闭环能力的本地智能代理系统。其核心原理在于VS Code扩展、CLI命令行引擎与MCP（Model Context Protocol）协议栈的深度协同，实现代码理解、修改、测试、Git操作与外部工具调用的一体化执行。技术价值体现在消除上下文切换、保障环境一致性、支持企业级权限管控与离线可运行能力。典型应用场景包括全栈开发提效、PR自动化生成、多分支并行协作及本地开发环境克隆。本文聚焦Claude Code在VS Code中的可靠安装、CLI打通与Spark图标
如何用TradingView MCP Jackson在10分钟内搭建你的AI交易分析工作流
最新发布
gitblog_00840的博客
08-16 469
每天开盘前，你是不是都要在TradingView里手动切换十几个品种、逐个看一眼指标、再在心里拼凑出今天的交易计划？这个重复劳动不但耗时，还容易漏掉关键信息。TradingView MCP Jackson就是为解决这个问题而生的：它是一个开源的MCP桥接工具，让Claude Code这类AI助手可以直接"看见"并操控你本地的TradingView桌面端，一键生成带交易偏见的晨间简报。下面这份入门指
5分钟上手MCP Server：Python轻量实现与Claude集成实战
weixin_33728268的博客
06-21 741
MCP（Model Context Protocol）是一种定义大语言模型与外部工具间结构化上下文交换的开放协议，本质是AI能力集成的标准化接口。其核心原理在于通过HTTP API（如/health、/tools、/call）实现协议层解耦，确保LLM能安全、可复用地调用本地工具。技术价值体现在降低Agent开发门槛、统一多工具接入范式、支持富媒体上下文（如image、design类型）。典型应用场景包括Claude Desktop/Code技能扩展、Playwright网页自动化、IDA Pro二进制分析
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

汪子熙

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值