【React】react&&redux调试工具
2024-10-07 18:17:02
一、React调试工具
1、安装 react-developer-tools,在chrome应用商店进行下载,因为网络限制原因,我们可以使用火狐浏览器进行安装下载
a、打开火狐浏览器的附加组件
b、搜索react-developer-tools进行安装
React Developer Tools会自动检测React组件,不过在webpack-dev-server模式下,webpack会自动将React组件放入到iframe下,导致React组件检测失败,变通方法是webpack-dev-server配置在--inline模式下即可。
二、Redux调试工具
在vue中型项目开发的过程中,一般都是要用到vuex这个状态管理工具的,这样可以方便我们管理全局的状态,同时,为了在开发的过程中,更加方便地实时查看到state状态,我们会使用 vue-devtool工具,这样就可以在浏览器中实时看到 state的变化以及触发的mutations 等等。 在react的开发过程中也是如此,redux类似于vue中的vuex,也是状态管理工具,而我们今天要介绍的是一款可以在浏览器中选择使用redux-devtools工具来进行使用了redux项目的开发的chrome插件,通过redux-devtools, 我们可以清晰的看到当前 store 仓库中的 state 是怎么样的,在可视化工具的左边,我们还可以看到触发的action的变化。 这样,使得我们开发过程中很方便地进行调试。
安装方法参考react调试
import{createStore,applyMiddleware} from"redux";
importreducersfrom"./reducers/num"
importReduxThunkfrom"redux-thunk";
import{ composeWithDevTools} from'redux-devtools-extension'
conststore= createStore(reducers,composeWithDevTools(applyMiddleware(ReduxThunk)));
exportdefaultstore
当store中的数据进行修改的时候我们就可以通过调试工具进行查看
最新文章
- 第三次作业:caculator
- inpyt 按钮变透明 边框
- 关于struts2上传图片临时文件
- java 多线程——quartz 定时调度的例子
- CAS+SSO原理浅谈
- rdlc部署zt
- inode结构体成员详解
- python编程快速上手之第6章实践项目参考答案
- c++动态内存管理
- unity3d ipv6支持
- Python:读取 .doc、.docx 两种 Word 文件简述及“Word 未能引发事件”错误
- BeanUtils 日期转换(本地格式yyyy-MM-dd)转换成date
- 基于IDEA工具 lombok 的使用
- Springboot Application 集成 OSGI 框架开发
- Linux LB--负载均衡和高可靠
- Linux配置Redis外网访问
- CF1106F Lunar New Year and a Recursive Sequence 线性递推 + k次剩余
- 未能找到 CodeDom 提供程序类型“Microsoft.VJSharp.VJSharpCodeProvider,
- 【Ansible 文档】【译文】动态inventory
- Linux 使用系统ISO制作yum源
热门文章
- Unzip 解压报错
- 简单DP入门(二) 最长上升子序列及其优化
- 【读书笔记】:MIT线性代数(5):Four fundamental subspaces
- django-2-目录结构
- c# WPF DataGrid 获取选中单元格信息
- 【目录】sql server 进阶篇系列
- Docker入门 .Net Core 使用Docker全程记录
- Vue小白篇 - Vue 的指令系统 (1) v-text、v-html
- java 多线程 线程安全及非线程安全的集合对象
- Python3.5-20190518-廖老师-自我笔记-模块