Taro3全网首篇之安装react-devtools调试工具

Taro3之前，在小程序开发者工具的 AppData 面板看到的都是Taro虚拟DOM的序列化结果，而不是页面的data数据，严重影响开发效率。Taro3对React DevTools和Vue DevTools进行了适配，只需要简单地配置，就能够和开发Web应用时一样使用框架的DevTools。

一、误解点
首先要清楚的是，小程序开发者工具和dev-tools完全是两个不同的工具，安装React DevTools插件后，效果可不是直接嵌入到小程序开发者工具的调试器下的一个工具属性。而是独立弹窗打开的一个调试App（基于electron开发）。
其次，官方文档就是误导人，如下：

正确来说，应该全局安装react-devtools和项目对应的react-devtools插件包，官方文档中react-devtools这个步骤直接跳过了，react-devtools都没安装，插件包又怎么会生效呢。而且这个包npm安装不上，cnpm又找不到资源，yarn没有试过，因此这里选择使用taro-plugin-react-devtools这个插件库。

二、安装

// 建议用cnpm安装，两个都可以正常安装
# npm i taro-plugin-react-devtools --save-dev
# npm i react-devtools -g

三、开发环境下配置Taro插件

// config/dev.js
const config = {
  // ...
  plugins: ['taro-plugin-react-devtools'],
  // ...
}

四、启动react-devtools工具

react-devtools

五、引入react-devtools工具生成的服务地址
启动react-devtools工具后， App里面会生成一个本地服务地址，复制粘贴引入到taro项目中的index.html。如：

<script src="http://localhost:8097"></script>

六、运行项目

npm run dev:weapp

七、效果