教程 其他 框架 组件 接口

调试

我们通过概述,已经成功安装并且运行快应用,本文主要介绍通过 chrome devtools 进行远程调试方法

通过本节,你将学会:

简要介绍

开发调试需要更具打印日志定位问题,包括查询标签结构,样式UI,network等

日志输出准备

1. 修改日志等级

打开工程根目录下的 src 文件夹的 manifest.json,找到 config 配置,将 logLevel 修改为最低级别debug,即:允许所有级别的日志输出

修改后 <ProjectName>/src/manifest.jsonconfig 配置代码如下:

{
  "config": {
    "logLevel": "debug"
  }
}

2. 在js中输出日志

js 代码未按需求正确运行,输出日志能帮助开发者快速定位问题;与传统前端开发一致,使用 console 对象输出日志,如下:

console.debug('debug')
console.log('log')
console.info('info')
console.warn('warn')
console.error('error')

3. 查看日志

开发者可以使用 Android StudioAndroid Monitor 输出来查看日志,还有下文主要介绍的通过 chrome devtools 调试界面 调试手机app端的页面

远程调试准备

远程调试指的是通过快应用调试器hap-toolkit 的远程调试命令 、chrome devtools 调试界面,来调试手机 app 端的页面

远程调试依赖 chrome 浏览器 ,浏览器 devtools 会与手机上调试工具建立 socket 连接,实时获取修改应用运行数据,进行调试

1. WIFI调试

如果手机与 PC 在同一局域网,可以使用 WIFI 调试,步骤如下:

  • 在项目根目录下执行如下命令,启动 HTTP 调试服务器:

    npm run server
    
  • 手机快应用调试器中关闭 开启USB调试

  • 手机快应用调试器点击 扫码安装 按钮,扫码安装待调试的 rpk 文件
  • 手机快应用调试器中点击 开始调试 按钮,开始调试

    示例图:

2. USB调试

USB 调试模式不需要手机与 PC 在同一局域网,需要在调试过程中手机通过 USB 连接 PC,步骤如下:

  • 在项目根目录下执行如下命令,启动 HTTP 调试服务器:

    npm run server
    
  • 手机开启设置 --> 开发者选项 --> USB调试

  • 手机快应用调试器选中开启 USB调试,手机 USB 连接到PC
  • 手机快应用调试器中点击 在线更新 按钮,安装待调试的 rpk 文件
  • 手机快应用调试器中点击 开始调试 按钮,开始调试

    示例图:

3. 展示 chrome devtools 调试界面

点击 开始调试 按钮,展现 chrome devtools 页面

注:需要首先安装chrome浏览器

示例图:

Element面板

类似传统前端调试,在 element 面板 中可以通过DOM树的形式查看所有页面元素,同时也能对这些元素进行所见即所得的编辑。

编辑DOM

1. 查看元素

  • 点击审查元素按钮,或者使用快捷键 Ctrl + Shift + C (windows) 或者 Cmd + Shift + C (Mac) ,然后去页面上选择DOM

  • Element 面板上,用鼠标手动选择某个DOM节点

2. 导航DOM节点

  • 在DOM上单击,高亮节点,在节点任意处双击或点击左边箭头,可展开一个节点
  • 使用键盘,向上箭头选择此节点之前一个节点,在Elements面板内可见的节点,有可能是父节点、兄弟节点、或者兄弟节点的子节点等),向下类似,选择之后一个节点
  • 使用键盘,向左箭头选择这个节点父元素,依此论推,向右箭头可以展开一个节点,再次按向右箭头会选择到这个展开节点的第一个子元素,依此论推
  • Element 面板最下方为面包屑路径,当前选中节点以蓝色高亮表示

3. 编辑DOM节点及属性

  • 在DOM上单击或双击可编辑现有属性
  • 在DOM上右击,显示弹框,选择 Add attribute 或者 Edit attribute 添加或编辑属性
  • 在DOM上右击,显示弹框,选择 Edit as HTML 可编辑DOM及属性

设置节点样式

当选中一个DOM元素,Styles 窗口显示所有这个元素上的样式,优先级从高到低

  • 最上面: element.style,显示直接写在标签内的行内样式
  • 其次:直接匹配这个元素的css
  • 最后:为元素的盒子模型

调试JS代码

错误信息查看

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

利用 devtools 调试界面 console 输出

按照 简要介绍 中日志输出准备,开发者可以在工程项目中利用 console 的输出函数打印的调试信息,以及属于 native 模块打印的信息,都可以通过 devtools 调试界面的 console 面板进行查看

命令行

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

adb logcat -s LOGCAT_CONSOLE

注意:

在快应用 1030 及以前版本,请运行

adb logcat -s JsConsole

Network的HTTP请求

同传统H5页面开发一样,Network 面板会展示 Devtools 记录的所有网络请求

条匹配 "" 的结果

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