如果你能看到这儿表明已经可以简单的写一些 React 代码了，在开发中，我也是经常使用console.log这种很二的形式来调试程序。其实 React 在浏览器端是有一个调试工具的，这就是React developer tools，这个是 React 人必下的一个调试工具。本文就主要学习一下React developer tools的下载和简单使用。
下载 React developer tools
这个需要在chrome 浏览器里进行，并且需要科学上网（这东西我不能在这里教，所以自行百度吧）。
- 点击浏览器地址栏最右边的
...，然后选择更多工具,然后选择扩展程序。 - 点击
打开 chrome 网上应用店,直接在搜索框里搜索React，出现的第一个就是。 - 点击
添加至 Chrome,然后就是等待了……….
这里就有的小伙伴说了，我比较懒啊，或者我实在不会科学上网，怎么下载呢？没关系，我已经为你准备好了 crx 文件安装，大家可以到这里去下载《Chrome 插件 React Developer Tools – React 开发者工具》
React developer tools 的三种状态
React developer tools有三种颜色，三种颜色代表三种状态：
- 灰色： 这种就是不可以使用，说明页面不是又 React 编写的。
- 黑色: 说明页面是用 React 编写的，并且处于生成环境当中。
- 红色： 说明页面是用 React 编写的，并且处于调试环境当中。
React developer tools 使用
打开浏览器，然后按F12,打开开发者工具，然后在面板的最后一个，你会返现一个React,这个就是安装的插件了。
在这里你可以清晰的看到 React 的结构，让自己写的代码更加清晰，你还可以看到组间距的数据传递，再也不用写console.log来测试程序了。
总结
以上就是本文关于 React 调试工具的安装和使用，在工作中一个前端的调试都是在这里进行的，所以拿出单独的一篇文章来讲一下。