1. 项目概述当AI成为你的调试副驾如果你和我一样每天有超过一半的时间是在Chrome DevTools里度过的——检查元素、打断点、分析网络请求、查看内存快照——那你肯定也幻想过要是能有个助手帮你自动完成这些重复劳动就好了。比如在排查一个复杂的竞态条件bug时你一边盯着控制台一边在十几个文件里切换手忙脚乱。这时你只需要对AI说一句“帮我监控一下/api/user这个接口的调用栈看看每次请求是从哪个组件的useEffect里发出来的把可疑的组件名和行号列出来。”然后AI就能接管DevTools自动执行一系列操作并给你一份清晰的报告。这听起来像是科幻场景但“Chrome DevTools MCP”这个项目正在让这个场景变成现实。它不是一个全新的独立工具而是一座桥梁一座连接我们熟悉的Chrome开发者工具和当下如火如荼的AI Agent生态的桥梁。MCP即Model Context Protocol你可以把它理解为一套“翻译”规则。它定义了AI模型如Claude、GPT如何与外部工具如文件系统、数据库、当然也包括DevTools安全、结构化地进行对话。这个项目的核心价值在于它把浏览器调试这个高度交互、视觉化、依赖手动操作的专业领域转化成了AI能够理解和执行的标准化指令集。从此AI不再只是一个能写代码的聊天机器人它可以直接“坐”到你的电脑前操作DevTools执行真实的调试任务。无论是前端工程师想自动化性能分析流程还是测试工程师想构建更智能的UI自动化检查甚至是技术布道师想录制动态的教学案例这个组合都打开了全新的可能性。它解决的正是调试工作中那些繁琐、重复但又有固定模式可循的痛点将开发者从机械操作中解放出来更专注于问题本身的逻辑推理。2. MCP协议精讲AI与工具世界的“通用插座”在深入如何让AI操作DevTools之前我们必须先理解MCP这个基石。你可以把MCP想象成电子设备里的“USB-C接口”。在USB-C统一江湖之前手机、电脑、相机各有各的充电和数据口互联互通需要一堆转接头非常麻烦。AI世界也曾面临类似困境每个AI模型能力强大但它们被困在“云端”不知道如何操作你电脑里的本地工具比如读取特定文件、查询数据库或者控制一个桌面应用。MCP就是为解决这个“连接”问题而生的通用协议。它由Anthropic公司推动其核心设计思想是标准化、安全性与模块化。2.1 MCP的核心组件与工作原理MCP的架构非常清晰主要包含三个角色MCP 服务器Server这是实际提供能力的“工具方”。比如一个“文件系统MCP服务器”可以提供读取、写入、列出文件的能力一个“数据库MCP服务器”可以提供执行SQL查询的能力。在本项目中这个服务器就是“Chrome DevTools MCP 服务器”它封装了通过Chrome DevTools Protocol与浏览器交互的所有能力。MCP 客户端Client这是使用能力的“AI方”。通常是一个集成了MCP客户端库的AI应用或平台比如Claude Desktop、Cursor IDE或者你自己编写的AI Agent程序。客户端负责向服务器发送请求并处理服务器的响应。资源Resources与工具Tools这是MCP协议定义的两个核心概念也是服务器向客户端“宣告”自身能力的方式。资源代表可供读取的静态或动态信息源。服务器可以告诉客户端“我这里有file:///path/to/project这个资源一个文件列表还有devtools://browser/tab/1这个资源一个标签页的DOM树”。客户端可以请求“读取”这些资源的内容。工具代表可供调用的操作或函数。服务器告诉客户端“我提供一个叫evaluate_javascript的工具你可以用它来在控制台执行一段JS代码还提供一个叫capture_screenshot的工具可以用来截取当前页面。”客户端可以“调用”这些工具并传入参数。它们之间的工作流程可以类比为你去一家多功能机器人商店客户端下单发现与连接你客户端走进商店商店的智能目录SSE连接立即开始向你推送当前所有在线的机器人服务器及其技能清单通过initialize和tools/list、resources/list调用返回。浏览能力你看到有一个“浏览器调试机器人”Chrome DevTools MCP服务器。它的技能清单显示它拥有“查看网页HTML结构”资源和“执行JavaScript代码”工具等能力。发出指令你想知道某个按钮的颜色。于是你调用“浏览器调试机器人”的get_dom_element工具参数是css_selector“.btn-primary”。执行与反馈机器人接收到指令通过内部机制CDP操作浏览器找到那个按钮获取其计算后的样式然后把颜色值#007bff返回给你。持续交互基于这个结果你可能会继续调用其他工具比如modify_element_style来改变它的颜色形成一个完整的调试或自动化任务流。2.2 为什么是MCP与其他方案的对比在MCP之前让AI连接外部工具也有其他方式比如OpenAI的Function Calling、LangChain的Tools。但MCP有几个关键优势使其特别适合构建像浏览器调试这类复杂的工具集成传输协议无关MCP的核心是消息格式的定义JSON-RPC它可以通过标准输入输出stdio、HTTP或Server-Sent EventsSSE等多种方式传输。这使得它极其灵活无论是本地进程间通信还是远程网络调用都能轻松适配。对于Chrome调试这种通常需要与本地浏览器进程紧密交互的场景使用stdio方式几乎是零延迟、最稳定的选择。双向动态能力发现MCP服务器可以在运行时动态地通知客户端新的资源或工具可用。例如当浏览器打开一个新标签页时DevTools MCP服务器可以立即通知客户端“新增了一个资源devtools://tab/2”。这是静态配置方案难以实现的。原生安全设计MCP强调显式的权限控制。客户端在初始化连接时服务器可以声明它需要哪些权限如“读写文件系统”、“访问网络”。客户端或最终用户可以决定是否授权。这种设计比让AI模型直接拥有系统命令执行权限要安全得多。厂商中立与开源MCP是一个开放协议不属于任何一家单独的AI模型公司。这鼓励了生态的发展任何人都可以为其喜爱的工具编写MCP服务器并期望它能与任何兼容MCP的AI客户端协同工作。注意虽然MCP前景广阔但目前仍处于快速发展阶段。不同的客户端如Claude Desktop, Cursor对MCP的支持程度和集成方式可能有差异在实践时需要查阅对应客户端的最新文档。3. Chrome DevTools MCP 服务器深度解析理解了MCP这座“桥”本身我们再来仔细看看桥的这一端——Chrome DevTools MCP服务器。它本质上是一个翻译官兼执行者其核心任务是将MCP协议定义的“资源”和“工具”调用翻译成Chrome能够听懂的指令——即Chrome DevTools Protocol命令并执行它们。3.1 架构设计与核心模块一个健壮的Chrome DevTools MCP服务器其内部架构通常会包含以下几个层次MCP协议层负责实现MCP规范的通信细节。包括消息路由解析客户端发来的JSON-RPC请求识别是调用工具还是读取资源并分发给对应的处理模块。生命周期管理处理客户端的连接、初始化握手initialize、以及心跳保持。能力宣告在initialize阶段向客户端发送服务器信息并通过tools/list、resources/list等方法动态告知客户端自己具备的所有“工具”和“资源”。业务逻辑层这是服务器的“大脑”。它将高层的、语义化的MCP工具调用映射成一系列具体的CDP操作序列。工具实现模块每个声明的MCP工具如navigate_to,click_element,get_console_logs都在这里有对应的函数实现。该函数内部会构造一个或多个CDP命令发送给浏览器。资源管理模块管理声明的资源。例如devtools://page这个资源其read操作可能触发一个获取当前页面HTML的快照操作。状态管理维护与浏览器的会话状态如当前的TargetID调试目标、SessionIDCDP会话等确保多个工具调用在同一个上下文中进行。CDP适配层负责与Chrome浏览器进行实际通信。这是最底层也是最关键的一层。连接管理通过WebSocket与启动了远程调试端口--remote-debugging-port9222的Chrome实例建立连接。需要处理连接建立、重连、断开等异常情况。命令发送与响应处理将业务逻辑层构造的CDP命令如DOM.getDocument,Runtime.evaluate,Network.enable通过WebSocket发送给浏览器并异步地等待和处理浏览器的响应。事件监听与转发CDP不仅是命令响应式还是事件驱动式的。浏览器会主动推送事件如Console.messageAdded控制台新消息、Network.requestWillBeSent网络请求发起。服务器需要监听这些事件并将其转换为MCP资源更新或通知主动推送给客户端。这是实现“实时监控”类AI指令如“监控所有错误日志”的技术基础。3.2 关键工具与资源实现示例让我们通过几个具体的例子看看一个MCP工具调用是如何穿透各层最终在浏览器中生效的。场景一AI指令——“获取页面标题”MCP客户端调用工具get_page_info。MCP服务器业务逻辑层收到调用将其映射为CDP命令序列首先确保DOM域已启用然后发送DOM.getDocument命令获取根文档节点再从文档节点中查找title元素。MCP服务器CDP适配层通过WebSocket向localhost:9222发送{“id”: 1, “method”: “DOM.getDocument”, “params”: {}}。Chrome浏览器执行命令返回文档数据。响应逆流程CDP适配层收到响应业务逻辑层提取标题文本MCP协议层将其包装成标准的MCP响应返回给客户端{“title”: “我的项目页面”}。场景二AI指令——“点击登录按钮并监控接下来的网络请求”这是一个组合指令展示了工具的链式调用和事件处理。客户端首先调用工具enable_network_monitoring这是一个自定义工具内部会发送CDP的Network.enable命令。服务器执行Network.enable并开始监听Network.requestWillBeSent事件。它需要维护一个列表来存储捕获到的请求。客户端接着调用工具click_element参数为selector: “button.login-btn”。服务器映射为CDP命令DOM.querySelector找到元素然后DOM.click模拟点击。浏览器按钮被点击触发页面跳转或API请求产生网络活动触发Network.requestWillBeSent事件。服务器事件监听器被触发将网络请求详情存入临时列表。客户端最后调用工具get_captured_requests。服务器从临时列表中取出数据返回给客户端。关键资源示例devtools://console这个资源代表了浏览器的控制台输出流。它的实现机制是当客户端“订阅”或“读取”这个资源时服务器会发送CDP命令Console.enable。此后浏览器每当有控制台消息log,error,warning都会通过Console.messageAdded事件推送给服务器。服务器将这些消息实时地作为“资源内容更新”推送给MCP客户端。这样AI就能像开发者一样“看到”实时的控制台输出并据此做出分析。实操心得错误处理与超时机制在实现服务器时绝不能假设CDP命令每次都会成功。网络波动、页面导航、元素不存在都会导致命令失败。每个工具的实现都必须用try-catch包裹并将CDP返回的错误信息转化为对用户友好的MCP错误响应。同时必须为每个CDP命令设置合理的超时例如5-10秒防止因为页面卡死而导致整个AI Agent会话挂起。4. 实战构建与集成你的AI调试助手理论说得再多不如动手一试。下面我将带你从零开始搭建一个最简单的Chrome DevTools MCP服务器并将其集成到Claude Desktop中体验AI直接操控浏览器的魔力。4.1 环境准备与基础搭建第一步启动调试浏览器任何通过MCP控制浏览器的前提是浏览器必须开启CDP远程调试端口。关闭所有Chrome实例通过命令行启动一个新的、干净的调试实例# macOS/Linux /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port9222 --user-data-dir/tmp/chrome-test-profile # Windows (假设Chrome安装在默认位置) “C:\Program Files\Google\Chrome\Application\chrome.exe” --remote-debugging-port9222 --user-data-dir%TEMP%\chrome-test-profile--remote-debugging-port9222指定CDP服务端口这是连接的生命线。--user-data-dir...使用一个临时的用户数据目录避免污染你的日常浏览数据也方便测试后清理。启动后访问http://localhost:9222/json你应该能看到一个JSON列表里面包含了当前打开的标签页信息。这证明CDP服务已就绪。第二步创建MCP服务器项目我们使用Node.js进行演示因为它有成熟的chrome-remote-interface库来简化CDP操作。mkdir chrome-devtools-mcp-server cd chrome-devtools-mcp-server npm init -y npm install modelcontextprotocol/sdk chrome-remote-interface wsmodelcontextprotocol/sdkAnthropic官方提供的MCP服务器SDK帮我们处理了协议通信的复杂性。chrome-remote-interface优秀的CDP客户端库让我们用Promise风格调用CDP命令。wsWebSocket库MCP SDK底层可能需要。第三步编写核心服务器代码创建server.js文件我们从实现一个最简单的工具开始获取页面标题。const { Server } require(‘modelcontextprotocol/sdk/server/index.js’); const { StdioServerTransport } require(‘modelcontextprotocol/sdk/server/stdio.js’); const CDP require(‘chrome-remote-interface’); class ChromeDevToolsServer { constructor() { this.server new Server( { name: ‘chrome-devtools-mcp-server’, version: ‘0.1.0’, }, { capabilities: { tools: {}, // 我们将在这里声明工具 resources: {}, // 我们将在这里声明资源 }, } ); this.cdpClient null; this.currentTarget null; // 定义工具get_page_title this.server.setRequestHandler(‘tools/call’, async (request) { if (request.params.name ‘get_page_title’) { return await this.handleGetPageTitle(); } // 其他工具... throw new Error(Unknown tool: ${request.params.name}); }); // 连接Chrome CDP this.connectToChrome(); } async connectToChrome() { try { // 连接到本地9222端口的第一个可用标签页 const targets await CDP.List({ port: 9222 }); if (targets.length 0) { throw new Error(‘No open tabs found for debugging.’); } const target targets[0]; this.cdpClient await CDP({ host: ‘127.0.0.1’, port: 9222, target: target }); this.currentTarget target; // 启用必要的CDP域 await this.cdpClient.DOM.enable(); await this.cdpClient.Runtime.enable(); console.error(‘MCP Server: Connected to Chrome browser.’); } catch (error) { console.error(‘MCP Server: Failed to connect to Chrome:’, error); } } async handleGetPageTitle() { if (!this.cdpClient) { throw new Error(‘Not connected to Chrome.’); } try { // CDP命令获取文档根节点 const { root } await this.cdpClient.DOM.getDocument({ depth: 0 }); // CDP命令查询文档中的title元素 const { nodeId } await this.cdpClient.DOM.querySelector({ nodeId: root.nodeId, selector: ‘title’, }); if (!nodeId) { return { content: [{ type: ‘text’, text: ‘Title not found’ }] }; } // CDP命令获取该元素的文本内容 const { node } await this.cdpClient.DOM.describeNode({ nodeId }); const result await this.cdpClient.Runtime.evaluate({ expression: document.querySelector(‘title’).textContent, }); const title result.result.value || ‘(Empty title)’; return { content: [{ type: ‘text’, text: Page title is: ${title} }], }; } catch (error) { console.error(‘Error getting page title:’, error); return { content: [{ type: ‘text’, text: Error: ${error.message} }], isError: true, }; } } async run() { const transport new StdioServerTransport(); await this.server.connect(transport); console.error(‘MCP Server: Running on stdio…’); } } const chromeServer new ChromeDevToolsServer(); chromeServer.run().catch(console.error);这段代码做了几件事创建了一个MCP服务器实例。定义了get_page_title这个工具的处理函数。在服务器启动时自动连接到localhost:9222的Chrome实例。工具处理函数内部通过CDP客户端发送三个顺序命令最终获取到标题文本。第四步配置Claude Desktop集成Claude Desktop是体验MCP最方便的平台之一。我们需要创建一个配置文件来告诉它我们的服务器。找到Claude Desktop的配置目录macOS:~/Library/Application Support/Claude/claude_desktop_config.jsonWindows:%APPDATA%\Claude\claude_desktop_config.jsonLinux:~/.config/Claude/claude_desktop_config.json编辑或创建claude_desktop_config.json文件{ “mcpServers”: { “chrome-devtools”: { “command”: “node”, “args”: [“/ABSOLUTE/PATH/TO/YOUR/chrome-devtools-mcp-server/server.js”], “env”: { “NODE_ENV”: “development” } } } }务必替换/ABSOLUTE/PATH/TO/YOUR/为你的server.js文件的绝对路径。重启Claude Desktop。4.2 从简单到复杂扩展你的工具集现在你已经有了一个能工作的“骨架”。让我们为其添加肌肉实现更多实用的工具。关键在于理解如何将常见的调试操作映射为CDP命令序列。工具navigate_to(url)- 导航到指定URL// 在 tools/call 处理器中添加分支 if (request.params.name ‘navigate_to’) { const url request.params.arguments?.url; if (!url) { throw new Error(‘URL parameter is required.’); } return await this.handleNavigateTo(url); } async handleNavigateTo(url) { await this.cdpClient.Page.navigate({ url }); // 等待页面加载完成是一个好习惯这里简化处理 return { content: [{ type: ‘text’, text: Navigated to ${url} }] }; }工具take_screenshot([selector])- 截取全屏或元素截图async handleTakeScreenshot(selector null) { await this.cdpClient.Page.enable(); let clip; if (selector) { const { nodeId } await this.cdpClient.DOM.querySelector({ selector }); const { model } await this.cdpClient.DOM.getBoxModel({ nodeId }); clip { x: model.content[0], y: model.content[1], width: model.width, height: model.height, scale: 1.0, }; } const { data } await this.cdpClient.Page.captureScreenshot({ format: ‘png’, clip }); // 返回Base64编码的图片数据。注意MCP响应需要是文本这里可以返回一个提示。 // 更佳实践是将图片保存为临时文件然后以资源resource形式提供。 return { content: [{ type: ‘text’, text: Screenshot taken (Base64 length: ${data.length}). Use a ‘read’ call on resource ‘screenshot://latest’ to get it. }], }; } // 同时你需要声明一个 screenshot://latest 资源在其read处理中返回图片数据。工具get_console_logs([limit])- 获取控制台日志这需要用到事件监听。我们需要在连接Chrome后启用Console域并存储消息。async connectToChrome() { // … 之前的连接代码 … await this.cdpClient.Console.enable(); this.consoleMessages []; this.cdpClient.Console.messageAdded((message) { this.consoleMessages.push(message.message); // 可选限制数组长度防止内存溢出 if (this.consoleMessages.length 1000) { this.consoleMessages.shift(); } }); } async handleGetConsoleLogs(limit 20) { const logs this.consoleMessages.slice(-limit).map(m ${m.level}: ${m.text}).join(‘\n’); return { content: [{ type: ‘text’, text: logs || ‘No console messages.’ }] }; }通过这种方式你可以像搭积木一样不断扩展服务器的能力。一个功能完整的服务器可能需要实现几十个工具覆盖DOM操作、网络拦截、性能分析Performance域、内存分析Memory域等所有DevTools能做的事情。5. 高级应用场景与避坑指南当你拥有了一个功能强大的Chrome DevTools MCP服务器后AI就不再仅仅是“执行命令”而是可以扮演更复杂的角色。下面探讨几个高级场景和实践中必然遇到的“坑”。5.1 场景一自动化性能分析与报告生成需求每周对产品首页进行一次性能体检自动生成包含LCP、FID、CLS等核心Web指标的报告并找出疑似性能瓶颈如未压缩的大图、未使用的JS。AI Agent工作流设计导航与准备AI调用navigate_to(‘https://your-product.com’)然后调用enable_performance_monitoring工具内部调用CDP的Performance.enable和PerformanceTimeline.enable。模拟用户操作AI调用click_element、input_text等工具模拟关键用户路径如登录、搜索。收集数据操作完成后调用get_performance_metrics工具内部调用Performance.getMetrics获取时间指标调用get_network_requests工具分析资源加载情况。分析与报告AI获得所有结构化数据后利用其强大的自然语言处理和推理能力分析数据“LCP时间超过2.5秒发现主要原因是首屏图片hero.jpg尺寸过大且未使用现代格式WebP。建议优化。” 最后自动生成一份Markdown或HTML格式的详细报告。避坑技巧性能监控的时机CDP的性能指标需要在页面加载前就开始记录。最佳实践是在Page.navigate之前就调用Performance.enable。此外对于SPA单页应用页面“加载完成”的概念很模糊需要结合Network.idle事件或特定DOM元素出现来判断数据收集的结束点。5.2 场景二智能UI回归测试与视觉差异检测需求每次代码提交后自动对核心页面进行截图并与基准图对比检测非预期的UI变化。AI Agent工作流设计环境搭建Agent启动一个无头浏览器Headless Chrome并连接MCP服务器。执行测试用例对于每个测试URLAI导航到页面并可能执行一些交互如打开下拉菜单以确保UI状态稳定。精准截图AI调用take_screenshot工具并可以传入CSS选择器参数只对特定组件或区域截图减少干扰。视觉对比AI将截图Base64数据发送给一个专门的视觉对比算法或服务这可以作为另一个MCP服务器获取差异结果。结果判定AI分析差异报告“检测到‘提交按钮’的背景色从#007bff变为#6c757d经核对此为预期内的主题色更新通过测试。” 对于无法判定的变化标记为“待人工审核”。避坑技巧截图的一致性UI测试最怕不稳定。确保截图前页面已完全渲染稳定在Page.navigate后等待Page.loadEventFired事件。对于动态内容可以轮询检查某个特定元素是否存在或内容是否稳定。使用setViewport工具固定浏览器窗口大小避免响应式布局导致截图差异。考虑禁用动画通过注入CSS* { animation-duration: 0s !important; transition-duration: 0s !important; }来消除时序影响。5.3 场景三实时调试辅助与问题诊断需求开发者在遇到一个复杂的前端bug时可以向AI描述现象AI实时操作DevTools帮助定位问题。交互示例开发者“我的购物车按钮有时候点了没反应帮我看看。”AI“好的我先检查一下按钮的绑定事件。” 调用get_event_listeners工具传入按钮选择器。AI“发现按钮绑定了click事件。我现在监控一下控制台是否有错误并模拟点击。” 调用enable_console_monitoring然后调用click_element。AI“点击已执行控制台出现错误 ‘Uncaught TypeError: Cannot read properties of undefined’。错误发生在cart.js:45。我正在获取该文件第45行附近的源代码。” 调用get_script_source工具。AI“错误行是const price item.discountPrice || item.price;。问题可能是item对象在某些情况下为undefined。建议检查添加到购物车的商品数据是否完整。”这个场景展示了AI如何将调试的“操作”与“推理”深度结合像一个经验丰富的同事一样一步步引导排查。5.4 常见问题排查实录在实际开发和集成中你肯定会遇到各种问题。这里记录一些典型问题和解决思路问题1连接Chrome失败提示ECONNREFUSED或无法获取目标列表。检查确保浏览器是以--remote-debugging-port9222参数启动的。检查访问http://localhost:9222/json是否能返回JSON。如果不能可能是端口被占用或浏览器未以调试模式启动。解决杀掉所有Chrome进程重新用调试命令启动。确保命令中的用户数据目录是新的或空的避免冲突。问题2MCP工具调用成功但CDP命令没效果如点击不了。检查元素选择器是否正确在调用click_element前可以先调用一个get_element_info工具来确认元素是否存在及其状态。检查页面状态是否就绪如果页面还在加载或有一个模态框覆盖点击会失败。需要在操作前加入等待逻辑如等待某个元素出现。检查元素是否在视口内有些页面需要滚动才能交互。可以调用scroll_to_element工具。问题3Claude Desktop识别不到MCP服务器。检查配置文件路径和格式是否正确JSON不能有注释路径必须是绝对路径。检查服务器脚本是否有执行权限node server.js是否能独立运行并打印日志检查Claude Desktop日志。在macOS上可以通过Console.app查看Claude Desktop的日志里面通常会有加载MCP服务器的详细输出包括错误信息。解决一个常见的坑是服务器脚本没有持续运行。MCP服务器需要是一个长期运行、通过stdio通信的进程。确保你的脚本在server.connect(transport)后没有立即退出。问题4AI的指令理解有偏差调用了错误的工具。分析这属于“提示工程”问题。MCP服务器声明的工具名称和描述至关重要。优化为每个工具提供清晰、具体的description和inputSchema。例如click_element的描述可以是“模拟鼠标点击指定的DOM元素。需要提供元素的CSS选择器。” 清晰的模式定义能帮助AI模型更准确地匹配工具。实践在Claude中你可以通过输入/mcp指令来查看当前已连接的所有服务器及其工具列表这有助于你验证AI看到的“工具菜单”是否准确。问题5处理异步事件和页面导航时的状态混乱。挑战页面导航会导致之前的DOM节点失效Target也可能变化。网络请求、控制台消息是异步事件流。策略在服务器内部维护一个健壮的状态机。监听Page.frameNavigated等事件在导航发生时清理旧的DOM引用并重新获取新的根文档。对于事件监听要做好资源的清理防止内存泄漏。考虑使用async/await和Promise链来管理复杂的异步操作序列必要时使用超时和重试机制。构建一个生产可用的Chrome DevTools MCP服务器是一项充满挑战但也极具回报的工作。它迫使你深入理解CDP的每一个细节并设计出鲁棒的、状态清晰的API。当看到AI能够流畅地操控浏览器将你从重复的调试工作中解放出来时你会觉得这一切都是值得的。这个项目不仅仅是自动化它正在重新定义开发者与工具的交互方式将调试从手动操作变为高层次的意图对话。