chrome浏览器插件react devtoolsredux devtools,无需安装解压即可用

Posted ipython258

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了chrome浏览器插件react devtoolsredux devtools,无需安装解压即可用相关的知识,希望对你有一定的参考价值。

react devtools用于调试react代码,可以查看到props、state的值,以及定义的hooks,而redux devtools可以追踪到action的派发、store的变化,两个都是react开发过程中非常好用的工具!
\\"\\"

下面是附上两个开发者工具下载地址

react devtools 
链接:https://pan.baidu.com/s/1gLF1Bw9vn6CRiWnFayfJYA 提取码:shsk
redux devtools
链接:https://pan.baidu.com/s/1FI7RU3vQ1raEXpmQ-fwXUA  提取码:in0n

下载文件后解压
\\"\\"

打开拓展程序,选择 加载已解压的拓展程序,导入上面的文件夹

\\"\\"

导入文件夹后就可以在拓展程序里看到 react 和redux的开发者工具

\\"\\"

点击右上角的用户旁类似于 拼图 的按钮,将react、redux开发者工具固定在导航栏处,如果该页面使用了react / redux,对应的图标会变亮,生产环境和开发环境亮的颜色不一样,如果没有使用则置灰

\\"\\"

然后通过 ctrl + shift + i,检查/审查元素,当该页面有使用react / redux 时,才能找到 react / redux 的开发者工具,选择即可进行相关的调试

\\"\\"

以上就是react/redux的开发者工具安装步骤

以上是关于chrome浏览器插件react devtoolsredux devtools,无需安装解压即可用的主要内容,如果未能解决你的问题,请参考以下文章

Chrome浏览器vue-devtools插件安装教程

chrome浏览器的VUE调试插件Vue.js devtools

Chrome浏览器安装React developer tools

vue 调试程序的安装(谷歌浏览器chrome的vuejs devtools 插件的安装)

chrome插件vue-devtools-master安装教程

mac环境下chrome如何安装vue-devtools插件