快应用开发文档开发指南开发工具 调试工具

由 ✎﹏๓₯㎕ζั͡❦﹏﹏♛ 创建, 最后一次修改 2018-03-29

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

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

远程调试

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

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

调试页面

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

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

如下图所示:


使用步骤如下

1.启动调试服务器

在工程目录下执行:

npm run server

也可以指定端口号

npm run server -- --port XXX

该命令将启动一个HTTP Server,提供devtools页面的请求,PC机与手机调试器交互的功能。

启动成功后,终端会输出一个二维码(PC机的服务器地址),或者开发者也可以通过浏览器访问服务器主页地址查看该二维码,如:http://localhost:12306

2.扫描二维码

手机上启动快应用调试器,点击扫码安装:扫描上一步输出的二维码;调试器将会记录服务器的地址信息,请求下载并安装rpk文件。

有关快应用调试器的安装和使用,请参考快速入门

如下图所示:


3.开始调试

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

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

如下图所示:


手机端预览

开发者需要首先启动HTTP Server,然后,可以通过三种方式在手机端对开发项目的效果进行预览

1 手动编译 + 手动刷新

运行如下命令,完成编译,然后在快应用调试器中点击在线更新,即可查看当前代码运行效果

npm run build

2 手动编译 + 自动刷新

运行如下命令,一步完成编译和手机端自动刷新

npm run build && npm run notify

3 自动编译 + 自动刷新

运行如下命令,启动文件监视器,每次修改工程文件时,会自动编译并在手机端刷新

npm run watch

调试日志查看

错误信息查看

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

利用devtools调试界面console输出

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

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

命令行

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

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

adb logcat -s JsConsole


以上内容是否对您有帮助:
前端工作常用布局完全指南
二维码
建议反馈
二维码