P15:React高级-调试工具的安装及使用

阐述

如果你能看到这儿表明已经可以简单的写一些React代码了，在开发中，我也是经常使用console.log这种很二的形式来调试程序。

其实React在浏览器端是有一个调试工具的，这就是 React developer tools，这个是React人必下的一个调试工具。

本文就主要学习一下 React developer tools 的下载和简单使用。

下载React developer tools

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

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

React developer tools 的三种状态

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

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

React developer tools 使用

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

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

总结

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