# 调试卡片

了解通过扫码和 USB 两种方式来调试

通过本节你将学会：

# 调试前准备

# 安装调试器和预览版

若未安装调试器和预览版，需要先安装调试器和预览版,有两种方式可以安装

方式一、点击菜单「工具」「更新手机环境」，IDE 会自动安装调试器和预览版。

快应用开发工具 | 真机调试

方式二、点击卡片上方的「USB 调试」。

快应用开发工具 | 真机调试

通过方式二安装会弹出快应用开发工具 Dev弹窗，此时点 X 关闭弹窗即可，不需要点击继续调试和Cancel,点击继续调试继续调试和Cancel会打开预览器，并不会生效，调试只能通过启动调试器开始，具体可看下方的扫码调试和usb调试步骤

快应用开发工具 | 真机调试

注意：

  • 确保手机连上电脑，可通过模拟器上方的手机按钮是否为绿色判断。
  • 需要在手机上打开 USB 调试权限，并在手机上确认安装。
  • 开始调试器和预览器的关联启动，进入设置->关联启动里面开启，如下图。

快应用开发工具 | 真机调试
快应用开发工具 | 真机调试

# 日志输出准备

  1. 修改日志等级

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

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

{
  "config": {
    "logLevel": "debug"
  }
}
1
2
3
4
5
  1. 在 js 中输出日志

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

console.debug('debug')
console.log('log')
console.info('info')
console.warn('warn')
console.error('error')
1
2
3
4
5
  1. 查看日志

开发者可以通过 IDE 弹出的 调试器开发者工具 进行日志的查看。

调试有扫码调试和usb调试两种

# 扫码调试

扫码调试需要手机和电脑在同一局域网内，在手机环境安装好之后，可以通过扫二维码调试应用

# 在快应用调试器中关闭开启 USB 调试功能，此时在调试器中会出现扫码安装按钮

快应用调试器 | 真机调试

# 在开发工具中点击模拟器上方的二维码按钮，弹出二维码窗口，并使用手机端的快应用调试器进行扫码安装

快应用开发工具 | 扫码安装

扫码成功后，手机与开发工具将建立连接，快应用调试器将自动打开安装好的默认卡片进行预览。

# 扫码安装成功后，在快应用调试器中可以点击开始调试进行调试

注意：

  • 快应用调试器扫过一次二维码后将和开发工具建立连接，之后只需要使用「开始调试」进行调试。

# USB 调试

USB 调试可以调试安装至手机的卡片，无需手机和电脑在同一局域网内。

# 在电脑端开启调试服务

使用开发工具打开应用后，会默认开启调试服务。

# 在手机端开始调试

  • 手机打开 USB 调试开关 设置 --> 开发者选项 --> USB调试

  • 手机快应用调试器中打开开启 USB 调试功能，手机 USB 连接到 PC

  • 手机快应用调试器中点击在线更新按钮，等待更新成功

  • 手机快应用调试器选择卡片路径，点击开始调试按钮

    快应用调试器 | USB调试

# 调试预览：

# 调试运行成功后，手机端会打开预览页。如下图所示

快应用调试器 | 预览卡片

# 调试运行成功后，电脑端会打开调试页面。如下图所示

快应用开发工具 | devtools

# Element 面板

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

element
# 编辑 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 面板进行查看

console