uniapp 运行内置浏览器如何调试

在UniApp中，如果您的应用运行在内置浏览器环境下（如Android或iOS的web-view容器），调试步骤可以参考以下指南：

调试H5环境（模拟器/真机）

1. 运行到手机或模拟器

   使用HBuilderX IDE，点击顶部菜单栏的“运行”按钮，选择“运行到手机或模拟器”，确保选择了开启“显示Webview控制台”。

2. 打开Chrome开发者工具

   • 对于H5环境，在应用成功运行后，IDE通常会自动弹出一个新窗口，这个窗口就是基于Chrome内核的浏览器窗口，并且已经连接了开发者工具。

   • 如果没有自动弹出，或者需要手动打开，请在浏览器地址栏输入 chrome://inspect 进入Chrome开发者工具页面。

3. 检查设备和页面

   在 chrome://inspect 页面中，你应该能看到已连接的设备列表以及该设备上运行的webview页面。找到你的应用程序对应的页面条目并点击“inspect”按钮，即可打开一个新的Chrome DevTools窗口对应用进行实时调试。

4. 调试样式、脚本和网络请求

   在DevTools窗口中，可以查看和修改CSS样式、断点调试JavaScript代码、监控网络请求等。

调试原生APP环境

对于运行在原生APP中的UniApp项目，由于其使用的是系统提供的web-view组件，调试方法略有不同：

1. Android平台

   • 需要通过USB连接手机至电脑，并开启USB调试模式。
   • 安装ADB工具，并通过ADB命令映射端口以启用远程调试功能：

     adb forward tcp:9222 localabstract:webpackager_devtools_remote
     

     然后在Chrome浏览器访问 http://localhost:9222 来连接到WebView。

2. iOS平台

   • 使用Safari浏览器进行调试。将iPhone与Mac相连，然后在Safari的“开发”菜单下选择设备上的web-view页面开始调试。

请根据实际操作系统的版本和设备类型查阅官方文档获取最新的调试指导。