DevTools协议服务器

基于Node.js实现的Chrome DevTools Model Context Protocol服务器,用于浏览器调试工具协议通信。

  • by c2213821352
  • HTML
  • 本地部署
  • 更新于
在 GitHub 查看 c2213821352/devfest-workshop-mcp

使用说明

Chrome DevTools MCP 服务器

这是一个基于 Node.js 的 Chrome DevTools Model Context Protocol (MCP) 服务器实现。

安装

  1. 确保您已安装 Node.js
  2. 在项目目录中运行:
    npm install
    

运行服务器

执行以下命令启动服务器:

npm start

服务器将在 9229 端口启动。

连接到服务器

  1. 在 Chrome 浏览器中打开 DevTools
  2. 按 F1 打开设置
  3. 在 Experiments 部分启用 "Protocol Monitor"
  4. 使用 Chrome DevTools Protocol 连接到 ws://localhost:9229

VS Code 配置

  1. 已安装必要的 VS Code 扩展:

    • JavaScript Debugger Companion
    • Chrome DevTools
  2. 使用 VS Code 的调试功能可以直接连接到运行中的服务器。

本仓库还包含一个用于记录本次 Workshop 的静态站点,位于 site/ 目录。

本地预览静态站点:

npm run serve
# 打开 http://localhost:8080

网站结构:

  • site/index.html — 活动首页
  • site/gdg.html — 介绍 GDG / DevFest
  • site/mcp.html — 介绍 DevTools MCP
  • site/about.html — 关于参加者(常乐祺)

如需部署到 GitHub Pages,可将 site/ 目录的内容推送到 gh-pages 分支或使用 GitHub Actions 自动部署。