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

Posted 2022-01-03 wgchen~

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了P15:React高级-调试工具的安装及使用相关的知识，希望对你有一定的参考价值。

阐述

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

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

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

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

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

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

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

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

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

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

以上是关于P15:React高级-调试工具的安装及使用的主要内容，如果未能解决你的问题，请参考以下文章