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

栏目: Html5 · 发布时间: 5年前

内容简介:我们看下面的这个图,比较直观的为我们展示了真机调试的几个重要环节:

真机调试,顾名思义就是和模拟器相对应的,在真正的手机(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


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

构建高可用Linux服务器

构建高可用Linux服务器

余洪春 / 机械工业出版社华章公司 / 2011-11-1 / 79.00元

资深Linux/Unix系统管理专家兼架构师多年一线工作经验结晶,51CTO和ChinaUnix等知名社区联袂推荐。结合实际生产环境,从Linux虚拟化、集群、服务器故障诊断与排除、系统安全性等多角度阐述构建高可用Linux服务器的最佳实践。本书实践性非常强,包含大量企业级的应用案例及相应的解决方案,读者可以直接用这些方案解决在实际工作中遇到的问题。 全书一共10章。第1章以作者的项目实践为......一起来看看 《构建高可用Linux服务器》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具