React DevTools
备注
Taro v3.3.1 开始支持。
在开发小程序时可以使用 React DevTools。
使用方法
1. 安装
在项目中安装 Taro 插件 @tarojs/plugin-react-devtools
:
$ yarn add --dev @tarojs/plugin-react-devtools
2. 配置 Taro 插件
在 Taro 编译配置中配置使用 @tarojs/plugin-react-devtools
:
config/dev.js
config = {
plugins: ['@tarojs/plugin-react-devtools'],
// ...
}
3. 编译项目
$ taro build --type weapp --watch
插件参数
插件 @tarojs/plugin-react-devtools
具有以下参数:
enabled
boolean
默认值:true
控制是否连接 react-devtools
,开启后会注入 backend 的代码到开发者的应用中。
hostname
string
默认值:localhost
当 localhost 不可用时,自定义 taro
连接 react-devtools
的主机名,多用于局域网或远程调试时使用。
port
number
默认值:8097
React DevTools 使用的 Websocket 端口。
注意事项
- 强制锁定了
react-devtools
的版本,更新版本需要修改@tarojs/plugin-react-devtools
插件的代码。 - 为了识别 custom hooks,backend 会对部分符合条件的函数式组件执行
shallow rendering
,开发者需要注意代码是否存在副作用。
另外,目前对 devtools 功能的支持不够全面,有些功能需要针对小程序环境魔改 backend 才能实现,欢迎共建~
- 支持元素高亮。
- 在小程序的
storage
中记录filters
变化。
详细设计
详细设计请看 RFC。