1.先用USB连接一次

谷歌浏览器的远程调试功能非常强大，主要分为两大场景：调试移动设备网页 和 远程调试桌面浏览器。

以下是详细的操作指南：

调试安卓设备上的网页（最常用）

这是最常见的使用场景,可以在电脑上直接调试手机浏览器中打开的页面。

准备工作

1. 在安卓设备上：

   • 打开“开发者选项”（通常在“设置 > 关于手机”中连点7次“版本号”）
   • 启用“USB调试”
   • 使用USB数据线连接手机和电脑

2. 在电脑上：

   • 确保已安装 Chrome浏览器
   • 建议安装 ADB工具（可选,但推荐）

操作步骤

1. 在电脑Chrome中访问：chrome://inspect/#devices
2. 确保“Discover USB devices”已勾选
3. 手机首次连接时，需在手机上授权USB调试
4. 在手机Chrome中打开要调试的网页
5. 电脑页面会显示已连接的设备和打开的网页，点击“inspect”即可打开DevTools

无需USB的无线调试：

# 2. 启用无线调试
adb tcpip 5555
# 3. 断开USB，通过WiFi连接（替换为设备IP）
adb connect 192.168.1.100:5555

远程调试桌面版Chrome（Chrome DevTools Protocol）

适用于调试远程服务器、虚拟机或另一台电脑上的Chrome。

启动远程调试模式

在需要被调试的机器上启动Chrome：

# Windows
chrome.exe --remote-debugging-port=9222
# macOS
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
# Linux
google-chrome --remote-debugging-port=9222

连接方法

1. 在同一台机器上调试：

   • 直接访问 http://localhost:9222
   • 会看到可调试的页面列表

2. 从另一台电脑连接：

   # 在远程机器上启动（允许外部连接）
   chrome --remote-debugging-port=9222 --remote-allow-origins=*
   # 在本地机器通过浏览器访问
   http://[远程IP]:9222

使用Node.js进行程序化调试

const CDP = require('chrome-remote-interface');
async function example() {
    let client;
    try {
        client = await CDP({port: 9222});
        const {Page, Runtime} = client;
        await Page.enable();
        const result = await Runtime.evaluate({expression: 'document.title'});
        console.log('页面标题:', result.result.value);
    } catch (err) {
        console.error(err);
    } finally {
        if (client) await client.close();
    }
}

安全注意事项

1. 仅限信任网络：远程调试端口不应暴露在公网
2. 使用完毕后关闭：调试结束及时关闭远程调试功能
3. 考虑认证：生产环境可使用--remote-debugging-pipe更安全

常见问题解决

扩展工具推荐

1. VS Code：内置Chrome调试器（安装“Debugger for Chrome”扩展）
2. BrowserStack：云端真机远程调试
3. Chrome DevTools App：独立的调试工具

选择哪种方式取决于你的具体需求：移动端开发首选USB/WiFi调试，远程服务器调试使用CDP协议，自动化测试结合Puppeteer等工具。

需要更具体的哪个场景的帮助吗？