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. [TJOI2015]弦论(后缀自动机)

    /* 一道在树上乱搞的题目 建立出parent树来, 然后就能搞出每个节点往后能扩展出几个串, 至于位置不同算同一个的话就强制让right集合大小为1即可 然后在树上类比权值线段树找第k大26分统计一 ...

  2. python开发学习(元组、字符串、列表、字典深入)

    https://www.cnblogs.com/songqingbo/p/5129116.html(转载学习)

  3. Vue中 等待DOM或者数据完成 在执行 --this.$nextTick()

    虽然 Vue.js 通常鼓励开发人员沿着“数据驱动”的方式思考,避免直接接触 DOM,但是有时我们确实要这么做.比如一个新闻滚动的列表项.如果在这里需要操作dom, 应该是等待 Vue 完成更新 DO ...

  4. orika core工具对实体（Bean）进行深度拷贝

    1. 在pom.xml中添加orika core依赖: <!-- https://mvnrepository.com/artifact/ma.glasnost.orika/orika-core ...

  5. JVM总结-Java语法糖与Java编译器

    自动装箱与自动拆箱 首先要提到的便是 Java 的自动装箱(auto-boxing)和自动拆箱(auto-unboxing). 我们知道,Java 语言拥有 8 个基本类型,每个基本类型都有对应的包装 ...

  6. spring事务传播实现源码分析

    转载. https://blog.csdn.net/qpfjalzm123/article/details/83717367 本文只是对spring事务传播实现的流程进行简单的分析,如有不对之处请指出 ...

  7. [Unity动画]04.Avatar Mask

    参考链接: https://www.cnblogs.com/hammerc/p/4832637.html Avatar Mask主要用于动画层融合.例如说,边跑边举起东西,这个实际上就是下半身播放跑步 ...

  8. Django之视图Views

    视图 视图接受Web请求并且返回Web响应 视图就是一个python函数,被定义在views.py中 响应可以是一张网页的HTML内容,一个重定向,一个404错误等等 响应处理过程如下图: URLco ...

  9. 57.纯 CSS 创作一双黑暗中的眼睛

    原文地址:https://segmentfault.com/a/1190000015327725 感想:原来边框还能这样玩-->做会眨眼的眼睛 HTML code: <div class= ...

  10. 《GPU高性能编程CUDA实战》第三章 CUDA设备相关

    ▶ 这章介绍了与CUDA设备相关的参数,并给出了了若干用于查询参数的函数. ● 代码(已合并) #include <stdio.h> #include "cuda_runtime ...