P16:React高级-调试工具的安装及使用
目录
如果你能看到这儿表明已经可以简单的写一些 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 调试工具的安装和使用,在工作中一个前端的调试都是在这里进行的,所以拿出单独的一篇文章来讲一下。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » P16:React高级-调试工具的安装及使用
码云笔记 » P16:React高级-调试工具的安装及使用