用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实战教程 查看内容

小程序调试新思路--跨端调试

Rolan 2021-10-19 00:29

小程序调试方面探索

halo 大家好,我是 132,今天给大家带来一篇有关于小程序调试的文章

前阵子一直在忙着重构小程序的工具链,先后经过了好几个版本,重构了很多代码

今天来讲讲我在调试方面做的探索


第一阶段:真机预览

简单说就是将小程序的 bundle 文件,通过 webdav 上传到真机中,然后可以直接在真机中执行和预览

只需要经过一条命令,就可以直接在 trippal PC 端进行预览了

miniapp preview

和微信不同的是,我们没有使用 electron 做一整套 IDE 工具,而是借助了 trippal PC 端、chrome、trippal 真机、来组成了我们的调试工具链

这主要是出于维护成本的考虑,因为我们小程序的人手比微信要少得多,维护一个大而全的 IDE 成本实在太高,所以我们更希望借助现有的生态,去组装一个调试的链路


第二阶段:chrome 远程调试之 CDP

这也是微信等其他小程序使用的思路,基本上都是定制 chrome-devtools-frontend 这个项目

https:// github.com/ChromeDevToo ls/devtools-frontend

然后往 chrome 的 socket server 上发送 cdp 指令

当时我也按照协议做了 console 和 dom 的对接

这种对接方式理论上可以实现自定义 chrome,而且 v8 也有对应的库来封装好协议,可以说非常方便了

v8-debug-protocol

可是我们小程序并不是跑在 v8 上,而是跑在 jscore 中,很难做断点调试的劫持,它包含的信息是非常多的

所以这个方案说白了,目前来看只适用于 v8,像 jscore,quickjs,都不适合

最终方案:chrome 跑 js bundle

最终我们从 react native 得到启发,使用了一种更简单的 chrome 调试方案

简单讲就是,就是直接将我们的 js bundle 放到 chrome 中执行,然后执行的时候,我们通信我们走 web socket,最终转发到 native 的小程序容器中

包括 UI 的渲染,api 的调用,统统是 chrome 调用,然后转发给 native,反馈到 native 的视图中

这种调试 chrome 调试方案是可以跨端的,不管是 pc 端还是安卓,ios,只要支持 web socket 就可以实现

与此同时,这也解决了 web 模拟器调用 native api 的问题


两者的区别

使用 v8 跑 js 然后对接 chrome 的 CDP 协议,本质上是链接 chrome 的 socket server

使用 chrome 跑 js,然后渲染到 native 容器,本质上是我们自己维护 socket server,和自定义协议

这是两个相反的线路,但最终目的都是断点调试,只是如果你有 v8 就可以和 chrome 直连,没有 v8 只能 chrome 反连

最终方案:使用 vscode 直接断点调试

在方案三的基础上,我们将 js bundle 跑在 node worker 中就可以了

使用 vscode 替代 chrome 的好处最明显的好处是缩减链路

miniapp run --debugger

最终的体验就和 flutter 一模一样,我们使用一条命令就可以直接将 trippal PC 的小程序容器打开,然后 vscode 直接可以对代码进行 debugger 调试

我们甚至可以在 vscode 新版本中直接调试 UI,只需要开一个端口,把远程的 webview 拉下来即可


总结

跨端调试 一直是我最想做好的环节,我一直认为,调试是任何跨端框架中最重要的一环,相反,其实画图没那么重要

知乎上有很多将 react 画到 skia 上的文章,甚至还有 canvas 比 dom 好的问题

其实他们都忽视了,画图本身是很次要的这一事实

canvas 能画,dom 也能画,但 canvas 有 dom 这样好的调试吗?

至此,有了一个完美的调试方案,我们小程序的整个链路我才觉得稍微满意了

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: 伊撒尔 来自: 知乎