SuperApp：调试

运行入口

• HBuilderX可视化方式

  在HBuilder中，有顶部菜单、toolbar运行按钮、快捷键三种运行入口。

  1. 在顶部运行菜单选择运行 > 运行到手机或模拟器 > 运行到Android App基座或运行到iOS App基座。

     

     说明

     因HBuilderX中无自带模拟器，操作过程中如果提示没有检测到设备，请通过Android Studio或XCode安装模拟器。

  2. 单击toolbar工具栏上的按钮运行，选择运行到Android App基座或运行到iOS App基座。

     

     说明

     单击toolbar的运行按钮后会展开一个菜单，该菜单可配置，可通过自定义菜单将不常用的运行项目折叠起来。

  3. 通过快捷键Ctrl+R运行。

     弹出的菜单还支持键盘快捷选择：

     • 按Enter可以选中菜单的第一项。

     • 按数字可以快捷选中菜单项开头数字对应的菜单项。

       如果您看不到相关菜单，那么HBuilder当前打开的文件可能不是uni-app项目下的文件，请打开uni-app项目下的文件后重试。

• vue-cli命令行方式

  npm run dev:%PLATFORM%
  npm run build:%PLATFORM%

%PLATFORM%的取值可参考uni-app官方文档。

调试入口

运行uni-app后可以在控制台看到调试入口，即右上角的或调试的checkbox。

使用不同平台小程序开发工具调试

uni-app运行到支付宝、微信等其他平台的小程序开发者工具时，可以在这些工具的控制台查看console、网络请求等信息。

页面样式调试和一般web项目一样，通过调试的箭头选中元素，即可查看相应的节点和样式，如下图：

调试js时需要切换到Sources栏，根据sourcemap，找到webpack里面正确的目录，选中要调试页面的js进行调试（如果js代码是压缩过的，单击右下角的{}可视化代码），如下图：