我来详细为你介绍 Chrome 浏览器连接手机进行网页调试的完整方法

准备工作（两种方式都需要）

手机端设置

1. 开启开发者选项

   

   • 进入「设置」→「关于手机」
   • 连续点击「版本号」7次（会提示已开启开发者选项）

2. 启用 USB 调试

   • 返回设置,找到「开发者选项」
   • 开启「USB调试」开关
   • （可选）开启「USB安装」和「USB调试（安全设置）」

两种连接方式

flowchart TD
    A[开始调试] --> B{选择连接方式}
    B --> C[USB连接]
    B --> D[无线连接]
    C --> C1[用USB线连接手机和电脑]
    C1 --> C2[手机上允许USB调试]
    C2 --> C3[Chrome访问<br>chrome://inspect]
    C3 --> E[开始调试]
    D --> D1[用USB线完成初始配对]
    D1 --> D2[启用无线调试]
    D2 --> D3[断开USB线<br>通过Wi-Fi连接]
    D3 --> E

USB 连接（推荐新手）

步骤：

1. 用数据线连接手机和电脑
2. 手机上选择「传输文件」模式
3. 手机上会弹出「是否允许USB调试」→ 点击确定
4. 电脑打开 Chrome，地址栏输入：chrome://inspect#devices
5. 确保「Discover USB devices」已开启
6. 手机打开要调试的网页
7. 电脑 Chrome 上会出现设备列表，点击「inspect」即可调试

无线连接（ADB调试）

步骤：

1. 首次需要 USB 连接进行配对：

   adb devices  # 查看设备是否识别
   adb tcpip 5555  # 设置端口

2. 查看手机 IP 地址：

   进入手机「设置」→「WLAN」→ 点击当前网络查看 IP

3. 无线连接：

   adb connect 手机IP:5555
   # adb connect 192.168.1.100:5555

4. 拔掉 USB 线，在 Chrome 中访问 chrome://inspect 即可无线调试

调试功能详解

连接成功后,你可以使用：

• 元素检查：查看/修改 DOM 和 CSS
• 控制台：查看日志、执行 JavaScript
• 网络监控：分析请求和性能
• 设备模拟：模拟不同屏幕尺寸和触摸事件
• 远程调试：实时修改页面并查看效果

常见问题解决

实用技巧

1. 书签调试工具：将 chrome://inspect 保存为书签
2. 端口修改：如端口被占用，可改用其他端口（如5556）
3. 多设备管理：给设备命名便于区分：adb -s 设备ID shell setprop persist.adb.device_name "设备名"
4. 快捷键：F12打开开发者工具，Ctrl+Shift+M切换设备模式

安全提示

• 仅在受信任的电脑开启 USB 调试
• 公共场合使用后记得关闭调试模式
• 无线调试后及时断开连接：adb disconnect

按照这些步骤,你就能顺利连接手机进行网页调试了，哪个环节遇到问题可以具体问我！

标签： Chrome浏览器 手机调试