React DevTools调试扩展
浏览器里的调试利器——react-devtools，用起来真是挺顺手的。界面清爽，功能也全，不管你是刚接触 React，还是已经写了好几年，基本都能用得上。
组件结构的实时查看算是它最常用的一招了。页面上点一下，右边立马能看到组件树，props、state 全在那摆着。调状态、改数据，响应也快，调试起来直观。
支持 Hooks 的调试也比较不错。像 useState、useEffect 这些用多了，有时候状态更新错乱，用 react-devtools 一看就清楚了，省得你猜半天。
建议你装成 浏览器扩展，Chrome 和 Firefox 都有插件版本，打开开发者工具就能直接用。也可以用 npm 装桌面版，npm install -g react-devtools，跑 react-devtools 就行。
对比一下其他工具，比如 Vue 的 Vue Devtools，其实思路差不多，只不过 React 的这套逻辑更偏向函数式。
如果你对 React 调试工具感兴趣，可以看看 React 开发工具概览 或者 react-devtools-3，都有更详细的。
哦对了，如果你是用 Create React App 起的项目，那基本开箱即用，啥都不用配置，直接调试挺方便的。详细在这儿：Create React App 开发工具。
如果你常写 React，又经常在浏览器端调 UI，真没理由不装一个试试。
文件大小：333.74KB
评论区