冠军资讯
Debug侠最近在 Windows 环境下使用 Chrome DevTools MCP (Mobile Content Proxy) 调试移动端页面，遇到了不少坑。特别是在网络环境复杂的企业内网，安装和配置过程可谓一步一雷。本文旨在分享我的实战经验，帮助大家避开这些常见的陷阱。
什么是 Chrome DevTools MCP？
Chrome DevTools MCP 允许我们将 Chrome DevTools 连接到移动设备，从而调试移动设备上运行的 Web 应用。它本质上是一个中间代理，拦截移动设备和服务器之间的 HTTP(S) 请求，并将它们转发到 Chrome DevTools 进行检查和修改。这对于调试移动端 H5 页面、小程序以及 Hybrid App 非常有用。
准备工作：环境配置
Node.js 和 npm: 确保你的 Windows 系统上安装了 Node.js 和 npm。建议使用 LTS 版本，例如 Node.js 16 或 18。可以通过
node -v和npm -v命令验证安装是否成功。Chrome 浏览器: 必须安装最新版本的 Chrome 浏览器，并且版本要高于移动端 WebView 的版本，否则可能出现兼容性问题。
ADB (Android Debug Bridge): 如果你调试的是 Android 设备，需要安装 ADB 工具。可以从 Android SDK Platform-Tools 下载，并将其添加到系统环境变量
Path中。
# 验证 ADB 安装是否成功 adb versionJDK (Java Development Kit): 调试 Android 设备时, 一些 DevTools 工具可能依赖 JDK，建议安装 JDK 8 或更高版本。并配置
JAVA_HOME环境变量。
安装 MCP
可以使用 npm 全局安装 Chrome DevTools MCP：
npm install -g chrome-devtools-frontend
安装完成后，可以通过以下命令启动 MCP：
chrome-devtools-frontend --port=9222
这里指定了 MCP 监听的端口为 9222。你可以根据自己的需要修改端口号。
配置代理
接下来，需要在移动设备上配置 HTTP 代理，将所有 HTTP(S) 请求转发到 MCP 服务器。Android 设备可以在 Wi-Fi 设置中配置代理服务器的 IP 地址和端口号。iOS 设备则需要在 Wi-Fi 设置的高级选项中配置 HTTP 代理。
注意： 如果你的 Windows 系统启用了防火墙，需要允许 MCP 进程通过防火墙，否则移动设备无法连接到 MCP 服务器。
解决 “ERR_CERT_AUTHORITY_INVALID” 问题
使用 HTTPS 代理时，可能会遇到 ERR_CERT_AUTHORITY_INVALID 错误，这是因为 MCP 使用的是自签名证书。要解决这个问题，需要将 MCP 的证书添加到移动设备的信任列表中。
生成自签名证书: MCP 会自动生成一个自签名证书，位于
~/.config/chrome-devtools-frontend/目录下，文件名为devtools_frontend_ssl.pem。
将证书导入到移动设备: 可以通过邮件、网盘等方式将证书文件发送到移动设备，然后在系统设置中安装证书。
- Android: 在“设置” -> “安全” -> “从 SD 卡安装证书” 中选择证书文件进行安装。
- iOS: 通过 Safari 浏览器访问证书文件，系统会提示你安装证书。
重启设备: 安装证书后，建议重启设备，以确保证书生效。
实战避坑经验
端口冲突: 确保 MCP 监听的端口没有被其他程序占用。可以使用
netstat -ano命令查看端口占用情况。代理设置错误: 仔细检查移动设备上的代理设置，确保 IP 地址和端口号与 MCP 服务器的配置一致。
证书问题: 如果遇到证书问题，请仔细阅读 MCP 的文档，了解如何生成和安装证书。可以使用 Chrome 的
chrome://net-internals/#hsts工具来清除 HSTS 设置，避免 HTTPS 强制跳转。Nginx 反向代理 (可选)：如果需要长期稳定使用 MCP，可以考虑使用 Nginx 做反向代理。例如，将 MCP 服务代理到
mcp.example.com域名，并配置 SSL 证书，避免自签名证书带来的麻烦。Nginx 配置的关键在于正确配置proxy_pass指令和 SSL 证书。
server {
listen 443 ssl;
server_name mcp.example.com;
ssl_certificate /path/to/your/certificate.pem; # 你的 SSL 证书
ssl_certificate_key /path/to/your/private.key; # 你的 SSL 私钥
location / {
proxy_pass http://localhost:9222; # MCP 服务的地址
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}
- 企业内网环境: 在企业内网中，可能会受到防火墙、代理服务器等限制。需要与网络管理员沟通，确保 MCP 能够正常工作。特别要注意 HTTP 代理和 HTTPS 代理的配置，以及域名解析的问题。
总结
在 Windows 环境下安装和配置 Chrome DevTools MCP 确实有一些坑，但只要仔细阅读文档，并根据实际情况进行调整，就能成功搭建起一个高效的移动端调试环境。希望本文能帮助大家避开这些常见的陷阱，提高开发效率。
