调试

在平时开发过程中，经常需要对项目源代码（Vue、React、TS、JS）进行调试，目前 Hummer 提供了以下三种调试方式：

一、日志调试

对于一些简单的调试（如变量查看、条件判断等），可以直接通过在代码中打印日志（console.log()）的方式来调试。关于如何打印日志，可参考 console 文档。

目前有以下四个途径可以查看日志：

本地服务页面。 通过 hummer dev 自动开启的本地服务页面（如：http://x.x.x.x:8000），可以查看日志。
移动端开发者工具。 在移动端 Hummer 页面中，会有一个【开发工具】按钮，点开按钮后即可查看日志。
客户端 IDE 工具。 Android 端：可以在 AndroidStudio 中任意打开一个工程，在 Logcat 中过滤 HummerJS 字符串来查看日志；iOS 端：需要先通过 XCode 编译运行 Hummer 页面对应的原生工程，然后在 XCode 控制台窗口中可以查看日志。
VSCode 调试插件。 在 VSCode 中开启 Hummer 调试插件，并且把 App 切换至调试模式，此时可以在调试插件页面的 DEBUG CONSOLE 窗口中查看日志。

二、代码调试

目前代码调试，主要分为 Hermes 和 JavaScriptCore 两种引擎调试方式，其中 Hermes 引擎的调试可以同时支持 Android 和 iOS 两端，可以通过 VSCode 调试插件或者 Chrome 浏览器两种方式进行调试，而 JavaScriptCore 引擎的调试仅支持 iOS 端，通过 Safari 浏览器进行调试。

下面我们先来介绍一下 Hermes 引擎的调试方式。

Hermes 引擎调试

由于 Android 和 iOS 两端 SDK 的默认 JS 引擎都不是 Hermes（Android 默认是 QuickJS、iOS 默认是 JavaScriptCore），所以在开启 Hermes 引擎断点调试功能之前，需要先在原生工程中做一些准备工作：

Android 端：

在 gradle 中添加调试器依赖。

dependencies {
  debugImplementation 'io.github.didi.hummer:hermes-debugger:0.0.9'  //版本号需自行替换成当前的最新发布版本
}

在 Application 中初始化调试器。

@Override
public void onCreate() {
    super.onCreate();

    // 需在 Hummer.init() 之前调用
    Hummer.initHermesDebugger(new DefaultHermesDebugger(this));
}

iOS 端：

把 podfile 中的 Hummer subspec 修改为 Hummer/Hermes。

pod 'Hummer/Hermes', :git =>'git@github.com:didi/Hummer.git', :branch=>'master'

在初始化 Hummer 引擎（Hummer.startEngine）时，调用如下方法：

HMSetEngineType(.NAPI)

做完上面这些准备工作之后，可以通过以下两种方式进行调试：

通过 VSCode 调试插件 进行调试【官方推荐】。
调试步骤：
1. 安装 VSCode 插件：搜索【Hummer】；（仅第一次）
2. 切到【调试】Tab，新建 .vscode/launch.json 文件（"create a launch.json file" -> "Hummer Debugger"）。其中的 devPort 字段，对应的是 hummer dev 时启动的本地服务端口号，默认是 8000，可以自行修改；（仅第一次）
3. 在源代码中打上断点；
4. 点击【调试】Tab 下的【绿色箭头】按钮开启调试（F5）；
5. 运行 App，即可开始断点调试；
通过 Chrome 浏览器 进行调试。
调试步骤：
1. 配置 Chrome 调试页面：在 Chrome 地址栏中输入：chrome://inspect 进入 inspect 页面，点开【Discover network targets】后面的【Configure...】按钮，加入目标发现端口号：localhost:8081;（仅第一次）
2. 开启 debug 服务：hummer dev & hummer debug，或者通过快捷命令：npm run debug，保持命令行窗口不要关闭；
3. 运行 App；
4. 在 Chrome 的 inspect 页面中找到你的调试页面入口，点击进入调试界面，切到 Sources 标签页，按【cmd+P】快捷键，找到你自己的源代码文件，并打上断点；
5. 回到 App，点击【刷新】按钮，即可开始断点调试；
INFO
- 目前 Android 端 Hermes 调试器内部有 es6 转 es5 的逻辑，所以打开页面会相对比较慢，可以忽略。
- 有时开发者本机可能已经有其他进程占用了8081端口，此时需要先杀掉该进程才能正常使用本调试插件。lsof -i:8081，kill 'PID'。

JavaScriptCore 引擎调试

下面再来介绍一下 JavaScriptCore 引擎的调试方式，此方式是通过 Safari 浏览器 进行调试，仅支持 iOS 端。由于 iOS 端默认就是 JavaScriptCore 引擎，所以不用在原生工程中做任何准备工作就可以使用。
调试步骤：

开启 Safari 浏览器中的【开发】菜单选项。依次点击【偏好设置】->【高级】->【在菜单栏中显示“开发”菜单】；
连上数据线，运行 App；
在【开发】菜单中选择你要调试的设备和页面文件，打上断点，即可开始断点调试；

三、视图调试

通过 hummer dev 自动开启的本地服务页面，可以对 Hummer 页面进行视图调试，目前主要功能包括：

视图树的展示；
视图节点高亮（移动端）；
视图节点样式展示和实时修改；
视图节点位置信息显示；
页面信息显示；
日志输出；

版本要求：

Hummer CLI: ^0.9.0
Tenon 项目中的 tenon-vue: ^1.5.1
Android 端 Hummer SDK：^0.4.2
iOS 端 Hummer SDK：master分支最新代码

调试 ​

一、日志调试 ​

二、代码调试 ​

Hermes 引擎调试 ​

JavaScriptCore 引擎调试 ​

三、视图调试 ​

调试

一、日志调试

二、代码调试

Hermes 引擎调试

JavaScriptCore 引擎调试

三、视图调试