谷歌浏览器（Chrome）连接手机进行网页调试是前端开发中非常实用的功能，主要使用 Chrome DevTools 的远程调试 功能。以下是详细的步骤和说明

准备工作

1. 一台电脑（Windows、macOS 或 Linux），安装最新版 Chrome 浏览器。
2. 一部安卓手机（Android 4.4+ 版本，建议 Android 8.0+）。
3. USB 数据线（建议使用原装线，确保传输稳定）。
4. 需要调试的网页 已在手机 Chrome 浏览器中打开。

手机端设置（以 Android 为例）

1. 开启开发者选项：

   

   进入手机【设置】→【关于手机】→连续点击【版本号】7 次，直到提示“您已处于开发者模式”。

2. 开启 USB 调试：

   • 返回【设置】→【系统】→【开发者选项】→打开【USB 调试】。
   • 部分手机需额外打开【USB 安装】或【USB 调试（安全设置）】。

3. 连接电脑：

   • 用 USB 数据线连接手机和电脑。
   • 手机端会弹出“是否允许 USB 调试？”的提示，勾选【始终允许】后点击【确定】。

电脑端 Chrome 设置

1. 打开 Chrome 开发者工具：

   • 在电脑 Chrome 地址栏输入 chrome://inspect 或 chrome://devtools。
   • 确保 Discover USB devices 选项已开启。

2. 检测设备：

   • 连接成功后,页面会显示已连接的设备名称，下方列出手机 Chrome 中打开的网页或 WebView。
   • 若未显示,点击 “Port forwarding” 并尝试添加端口 9222，或检查 USB 连接。

3. 开始调试：

   • 点击对应网页下方的 【inspect】，会弹出一个独立的 DevTools 窗口。
   • 此时可实时查看/修改手机页面的 HTML、CSS，调试 JavaScript，监控网络请求等。

无线调试（无需 USB，Android 11+）

1. 手机端：

   • 进入【开发者选项】→找到【无线调试】并开启。
   • 点击【使用配对码配对】，记下配对码和端口号（如 168.xxx.xxx:XXXXX）。

2. 电脑端 Chrome：

   • 在 chrome://inspect 页面点击 【Configure…】。
   • 添加手机的 IP 和端口（格式 168.xxx.xxx:XXXXX），点击 【Done】。
   • 刷新后即可无线调试。

常见问题

1. 设备未检测到：

   • 检查 USB 线是否支持数据传输。
   • 重新插拔 USB，并重启手机/电脑的 Chrome。
   • 安装手机品牌对应的 USB 驱动（如小米、华为需单独安装）。

2. 【inspect】按钮灰色：

   • 关闭手机 Chrome，重新打开需要调试的页面。
   • 在手机 Chrome 中访问 chrome://flags，搜索并启用 “Developer Tools” 相关选项。

3. 跨平台兼容：

   • iOS 设备 需使用 Safari 的 Web Inspector（通过 macOS 的 Safari 连接）。
   • 华为手机 可能需要关闭“仅充电”模式，切换为“传输文件”。

进阶功能

• 屏幕镜像：在 DevTools 中点击 【Toggle screencast】（左上角手机图标），可将手机屏幕实时投影到电脑。
• 模拟传感器：可模拟地理定位、加速度计等。
• Throttling 功能：模拟弱网环境（如 3G/4G）。

通过以上步骤,你可以高效地在真实移动设备上调试网页，确保用户体验和兼容性。

标签： Chrome DevTools 远程调试