react学习之旅七:React Developer Tools调试工具

安装

因为安装到Chrome需要*,所以我将调试工具安装到了火狐浏览器上。

首先打开火狐浏览器,选择“附加组件”这一项

react学习之旅七:React Developer Tools调试工具

在“扩展”中搜索React Developer Tools

react学习之旅七:React Developer Tools调试工具

选择该项进行安装,安装成功后会在菜单栏中出现一个react的灰色小图标

react学习之旅七:React Developer Tools调试工具

可以在浏览器中输入我们项目的地址进行访问,会发现小图标变为橙色,说明我们的项目用react开发并且还没有上线

react学习之旅七:React Developer Tools调试工具

按F12,可以清楚的看到相关数据

react学习之旅七:React Developer Tools调试工具

这个调试工具可以替代我们用来调试的console.log(),跟踪数据的变化,给开发带来了很大的便捷。