1. 启用Chrome远程调试功能
- 打开电脑版Chrome浏览器，点击右上角三个点→“设置”→在左侧菜单选择“隐私与安全”→找到“开发者工具”选项，勾选“启用远程调试”。
- 或通过命令行启动Chrome（关闭所有浏览器窗口后），输入命令`chrome.exe --remote-debugging-port=9222`（Windows）或对应路径命令（Mac），手动指定调试端口。
2. 连接手机与电脑
- Android设备：
- 使用USB线连接手机与电脑，确保手机开启“USB调试”模式（不同品牌设置路径略有差异，通常在“开发者选项”中）。
- 手机上需安装最新版Chrome浏览器，并打开任意网页。
- iOS设备（仅限Windows系统）：
- 电脑需安装iTunes软件，并通过数据线连接iPhone。
- 进入手机“设置”→“Safari”→“高级”→开启“Web检查器”。
- 下载并运行`ios_webkit_debug_proxy`代理工具（需根据系统位数选择32/64位版本），命令示例：`ios_webkit_debug_proxy -f chrome-devtools://devtools/bundled/inspector.`。
3. 访问远程调试页面
- 在电脑Chrome地址栏输入`chrome://inspect`，打开设备监视页面。
- 若已连接Android设备，页面会显示设备名称及正在浏览的网页标签，点击对应条目的“inspect”按钮即可打开调试面板。
- iOS设备需确保代理工具正常运行，并在监视页面刷新后出现设备信息，点击“inspect”后可能需等待数秒加载调试界面。
4. 调试手机网页
- 调试面板与电脑版DevTools操作一致，可查看元素（Elements）、网络请求（Network）、控制台日志（Console）等。
- 若需修改页面内容，可在“Console”输入JS代码实时执行，或在“Sources”面板设置断点调试脚本。
- 安卓设备支持直接输入URL并点击“Open”加载新页面，iOS设备需手动在Safari中打开目标网页。
5. 无线调试（可选）
- 手机与电脑连接同一Wi-Fi网络，进入手机“开发者选项”→启用“无线调试”。
- 在电脑监视页面输入手机生成的IP地址和端口号（如`192.168.1.100:8888`），即可远程调试无需USB连接的网页。
