智能小程序档案馆——真机调试

真机调试，顾名思义就是和模拟器相对应的，在真正的手机（android和ios系统）上进行调试。而与模拟器不同的是，真机调试是我们智能小程序开发的临门一脚，调试成功就可以加鸡腿，不成功可能加的就是班哦。所以为了拯救不开心，贴心的小编特意为你准备了今天的真机调试宝典！

我们看下面的这个图，比较直观的为我们展示了真机调试的几个重要环节：

1. 把待调试的远程调试端口打开；

2. 编译 chromium 的远程调试相关代码；

3. 启动一个本地的服务实现端上的页面和开发者工具页面通信。

接下来，我们详细的看一下每一个环节，到底应该干点啥。

打开调试端口

• android 端打开远程调试端口

1. android 中添加这行代码后，开启远程调试的端口。android 设备会打开一个unix domain socket 端口用于远程调试协议的通讯。

2. 通过执行下面的命令，会得到类似的结果：

其中 “webview_devtools_remote_5481 ”就是 localabstract 端口号。

3. 通过 adb 命令把这个端口转发到本地 PC 的 TCP 端口上：

4. forward 转发之后就可以用浏览器打开 http://localhost:4000/json查看到被调试的页面基础信息，其中 webSocketDebuggerUrl 字段是用于远程调试连接的 websocket。上述操作封装在 npm adb-tools（https://www.npmjs.com/package/adb-tools） / 源码（https://github.com/songyaru/adb-tools/）

• ios 端打开端口

开发者账号 build 出的包默认打开了端口 ，参见 如何替换签名实现 ios 远程调试（https://songyaru.github.io/doc-backup/resign-app/）

编译 chromium 的真机调试代码

通过从 chromium 源码中单独抽取出来重新 build。

智能小程序在 smartapp 分支: inspector 源码（https://github.com/songyaru/devtools-frontend/tree/smartapp）

启动一个本地的服务，实现端上的页面和开发者工具页面通信。

1. local server

由于智能小程序是 master / slave 的架构，主页面只负责 js 的执行，slave 页面由 master 控制通过数据驱动来渲染显示。常规的 inspector 没法同时调试 js 代码又显示页面的 dom 结构等信息。因此需要对 inspector 源码做一些处理。 （npm adb-devtools ：https://www.npmjs.com/package/adb-devtools）

local server 除了包含 inspector 静态资源服务，还启动了一个 websocket 的后台转发服务

• server 消息转发

server端作为一个消息的中转站，通过 websocket 的双向通信，实现了 inspector 和 master 通信。（master 和 slave 通信类似）

为了把小程序的页面和 server 建立通信，就需要在小程序中的页面插入一段连接 websocket 的脚本。

• android 端内 webview 页面注入 js

android 调用上述注入 js 代码 ,核心就是一个 socket.io ,让 webview 页面和 local server 建立连接。

由于本地的 server 没有域名和固定 ip ,如何让手机上的 webview 连接到本地的 server 呢？之前我们用了adb forward 把手机的端口转发到 PC。 adb 同时也提供了 reverse 把 PC 的端口转发给手机。

把本地 PC 的 serverPort 转发到手机的8090端口，手机 webview 可以通过 localhost:8090 访问 PC 的serverPort。

• ios 端内 webview 页面注入 js

注入的 js 脚本类似 Android 端，核心就是一个 socket 连接。 注入的方式和 android 方案不一样，采用远程调试协议中的 ‘Runtime.evaluate’ 在页面中执行一段插入脚本。

当打开 http://localhost:8090 页面扫描所有设备的可调试页面时，查找到是智能小程序后自动的执行 evaluateScript方法，把脚本插入页面。后续 android 也会改成这种方案，这样就不需要在端内改 html 文件。

2. 让 inspector 支持同时连接 master 和 slave

默认情况下，chrome 的 inspector 只支持一个 websocket 连接。 （参见 Connections.js # 246：https://github.com/songyaru/devtools-frontend/blob/smartapp/front_end/sdk/Connections.js）

通过 http://localhost:8090/devtools/inspector.html?ws=xxx传入 master 的 webSocketDebuggerUrl。由于master 页面只是一个 js 的执行环境没有dom 结构，我们还需要把 slave 页面连上 inspector。 （参见 adb_custom：https://github.com/songyaru/devtools-frontend/blob/smartapp/front_end/adb_custom/adb_slave_socket.js）

master 页面知道 slave 页面的跳转和加载等状态，通过 server 转发，master 可以通知 inspector 是否应该要去连接新的 slave 页面或者断开，以及获取 slave 相关信息等操作。 （参见 adb_custom.js：https://github.com/songyaru/devtools-frontend/blob/smartapp/front_end/adb_custom/adb_custom.js）

inspector 将 master 和 slave 页面都连接后，还可能需要针对特定的需求处理远程调试的协议信息。

如页面断开连接默认会弹出一个重连的框，由于我们加入了 slave,并且 slave 的 socket 断开是我们预期的，不需要弹重连的框。（处理方式见 InspectorBackend.js #351：https://github.com/songyaru/devtools-frontend/blob/smartapp/front_end/protocol/InspectorBackend.js）

往期回顾：

智能小程序档案馆——版本兼容：juejin.im/post/5bc856…

智能小程序档案馆——登录授权：juejin.im/post/5bc06f…

智能小程序档案馆——远程调试：juejin.im/post/5bb089…

智能小程序档案馆——聊一聊 web-view 组件：https://juejin.im/post/5ba383aff265da0abb143153