教程 其他 框架 组件 接口

调试工具

调试工具目前支持的功能有:

  • 远程调试
  • 手机端预览
  • 调试日志查看

远程调试

如果开发者熟悉 chrome 浏览器中的devtools工具以调试页面的话,那么对框架的调试方式也会很快上手,两者的调试界面相似。

我们提供的远程调试方案,包括 3 个部分:快应用调试器hap-toolkit 的远程调试命令chrome devtools 调试界面。开发者通过对这 3 个组件的配合使用,实现对手机 app 端代码的进行远程调试

安装 rpk 包

在手机上有三种方式安装 rpk,开发者可以根据情况选择其一,有关快应用调试器的安装和使用,请参考快速入门

WIFI 在线更新

  • 适用场景:高频率更新 rpk 包
  • 优点:自动更新 rpk 包,方便快捷
  • 缺点:需要开发者启动 HTTP 服务器,需要确保手机与 PC 在同一局域网

步骤如下:

  • 启动调试服务器,详见文档toolkit 工具
  • 配置 HTTP 服务器地址有两种方式,以下两者选其一即可:

    • 打开调试器 --> 点击"扫码安装",扫描终端窗口中的二维码即可完成配置(若扫描不成功,可在浏览器中打开页面:http://localhost:<your port>,扫描页面中的二维码) 如下图所示:

    img

    • 打开调试器 --> 点击右上角menu --> 设置,输入终端窗口中提示的 HTTP 服务器地址

    配置完成后,可点击在线更新唤起平台运行 rpk 包

USB 在线更新

  • 适用场景:高频率更新 rpk 包
  • 优点:自动更新 rpk 包,方便快捷,不需要手机与 PC 在同一局域网
  • 缺点:需要开发者启动 HTTP 服务器,需要手机通过 USB 连接手机

步骤如下:

  • 启动调试服务器,详见文档toolkit 工具
  • 手机设置中开启开发者选项 --> USB调试
  • 手机快应用调试器选中开启USB调试,然后通过 USB 连接 PC
  • 手机快应用调试器点击在线更新唤起平台运行 rpk 包

如下图所示:

img

本地安装

  • 适用场景:仅预览效果或低频率更新 rpk 包
  • 优点:只需将 rpk 包复制到手机中,本地安装选择 rpk 包即可
  • 缺点:需手动更新 rpk 包

1 复制 rpk 包到手机中

<ProjectName>/dist目录下编译产出的rpk包通过 USB 数据线或其他方式,复制到手机文件系统中

2 本地安装 rpk 包

打开快应用调试器 --> 点击"本地安装",选择手机文件系统中的 rpk 包,并自动唤起平台运行 rpk 包,查看效果

开始调试

在调试器中,点击开始调试按钮,将会通知服务器在命令行终端上输出访问 devtools 调试页面的 url,同时服务器主页上会显示 devtools 调试界面的 url。

如果开发者的 PC 环境安装了 Chrome 浏览器的话,服务器会尝试自动打开 devtools 调试页面

如下图所示:

img

调试时需要注意以下几点:

  • 点击开始调试之前,PC 需要先启动调试服务器并在调试中不能关闭,详见文档toolkit 工具
  • 手机调试器中安装了 rpk 包
  • 如果选择开启USB调试,在调试过程中需要保持手机 USB 连接 PC

在调试过程中,可以通过在线更新,或者 toolkit 工具的编译命令更新 rpk 包,详见文档toolkit 工具

调试页面

框架的devtools调试页面提供基础的调试功能。目前,该调试界面包含 4 个 tab 页签:

  • Element: 提供显示用户 VDOM 页面结构和样式
  • Console: 提供基本的 console 输出以及和 js 引擎的 cli 交互
  • Source: 提供用户的源码调试
  • Network: 提供用户 app 请求网络资源展示

如下图所示:

img

调试日志查看

错误信息查看

当代码运行时发生异常,界面会弹出一个对话框,点击查看错误, 可以显示出错误发生的堆栈,供开发者分析

利用 devtools 调试界面 console 输出

开发者在工程项目中利用 console 的输出函数打印的调试信息,以及属于 native 模块打印的信息,都可以通过 devtools 调试界面的 console 面板进行查看, 请参考开发与调试中的在 js 中输出日志部分

有关如何修改工程的日志等级,请参考开发与调试中的修改日志等级部分

命令行

需要先安装 adb 工具,可以参考官方网站说明进行安装,可将目录加到系统 PATH 中,方便后续使用

在 PC 端任意目录下,运行如下命令,查看开发者打印日志以及其他错误日志

adb logcat -s JsConsole

条匹配 "" 的结果

    没有搜索到与 "" 相关的内容