快应用 调试工具
调试工具目前支持的功能有:
远程调试
如果开发者熟悉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