Vue DevTools、React DevTools、Redux DevTools

lxh
417 阅读1分钟

vue devtools

去vue2官网里点击生态系统里的Devtools

image.png

跳转到github

image.png

这里选择的是最新版

image.png

下载完成后解压

image.png

因为里面的依赖是yarn安装的，所以通过yarn安装依赖，使用命令：yarn

依赖安装完成后，有下面两种方式打包：

          1、使用命令：yarn run build 进行打包
          2、在packages\shell-chrome下使用命令yarn run build 进行打包

打开Google Chrome浏览器，点击扩展程序，或者在浏览器的地址栏输入chrome://extensions/

image.png

打开开发者模式

image.png

点击加载已解压的扩展程序

image.png

选择packages文件夹下面的shell-chrome文件夹，点击选择文件夹

image.png

出现下面界面就成功了

image.png

关于错误，可处理可不处理

image.png

处理，点击错误，出现下面界面点击全部清除

image.png

点击全部清除后，返回就可以了

image.png

react devtools

github地址

image.png

下载

image.png

下载完成后，解压、安装依赖

image.png

开打package.json文件，运行脚本

image.png

脚本运行完成后，shells\chrome文件下多一个build文件夹

加载已解压的扩展程序：选择shells\chrome\build\unpacked文件

出现下面界面的成功了

image.png

使用时发现有问题

image.png

解决就删除对应node_modules里的代码

Redux DevTools

github地址

image.png

点击下载后，可以直接用

image.png

不定期更新

avatar
文章
阅读
粉丝