调试

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

简要介绍

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

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

修改后 <ProjectName>/src/manifest.json 中 config 配置代码如下：

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

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

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

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

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

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

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

npm run server

示例图：

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

npm run server

示例图：

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

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

示例图：

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

点击审查元素按钮，或者使用快捷键 Ctrl + Shift + C (windows) 或者 Cmd + Shift + C (Mac) ，然后去页面上选择 DOM
在 Element 面板上，用鼠标手动选择某个 DOM 节点

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