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. 查看计算机CPU、内存使用情况

    Shift + Ctrl + Esc,打开Windows任务管理器,点击性能,如图: 可以清楚的看到整台机子的CPU.内存使用情况,其中CPU使用记录下有8个小窗口,因为博主的CPU是8核的,讲讲CP ...

  2. Splunk和ElasticSearch深度对比解析(转)

    转载自:http://www.sohu.com/a/154105465_354963 随着Splunk越来越被大家熟知和认可,现在市面上也不断涌各种同类产品,作为大数据搜索界的翘楚Splunk和Ela ...

  3. vuejs实现瀑布流布局（三）

    前面写过vuejs实现的瀑布流布局,<vuejs实现瀑布流布局(一)>和<vuejs实现瀑布流布局(二)>也确实实现了瀑布流布局,但是这个是基于SUI-Mobile实现的无限滚 ...

  4. oracle 表或视图不存在

    导入导出时,会自动表名自动加上了““双引号需要将表名改一下就可以了 alter table "oldtablename" rename to newtableName;

  5. srbac配置

    Yii框架中安装srbac扩展方法 以前自己安装过一次srbac,遇到很多问题,虽然都解决了,可是一时偷懒,没做记录. 再次安装时,还是遇到了点麻烦,所以这一还是记下来,以备不时之需. 首先,下载sr ...

  6. Linux 虚拟机的安全加固建议

    1.修改用户的密码口令策略:   [root@centos-73-1 chpaadmin]# cat /etc/login.defs |grep -i pass # passwd command) s ...

  7. 链接（跳转）<router-link> 和 路由实例Router

    <router-link>和<router-link>传入的对象参数中包含path路径.name命名路由.params路径参数.query ?查询,并且如果提供了 path,p ...

  8. javascript,移动划过超链接鼠标变手型

    用css控制鼠标样式的语法如下:<span style="cursor:*">文本或其它页面元素</span>把 * 换成如下15个效果的一种: 下面是对这 ...

  9. JS 相等判断 / 类型判断

    相等判断 JavaScript提供三种不同的值比较操作: 严格相等 ("triple equals" 或 "identity"),使用 === , 宽松相等 ( ...

  10. nosql数据库：mongodb,redis,memcached,其优缺点和使用应用场景

    1.mongodb (1)是文档型的非关系型数据库,使用bson结构.其优势在于查询功能比较强大,能存储海量数据,缺点是比较消耗内存. (2)一般可以用来存放评论等半结构化数据,支持二级索引. 适合存 ...