WiFi调试终极指南解决连接问题的实用技巧与深度分析

WiFi调试的坑，我终于爬出来了

最近在开发一个移动端项目的时候，遇到个烦人的事——手机上的页面调试。平时用USB连接Chrome DevTools倒是挺顺手，但这次因为一些特殊原因，USB被占用了，只能靠WiFi来调试。本来以为挺简单的，结果折腾了大半天才搞定。

说起来，一开始我还挺天真的，觉得WiFi调试无非就是连个网络的事儿，谁知道踩了一堆坑。这里就记录一下我的解决过程吧，顺便提醒大家别再掉进这些坑里。

直接上解决方案：核心代码就这么几行

先说结论吧，最终解决问题的方法其实并不复杂，关键在于几个配置和步骤：

// 确保手机和电脑在同一个局域网内
const getLocalIP = () => {
  const interfaces = require('os').networkInterfaces();
  for (let devName in interfaces) {
    const iface = interfaces[devName];
    for (let i = 0; i < iface.length; i++) {
      const alias = iface[i];
      if (alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal) {
        return alias.address;
      }
    }
  }
};

const localIP = getLocalIP();
console.log(你的局域网IP地址是：${localIP});

上面这段代码是用来获取当前电脑在局域网中的IP地址的，这一步很重要。接着，在Chrome浏览器中打开DevTools（快捷键F12），进入设置页面（右上角三个点 -> 设置），找到“Devices”部分，启用远程调试功能。

然后，在手机上打开Chrome浏览器，输入以下地址：

chrome://inspect/#devices

你会发现页面会列出所有可调试的设备，点击对应的设备名称，就可以开始调试了。

当然，前提是你得确保手机和电脑在同一个WiFi网络下，并且防火墙允许相关端口通信。

这里我踩了个坑：局域网IP不对

最开始的时候，我一直用的是localhost或者127.0.0.1这样的地址，结果发现根本连不上。后来才发现，手机和电脑虽然是同一个WiFi，但它们的本地回环地址是不通的。

折腾了半天后，我才意识到需要使用局域网内的实际IP地址，比如192.168.x.x这种格式。于是写了前面那段获取IP地址的代码。

还有一个细节需要注意，有些路由器会分配两个不同的子网段，比如一个是192.168.1.x，另一个是192.168.0.x。如果你的电脑和手机不在同一个子网段，也会导致无法连接。

又一个坑：防火墙拦住了

解决了IP地址的问题后，我发现还是连不上。查了下日志，发现是防火墙把端口给拦住了。

默认情况下，Chrome的远程调试会使用9222端口。所以你需要手动去防火墙设置里，把这个端口开放出来。Windows用户可以这样操作：

1. 打开控制面板 -> 系统和安全 -> Windows Defender 防火墙
2. 点击“高级设置”
3. 新建入站规则，选择“端口”，然后填入9222
4. 允许连接，最后命名规则即可

Mac用户的话，可以在“系统偏好设置” -> “安全性与隐私” -> “防火墙”选项卡里，添加对应的端口例外。

技术细节补充：为什么需要WiFi调试？

可能有人会问，为啥非要WiFi调试呢？USB不是挺好的吗？确实，USB调试是最常用的方式，但有时候你可能会遇到以下场景：

• USB接口被占用，比如接了外设或者充电器
• 测试环境不允许插线，比如某些展示场合
• 需要同时调试多台设备，WiFi更方便管理

而且从技术原理上来说，WiFi调试其实和USB调试是一样的，都是通过WebSocket协议进行通信，只是传输媒介从USB换成了网络。

小问题还没完全解决，但无大碍

虽然现在已经能正常调试了，但还是有个小问题：偶尔会出现断连的情况。特别是当手机锁屏或者切换到其他应用时，连接就会中断。

目前我的解决办法是写了个脚本，定期检测连接状态，如果断开了就自动重连：

setInterval(() => {
  fetch('http://192.168.x.x:9222/json')
    .then(response => response.json())
    .then(data => {
      if (!data.length) {
        console.warn('连接已断开，正在尝试重连...');
        // 这里可以加入重新启动调试逻辑
      }
    })
    .catch(err => console.error(err));
}, 5000);

不过这个脚本也只是缓解了一下，没彻底根治问题。如果哪位大佬有更好的方法，欢迎评论区交流。

总结一下，WiFi调试的核心要点

以上是我踩坑后的总结，简单回顾一下：

• 确保手机和电脑在同一个WiFi网络下
• 使用局域网IP地址，而不是localhost
• 开放防火墙端口（通常是9222）
• 必要时写个脚本监控连接状态

WiFi调试虽然比USB调试稍微复杂一点，但掌握了方法之后，还是挺方便的。希望这篇文章能帮到有同样困扰的同学，如果你有更好的方案，也欢迎在评论区留言讨论！