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

如果你能看到这儿表明已经可以简单的写一些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调试工具的安装和使用,在工作中一个前端的调试都是在这里进行的,所以拿出单独的一篇文章来讲一下。

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » P16:React高级-调试工具的安装及使用

发表评论

提供最优质的资源集合

立即查看 了解详情