🚀 汉塔尼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 中所述的工具，调整墙的布局和几何形状
- React调试应用程序
- 性能分析和优化
- 诊断认证会话问题
- CSS样式故障排除
🌟 特徴
1. 复数环境对应
在一个存储库中Cline、Cursor、Gemini CLI、Genspark、Claude Desktop全部对应。
2. 单指令设置
自动化复杂的设置。初学者也可以5分钟导入。
3. 完整的日文文档
所有文档均使用日语提供（包括英文版）。
4. 实践范例
实际开发场景中可以使用的用例和示例代码。
5. 环境持久化
dotfiles中所述修改相应参数的值。PC迁移时也很容易恢复。
📖 详细文档
🤝 貢献
普鲁特，欢迎反馈！
- 分叉此存储库
- 创建特征分支（
git checkout -b feature/amazing-feature) - 提交更改（
git commit -m 'Add amazing feature') - 推到分支（
git push origin feature/amazing-feature) - 创建拉式请求
📝 许可证
MIT License - 详情 许可证 的双曲正切值
🙏 谢辞
- Chrome开发工具MCP - Google Chrome DevTools团队
- 模型上下文协议 -人类学
📮 联系我们
- 作者编号：
- 笔记: \[https://note.com/hantani\]
- X（推特）：\[@garyo\]
- GitHub：\[@garyohosu\]
🔗 相关链接
______________________________________________________________________
⭐ 如果这个资料库有用的话，请给我明星！
🐱 Created with ❤️ by hantani - AI时代の创作技术研究者