P16:React高级

作者： 文章来源：

本文原地址：https://www.mimiwuqi.com/webqianduan/197348.html

1. 下载 React developer tools
2. React developer tools 的三种状态
3. React developer tools 使用
4. 总结

如果你能看到这儿表明已经可以简单的写一些 React 代码了，在开发中，我也是经常使用console.log这种很二的形式来调试程序。其实 React 在浏览器端是有一个调试工具的，这就是React developer tools，这个是 React 人必下的一个调试工具。本文就主要学习一下React developer tools的下载和简单使用。

下载 React developer tools

这个需要在chrome 浏览器里进行，并且需要科学上网（这东西我不能在这里教，所以自行百度吧）。

1. 点击浏览器地址栏最右边的...，然后选择更多工具,然后选择扩展程序。
2. 点击打开 chrome 网上应用店,直接在搜索框里搜索React，出现的第一个就是。
3. 点击添加至 Chrome,然后就是等待了……….

这里就有的小伙伴说了，我比较懒啊，或者我实在不会科学上网，怎么下载呢？没关系，我已经为你准备好了 crx 文件安装，大家可以到这里去下载《Chrome 插件 React Developer Tools – React 开发者工具》

React developer tools 的三种状态

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

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

React developer tools 使用

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

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

总结

以上就是本文关于 React 调试工具的安装和使用，在工作中一个前端的调试都是在这里进行的，所以拿出单独的一篇文章来讲一下。

更多 建站教程 请访问 https://www.mimiwuqi.com/webqianduan/