- 提案时间: (2021-07-27)
- 影响版本: (3.x)
支持在开发小程序时使用 Vue DevTools。
增强使用 Vue 开发 Taro 应用的开发体验。
在项目中安装 Taro 插件:
$ yarn add --dev @tarojs/plugin-vue-devtools
在 Taro 编译配置中配置使用 @tarojs/plugin-vue-devtools
:
config = {
plugins: [
'@tarojs/plugin-vue-devtools'
],
// ...
}
$ taro build --type weapp --watch
Vue DevTools 主要分为 frontend 和 backend 两部分,两者利用 bridge(socket.io)进行通讯。
- frontend:开发者工具的展示界面,是一个 Electron 应用或 Chrome 插件。
- backend:一段注入到应用运行时的代码。
frontend 不需要调整。
backend 有下列需要调整的地方:
因为 NPM 分发的 @vue/devtools
里的 backend 代码,是使用 Webpack 以 eval-sourcemap
的形式打包的。但小程序不能使用 eval
,所以我们要下载 vuejs/devtools 仓库,修改 Webpack sourcemap 配置,然后手动打包。
// packages/build-tools/src/createConfig.js
- devtool: 'eval-source-map',
+ devtool: false,
首先需要把 backend 代码注入 Taro 应用并进行调用:
import devtools from '@vue/devtools'
devtools.connect(
// 'localhost', - Host
// undefined, - Port
// {
// io: createSocket - socket.io-client
// }
)
socket.io-client
在小程序环境不能直接使用,因此需要模拟实现 socket.io-client
的行为。
import devtools from '@vue/devtools'
devtools.connect(
'localhost',
undefined,
{
io: function createSocket () {} // 自定义的 createSocket 方法
}
)
需要先使用 XHR 进行握手通讯,获取 sessionID。
{
"sid": "FSDjX-WRwSA4zTZMALqx",
"upgrades": ["websocket"],
"pingInterval": 25000,
"pingTimeout": 5000
}
socket.io
有 upgrade 的机制,一开始使用轮询,待 WebSocket 成功连接后切换到使用 WebSocket 通讯。
我们可以省略 upgrade 步骤,获取到 sessionID 后直接连接 WebSocket。然后进行一些初始化的通讯,待 WebSocket 真正可用后,再触发 backend 的逻辑。
WebSocket 初始化通讯:
<- 2probe #ping
-> 3probe #pong
<- 5 #upgrade
需要定时传送心跳包,否则会被断开连接。
backend 使用了一些 Taro DOM 没有的 API,需要进行模拟。
- querySelectorAll
- element.ownerDocument
- document.defaultView
- HTMLElement
@vue/devtools
v6.0.0+ 是兼容 Vue2 的,但目前尤其是配合 Vuex 使用时还有部分兼容问题(如使用 Vue2 时,webpack buildin global 有问题)。
- 强制锁定了
@vue/devtools
的版本,尤其是目前它还处于beta
阶段,每次跟随升级都需要手动打包。
另外,对 devtools 功能的支持不够全面,有些功能需要针对小程序环境魔改 backend 才能实现,欢迎共建~
- 支持元素高亮。
N/A
- Vue 模板增加
@tarojs/plugin-vue-devtools
依赖。 - 后续可以增加一个参数,用于配置使用开发者项目本地安装的
@vue/devtools
。