实际开发中,我们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命令确认设备已列出。
cpp
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页面并且用开发者工具查看了
