React开发调试工具--react-developer-tools
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的更多相关文章
- react 工程起步 安装chrome 开发调试工具 react developer tools 及初建一个react 项目...
1.安装react 开发工具 1.下载 chrome react developer tools 下载地址:https://pan.baidu.com/s/1eSZsXDC 下载好是 ...
- 7. react 基础 - React Developer Tools 的安装 及 使用
1. 安装 react 开发调试工具 React Developer Tools 打开 chrome 浏览器访问 chrome://extensions/ 点击右上角的 拓展程序 -> 打开 c ...
- React - React Developer Tools开发者工具的安装与使用(Chrome调试插件)
原文地址:http://www.cnplugins.com/zhuanti/how-to-use-react-tools.html 虽然我们曾经在React开发者工具的基础介绍里面有概括性的介绍过Re ...
- 你不知道的React Developer Tools,20 分钟带你掌握 9 个 React 组件调试技巧
壹 ❀ 引 React Developer Tools 是 React 官方推出的开发者插件,可以毫不夸张的说,它在我们日常组件开发中,对于组件属性以及文件定位,props 排查等等场景都扮演者至关重 ...
- React Developer Tools 安装小提示
1,在google市场里边,安装React Developer Tools之后,发现是开启的,但是按下F12后,并没有发现react选项 2,后来通过查资料,发现必须是运行react项目的时候,才出现 ...
- 浏览器开发调试工具的秘密 - Secrets of the Browser Developer Tools
来源:GBin1.com 如果你是一个前端开发人员的话,正确的了解和使用浏览器开发工具是一个必须的技能. Secrets of the Browser Developer Tools是一个帮助大家了解 ...
- 【React】react&&redux调试工具
一.React调试工具 1.安装 react-developer-tools,在chrome应用商店进行下载,因为网络限制原因,我们可以使用火狐浏览器进行安装下载 a.打开火狐浏览器的附加组件 b.搜 ...
- 掌握Chrome Developer Tools:下一阶段前端开发技术
Tips 原文作者:Ben Edelstein 原文地址:Mastering Chrome Developer Tools: Next Level Front-End Development Tech ...
- 1. React介绍 React开发环境搭建 React第一个程序
什么是 React React 是 Facebook 发布的 JavaScript 库,以其高性能和独特的设计理念受到了广泛关注. React的开发背景 Faceboo ...
随机推荐
- 如何通过权限控制EXP导出指定的表
今天一客户朋友咨询一个Oracle数据库用户EXP权限控制的问题,问我有没有办法可以解决.问题是这样的: 目前他们那边有外面的开发公司人员在核心系统做开发,考虑到系统数据的敏感性,给他们建了一个数据库 ...
- linux进程端口防火墙
进程端口: 1.netstat –apn :查看所有的进程和端口使用情况 2.查看8080端口是否被占用 [root@localhost bin]# lsof -i:8080 3.查看防火墙开放的端口 ...
- 微信小程序自定义微信客服按钮
微信小程序官方api中提到的微信客服,是一个固定的组件,图标样式固定,大小最多27px 很明显这个是不能满足我们各种奇葩需求的.下面提供一个野蛮的自定义方法. 比如做一个这样的按钮: 图标用自定义的, ...
- 剑指offer(一):二维数组中的查找
说明: 1.本系列是根据<剑指Offer>这个系列做的一个小笔记. 2.直接动力是因为师兄师姐找工作很难,而且机械出生的我面试算法更难. 3.刚开始准备刷LeetCode.LintCode ...
- 操作笔记:tomcat在正式环境的常见问题和idea的远程调试
1,一台服务器有两个容器,比如:jetty,tomcat. 出现问题: jetty启动的时候,tomcat就不能启动了. 此时,需要修改tomcat的配置文件:servler.xml <?xml ...
- python ftp文件夹文件递归上传推送
- spark historyserver 页面反应很慢 jvm堆调参
我们的spark historyserver 最近页面打开很慢 jstat -gcutil pid 1000 发现full gc 相当严重 查看堆大小,发现默认堆1G,打算修改到4G jps -lvm ...
- webform之Repeater控件
一.Repeater控件 数据循环编辑 1.repeater包括五大模板: (1)HeaderTemplate:标题模板,对开头进行编辑,只执行一次 (2)FooterTemplate:页尾结束模板, ...
- PHP截取字符串最后一位进行替换
$image_path = 'http://www.baidu.com/1'; $str = preg_replace('#.$#i', '0', $image_path);第二个参数要替换的内容 把 ...
- 使用STM32CubeMX生成待机开关功能
使用的开发板为MINISTM32 通过长按数秒KEY_UP 按键开机,并且通过 DS1 的闪烁指示程序已经开始运行,再次长按该键,则进入待机模式, DS1 关闭,程序停止运行.利用STM32的stan ...