连接模拟器网页进行h5的调试(使用Chrome远程调试（推荐）) 保姆级图文

实际开发中,我们h5页面不能像pc端浏览器一样打开f12开发者工具,很难受,这里面有方法可以让你把模拟器或者手机上的h5页面日志信息用开发者工具查看.

🌐 两种主要的调试方法

方法	原理	适用场景
Chrome远程调试	通过ADB连接模拟器，在电脑Chrome浏览器中直接调试网页	需要全面调试页面元素、网络请求、JavaScript等
ADB Logcat命令	通过ADB连接后，在命令行中查看系统及应用的详细日志流	需要查看底层系统日志或应用崩溃信息

📋 具体操作步骤

1. Chrome远程调试（适用于网页调试）

这种方法能提供最完整的调试体验，类似于电脑上的F12开发者工具。

• 开启模拟器ADB调试：在雷电模拟器的设置中，找到高级设置或其他设置，确保 **“启用ADB”**或 **“ADB调试”**选项是打开状态。

下图是mumu模拟器的

• 连接模拟器：打开电脑的命令行（如CMD或PowerShell），使用命令 adb connect 127.0.0.1:5555连接模拟器。常见的端口号还有5554。连接成功后，可以使用 adb devices命令确认设备已列出。

D:\MuMu\nx_main>adb devices
List of devices attached
192.168.1.32:5555       device

然后在模拟器上打开浏览器

• 开始调试：在电脑上打开Chrome浏览器，在地址栏输入 chrome://inspect/#devices并访问。确保页面上的 **“Discover USB devices”**选项已开启。稍等片刻，在 **“Remote Target”**区域应该能看到模拟器以及其中打开的网页或WebView。

点击你想调试的网页下方的 **“inspect”**按钮，一个功能完整的开发者工具窗口就会弹出。

• 此时你可以预览h5页面并且用开发者工具查看了