AI导哈

浏览器调试工具集成

一个为AI代理添加浏览器调试能力的集成设置仓库，支持多种AI开发环境。

  • by garyohosu
  • Shell
  • 本地部署
  • 1 星标
  • 更新于
在 GitHub 查看 garyohosu/hantani-mcp-setup

使用说明

🚀 汉塔尼mcp设置

AI将浏览器调试能力添加到代理的集成设置存储库

Chrome DevTools MCP各种各样AI这是一个可以轻松设置到开发环境（Cline、Cursor、Gemini CLI、Genspark、Claude Desktop）的存储库。

📚 目次

🎯 Chrome DevTools MCP什么是？

Chrome DevTools MCP单击功能区上Google Chrome DevTools团队开发的模型上下文协议（MCP） 服务器。

AI赋予代理（Cursor、Cline、Gemini CLI、Genspark等）以下能力：

  • 🔍 监视网络请求 - HTTP流量分析API确定错误
  • 🐛 获取控制台日志 - JavaScript自动分析错误
  • 📊 性能分析 -测量页面读取速度和内存使用情况
  • 🎨 DOM/CSS検查 -检查元素，分析样式
  • 🍪 存储访问 - Cookie、localStorage、sessionStorageの操作
  • ⚡ JavaScript実行 -在浏览器上下文中运行代码

⚡ 快速启动

# リポジトリをクローン
git clone https://github.com/garyohosu/hantani-mcp-setup.git
cd hantani-mcp-setup

# ワンコマンドでセットアップ
./scripts/install-all.sh

# セットアップ確認
./scripts/verify-setup.sh

🖥️ 对应环境

｜环境｜对应状况｜设置文件｜ |------|---------|-------------| | Cline (VS Code扩张） | ✅ | chrome-devtools/config-cline.json | | 光标IDE | ✅ | chrome-devtools/config-cursor.json | | Gemini CLI | ✅ | chrome-devtools/config-gemini-cli.json | | 重启 | ✅ | chrome-devtools/config-genspark.json | | 克劳德桌面 | ✅ | chrome-devtools/config-claude-desktop.json |

📦 设置方法

前提条件

  • Node.js 18以上
  • Python 3.10以上（本地安装方式时）
  • Git

方法1:自动设置（推荐）

# リポジトリをクローン
git clone https://github.com/garyohosu/hantani-mcp-setup.git
cd hantani-mcp-setup

# 全環境に自動セットアップ
./scripts/install-all.sh

# 特定の環境のみセットアップ
./chrome-devtools/setup.sh cline      # Clineのみ
./chrome-devtools/setup.sh cursor     # Cursorのみ
./chrome-devtools/setup.sh gemini     # Gemini CLIのみ
./chrome-devtools/setup.sh genspark   # Gensparkのみ
./chrome-devtools/setup.sh claude     # Claude Desktopのみ

方法2:手动设置

有关每个环境的详细设置步骤，请参阅：

🎮 用法

基本用法

设置后AI您可以指示代理：

「localhost:3000を開いてネットワークエラーを調べて」
→ AIが自動でChromeを起動、接続、分析

「このページのパフォーマンスボトルネックを特定して」
→ AIがパフォーマンスメトリクスを解析

「コンソールエラーをまとめて原因を教えて」
→ AIがエラーログを分析、解決策を提案

常用命令

// Chromeを起動してアプリに接続
start_chrome_and_connect("localhost:3000")

// ネットワークリクエストを取得
get_network_requests()

// 失敗したAPIコールを特定
get_network_requests(filter_status=500)

// コンソールエラーのサマリー
get_console_error_summary()

// リアルタイムでコンソールを監視
monitor_console_live(10)

// パフォーマンスメトリクスを取得
get_performance_metrics()

// JavaScriptオブジェクトを検査
inspect_console_object("window.myApp")

🔧 故障排除

安装和使用时的问题 故障排除指南 来修改标记元素的显示属性。

常见问题

  • MCP未显示服务器 →确认配置文件的路径，编辑器/IDE重新启动
  • Chrome挂牵 →确认端口9222是否正在使用
  • "Module not found"错误 → npm install或uv sync执行

💡 用例

实践用例 使用案例.md 中所述的工具，调整墙的布局和几何形状

🌟 特徴

1. 复数环境对应

在一个存储库中Cline、Cursor、Gemini CLI、Genspark、Claude Desktop全部对应。

2. 单指令设置

自动化复杂的设置。初学者也可以5分钟导入。

3. 完整的日文文档

所有文档均使用日语提供（包括英文版）。

4. 实践范例

实际开发场景中可以使用的用例和示例代码。

5. 环境持久化

dotfiles中所述修改相应参数的值。PC迁移时也很容易恢复。

📖 详细文档

🤝 貢献

普鲁特，欢迎反馈！

  1. 分叉此存储库
  2. 创建特征分支（git checkout -b feature/amazing-feature)
  3. 提交更改（git commit -m 'Add amazing feature')
  4. 推到分支（git push origin feature/amazing-feature)
  5. 创建拉式请求

📝 许可证

MIT License - 详情 许可证 的双曲正切值

🙏 谢辞

📮 联系我们

  • 作者编号：
  • 笔记: [https://note.com/hantani]
  • X（推特）：[@garyo]
  • GitHub：[@garyohosu]

🔗 相关链接

⭐ 如果这个资料库有用的话，请给我明星！

🐱 Created with ❤️ by hantani - AI时代の创作技术研究者

相关 MCP