使用 VS Code 和 Chrome DevTools MCP 实现浏览器自动化

通过 VS Code 结合 Chrome DevTools 的 Mobile Companion Protocol (MCP)，可以实现高效的浏览器自动化调试和测试。以下为具体实现方法和关键步骤。

安装必要工具

确保已安装最新版 VS Code 和 Chrome/Chromium 浏览器。VS Code 扩展中搜索并安装 Debugger for Chrome 或 Remote Debug 插件，用于连接 Chrome DevTools。

推荐使用 Chrome 的 Headless 模式 或 远程调试端口 启动浏览器，例如：

chrome.exe --remote-debugging-port=9222 --user-data-dir="C:\temp\chrome_profile"

配置 VS Code 调试环境

在 VS Code 中创建 launch.json 调试配置文件，添加 Chrome DevTools 连接配置：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "attach",
      "name": "Attach to Chrome",
      "port": 9222,
      "url": "http://localhost:*",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

通过 MCP 控制浏览器

Chrome DevTools 的 MCP 协议 允许通过 WebSocket 与浏览器实例交互。使用 Node.js 库如 chrome-remote-interface 发送命令：

const CDP = require('chrome-remote-interface');

async function automateBrowser() {
  const client = await CDP({ port: 9222 });
  const { Page, Runtime } = client;
  
  await Page.enable();
  await Page.navigate({ url: 'https://example.com' });
  await Runtime.evaluate({ expression: 'console.log("Automation complete")' });
  
  await client.close();
}

automateBrowser();

实现自动化测试

结合 Puppeteer 或 Selenium 增强自动化能力，例如截屏或表单填写：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.connect({
    browserURL: 'http://localhost:9222',
  });
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({ path: 'screenshot.png' });
})();

调试与断点设置

在 VS Code 中直接设置断点，通过 Debug Console 执行脚本或调用 DevTools API。使用 Runtime.evaluate 动态修改页面元素：

await Runtime.evaluate({
  expression: 'document.querySelector("button").click()'
});

最佳实践

• 复用浏览器实例以减少启动开销。
• 通过 Page.setDownloadBehavior 管理文件下载路径。
• 使用 Network 和 Performance 模块监控页面加载性能。

通过上述方法，VS Code 与 Chrome DevTools MCP 的协同可实现高效的浏览器自动化工作流，适用于调试、爬虫和端到端测试等场景。