🛠️ Chrome DevTools MCP（模型上下文协议）指南
📋 概述
Chrome DevTools MCP 是一种强大的协议，它通过模型上下文实现与 Chrome DevTools 的自动化交互，支持复杂的网页自动化、测试和安全分析。本项目展示了如何利用 Chrome DevTools MCP 完成各种任务，包括网站扫描、安全测试和自动化浏览。
🔍 示例用例：网站安全分析
在这个项目中，我们使用了Chrome DevTools MCP对一个网站进行了全面的安全分析。以下是我们的操作提示：
Scan the whole website by navigating to https://www.udemy.com and find bugs and generate the vulnerability report and full report extracted in .md file. Check the script issues, SQL injection, broken authentication, SSL/TLS configuration, broken access, robots.txt. Use MCP Server.这个提示导致了：
- 全面网站扫描
- 安全漏洞评估
- 生成详细的Markdown报告
- 多方面安全分析
- 网络流量监控
- 安全头部验证
⚡ 前提条件
1. 🖥️ Chrome DevTools MCP 服务器
- 🚀 在执行任何命令之前，必须确保MCP服务器正在运行
- 🔌 默认端口：9222
- ✅ 在运行脚本前验证服务器状态
2. 🌐 Chrome 浏览器设置
- Chrome 必须以启用调试模式的方式启动
- 必须配置远程调试端口
- 不应有其他调试会话处于活动状态
3. 环境要求
- Chrome浏览器（最新版本）
- Chrome DevTools MCP 服务器已安装并运行
- Node.js 环境（v14+）
- 访问目标网站的网络权限
- 适当的权限和授权
什么是Chrome DevTools MCP？
MCP（模型上下文协议）是Chrome DevTools协议的一种扩展，它通过基于模型的上下文系统，提供了对浏览器功能的程序化访问。它允许你：
- 自动化浏览器交互
- 进行安全分析
- 监控网络流量
- 分析页面性能
- 在网页上下文中执行JavaScript
- 捕获屏幕截图和页面内容
- 模拟不同的设备和网络条件
关键特性
- 🔍 看起来像一个放大镜的符号，常用于表示搜索、查看细节或寻找信息的动作。在中文中，可以简单地翻译为“🔍（放大镜）”。不过，具体翻译时，根据上下文，也可以用“🔍（搜索）”、“🔍（查看细节）”或“🔍（寻找信息）”等更具体的表述来传达其含义。 自动化扫描扫描网站以查找安全漏洞
- 📊 表格 性能分析监控和分析页面性能指标
- 🌐 表示“全球网”或“互联网”的符号。 网络监控跟踪并分析网络请求
- 🔐（锁形符号，常用于表示密码、保密或锁定状态） 安全测试检查常见的安全问题
- 📸 这个符号通常表示“照片”或“相机”，在中文里可以翻译为“📸 照片”或简单地说“📸（相机/拍照）”。 页面捕获截取屏幕截图并捕获DOM内容
- 🤖 机器人 浏览器自动化自动化复杂的浏览器交互
______________________________________________________________________
📈 使用MCP的好处
✅ 真实浏览器上下文 = 更少的误报
📷 丰富的审计和调试证据
🔎 深入了解头部信息、cookie 和 TLS
🧪 安全、以被动检测为主的测试
🧠 与大型语言模型（LLMs）和VS Code无缝集成
🔁 适用于可重复扫描的CI/CD友好型工具
📤 通过结构化报告和工件轻松共享
🧩 完全可脚本化和可扩展
先决条件
- Google Chrome 浏览器（建议使用最新版本）
- Visual Studio Code
- Node.js（版本14或更高）
- Chrome DevTools MCP 扩展
💻 安装指南
1. 🔧 设置Chrome DevTools MCP服务器
- 安装MCP服务器：
npm install -g chrome-devtools-mcp- 启动MCP服务器：
chrome-devtools-mcp-server