react 调试工具 eact-developer-tools

我们在开发react项目时，大部分伙伴调试都选择用console.log去控制台打印输出，但其实React在浏览器端是有一个调试工具的，这就是React developer tools，这个是React人必下的一个调试工具

下载

这个需要在chrome浏览器里进行，并且需要科学上网

1. 点击浏览器地址栏最右边的...，然后选择更多工具,然后选择扩展程序。

2 .点击打开chrome网上应用店,直接在搜索框里搜索React，出现的第一个就是。

3 .点击添加至Chrome,然后就是等待了..........

这里直接给个链接下载: https://chrome.zzzmh.cn/info?token=fmkadmapgofadopljbjfkapdkoienihi

image.png

这样子就表示插件添加成功了

React developer tools的三种状态

React developer tools有三种颜色，三种颜色代表三种状态：

1. 灰色： 这种就是不可以使用，说明页面不是又React编写的。
2. 黑色: 说明页面是用React编写的，并且处于生成环境当中。
3. 红色： 说明页面是用React编写的，并且处于调试环境当中

React developer tools

打开浏览器，然后按F12,打开开发者工具，然后在面板的最后一个，你会返现一个React,这个就是安装的插件了。

在这里你可以清晰的看到React的结构，让自己写的代码更加清晰，你还可以看到组间距的数据传递，再也不用写console.log来测试程序了