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. Hdu 4622 Reincarnation(后缀自动机）

    /* 字符串长度较小, 可以离线或者直接与处理所有区间的答案 动态加入点的时候, 因为对于其他点的parent构造要么没有影响, 要么就是在两个节点之间塞入一个点, 对于minmax的贡献没有改变 所 ...

  2. python连接RabbitMQ

    安装PIP wget "https://pypi.python.org/packages/source/p/pip/pip-1.5.4.tar.gz tar -xzvf pip-.tar.g ...

  3. 零基础学习python_类和对象（36-40课）

    今天我们开始学习面向对象的知识咯,之前我对面向对象也学的懵懵的,因为感觉知道好像又不是特别清楚,接下来我们一起来学习类和对象吧.零基础的课程我都是看小甲鱼的视频学的,没基础的可以去这个网址下载视频学习 ...

  4. 检查Linux系统cpu--内存---磁盘的脚本

    花了一天写了三条命令分别检查cpu,内存,磁盘 [root@localhost ~]# cat cpu_mem_disk.sh #!/bin/sh # echo "1 检查cpu利用率--- ...

  5. day6--面向对象初识

    一面向过程与面向对象 面向过程: 流水线式的思维,顺着流程进行下去,类似于代码的堆叠,重视步骤 优点:不需要考虑太多东西,想到一个功能就写一个功能,堆叠代码 缺点:过程往往是先后执行的,要想变换功能或 ...

  6. Java可视操作界面例子

    package rom; import java.lang.*; import java.awt.*; import java.awt.event.ActionEvent; import java.a ...

  7. 20165205 2017-2018-2 《Java程序设计》实验四 Android程序设计

    20165205 2017-2018-2 <Java程序设计>实验四 Android程序设计 实验内容 实验四 Android程序设计-1 Android Stuidio的安装测试: 参考 ...

  8. 读O目标KR关键结果的一些个人理解

    O目标KR关键结果 为了完成一个目标,需要完成几个或者多个关键的结果来验证. 书的开头写的是一些理论,有印象的东西还是从汉娜和杰克的公司来说,卖茶叶的公司.联系着茶农和可以产生消费的餐馆和供应商,在未 ...

  9. python库：bs4，BeautifulSoup库、Requests库

    Beautiful Soup https://www.crummy.com/software/BeautifulSoup/bs4/doc.zh/ Beautiful Soup 4.2.0 文档 htt ...

  10. Maven项目的生命周期

    Maven中存在三套生命周期,每一套生命周期相互独立,互不影响.在一套生命周期内,执行后面的命令前面的命令会自动执行. CleanLifeCycle:清理生命周期 mvn clean DefaultL ...