1. 首先，下载react-developer-tools开发调试工具插件。

因为谷歌插件下载需要FQ，这里提供一个本地资源：https://www.crx4chrome.com/crx/3068/

谷歌下载.crx后缀的文件，火狐下载.xpi后缀的文件。

2. 插件安装（以谷歌为例）

打开谷歌浏览器，在路劲栏输入：chrome://extensions/

将下载的插件拖入谷歌浏览器，然后选中允许访问文件网址。

点击详细信息

React Developer Tools会自动检测React组件，不过在webpack-dev-server模式下，webpack会自动将React组件放入到iframe下，导致React组件检测失败，变通方法是webpack-dev-server配置在--inline模式下即可。

3. 在chrome浏览器，会出现React，右侧props--组件属性，state--组件状态。

React开发调试工具--react-developer-tools的更多相关文章

  1. react 工程起步 安装chrome 开发调试工具 react developer tools 及初建一个react 项目...

    1.安装react 开发工具 1.下载    chrome      react developer tools 下载地址:https://pan.baidu.com/s/1eSZsXDC  下载好是 ...

  2. 7. react 基础 - React Developer Tools 的安装 及 使用

    1. 安装 react 开发调试工具 React Developer Tools 打开 chrome 浏览器访问 chrome://extensions/ 点击右上角的 拓展程序 -> 打开 c ...

  3. React - React Developer Tools开发者工具的安装与使用（Chrome调试插件）

    原文地址:http://www.cnplugins.com/zhuanti/how-to-use-react-tools.html 虽然我们曾经在React开发者工具的基础介绍里面有概括性的介绍过Re ...

  4. 你不知道的React Developer Tools，20 分钟带你掌握 9 个 React 组件调试技巧

    壹 ❀ 引 React Developer Tools 是 React 官方推出的开发者插件,可以毫不夸张的说,它在我们日常组件开发中,对于组件属性以及文件定位,props 排查等等场景都扮演者至关重 ...

  5. React Developer Tools 安装小提示

    1,在google市场里边,安装React Developer Tools之后,发现是开启的,但是按下F12后,并没有发现react选项 2,后来通过查资料,发现必须是运行react项目的时候,才出现 ...

  6. 浏览器开发调试工具的秘密 - Secrets of the Browser Developer Tools

    来源:GBin1.com 如果你是一个前端开发人员的话,正确的了解和使用浏览器开发工具是一个必须的技能. Secrets of the Browser Developer Tools是一个帮助大家了解 ...

  7. 【React】react&&redux调试工具

    一.React调试工具 1.安装 react-developer-tools,在chrome应用商店进行下载,因为网络限制原因,我们可以使用火狐浏览器进行安装下载 a.打开火狐浏览器的附加组件 b.搜 ...

  8. 掌握Chrome Developer Tools：下一阶段前端开发技术

    Tips 原文作者:Ben Edelstein 原文地址:Mastering Chrome Developer Tools: Next Level Front-End Development Tech ...

  9. 1. React介绍 React开发环境搭建 React第一个程序

    什么是 React         React 是 Facebook 发布的 JavaScript 库,以其高性能和独特的设计理念受到了广泛关注. React的开发背景         Faceboo ...

随机推荐

  1. es6(10)--Set,Map(1)

    //Set { let list=new Set(); list.add(5);//添加 list.add(7); //属性size就是长度 console.log('size',list.size) ...

  2. 04-spark streaming

    1.基本概念(了解) ①流(Streaming): 是一种数据传送技术,它把客户机收到的数据变成一个稳定连续的流,源源不断地送出,使用户听到的声音或看到的图象十分平稳, 而且用户在整个文件送完之前就可 ...

  3. Linux：DNS服务器搭建及配置

    1.yum install -y bind bind-chroot bind-utils 2.编辑DNS主配置文件 vim /etc/named.conf   修改如下标红色处即可: options ...

  4. python3基础：基本语句（2017）

    http://www.cnblogs.com/qq21270/p/4591318.html  字符串.文本文件 http://www.cnblogs.com/qq21270/p/7872824.htm ...

  5. 1.类的加载机制_继承类的加载(一个小的Demo)说明

    今天我们先来一个小的Demo来了解类的加载顺序. public class ClassLoaderTest { public static void main(String[] args) { Sys ...

  6. 07-border(边框)

    边框 边框有三个要素: 粗细.线性样式.颜色 border: solid 如果颜色不写,默认是黑色. 如果粗细不写,不显示边框. 如果只写线性样式,默认的有上下左右 3px的宽度,实体样式,并且黑色的 ...

  7. ubuntu oracle 环境搭建

    安装 Oracle SQL Developer Oracle客户端安装 https://oracle.github.io/odpi/doc/installation.html#linux

  8. html 自定义属性的获取和应用

    在html 中,我们可以给元素设置自定义属性,格式:  data-属性="属性值",可以设置一个,也可以设置多个 1.获取元素属性的常规方法:直接获取元素,然后使用getAttri ...

  9. php 分页实现 和 php 大文件上传失败的处理方式

    1. php分页: 要想做php的分页,首先要弄清楚要什么样的分页,关系到哪些参数,参数之间怎么关联: 目标分页效果如下: 分析: 1.主要涉及两个参数:一个是当前输出页面的页码,用变量$p 表示,另 ...

  10. sql server 2008 数据库可疑的解决步骤

    备份并新建同名数据库,并替换原数据文件 1 把问题数据库备份后直接删除 停掉SQLSERVER服务,把服务器上出问题的数据库, 假设名称为 test的数据库文件及日志文件备份到其他目录,然后直接将其删 ...