在运行一个React项目的时候浏览器控制台会提醒你去安装react devtools调试工具。

Download the React DevTools for a better development experience: https://fb.me/react-devtools

看到浏览器控制台这种说明,很是不舒服,于是就安装了react devtools浏览器扩展插件。

https://fb.me/react-devtools 此链接打不开,应该需要FQ。

所以还是直接从github上面下载:https://github.com/facebook/react-devtools

1.git上下载react-devtools文件到本地: git clone https://github.com/facebook/react-devtools

2.进入到react-devtools文件夹,用npm安装依赖。

cd react-devtools

npm --registry https://registry.npm.taobao.org install

..............................华丽的省略号................................

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN ajv-errors@1.0.1 requires a peer of ajv@>=5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN acorn-dynamic-import@4.0.0 requires a peer of acorn@^6.0.0 but none is installed. You must install peer dependencies yourself.
added 1833 packages from 819 contributors in 38.076s   //success

3.安装依赖成功后,打包程序扩展;npm run build:extension:chrome

出现这个就说明安装成功了。

并且会在你的项目中生成一个新的文件夹:react-project⁩ ▸ ⁨react⁩ ▸ ⁨react-devtools⁩ ▸ ⁨shells⁩ ▸ ⁨chrome⁩ ▸ ⁨build⁩

4.打开Chrome扩展程序chrome://extensions/,加载已解压的扩展程序,选择第三部生成的unpacked文件夹。这时就会添加一个新的扩展程序react-devtools,并在你的浏览器右上角会有一个react标志,代表安装成功。

React安装React Devtools调试工具的更多相关文章

  1. Vue安装Vue Devtools调试工具提示 Error: Cannot find module '@vue-devtools/build-tools' 解决办法

    我看网络上面安装Vue Devtools 调试工具的步骤几乎都是按照文章链接里的步骤进行安装, 但是在最终执行编译命令的时候 :npm run build ,提示如下错误: 尝试了很多方法,都不能解决 ...

  2. npm 安装React Devtools调试工具

    有时候没有***工具时,怎么安装React DevTool, 其一直接搜索到Chrome的插件安装即可. 其二, 可以通过下载github上的react-devtools, 然后打包,最后导入chro ...

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

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

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

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

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

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

  6. 史上最全Windows版本搭建安装React Native环境配置

    史上最全Windows版本搭建安装React Native环境配置 配置过React Native 环境的都知道,在Windows React Native环境配置有很多坑要跳,为了帮助新手快速无误的 ...

  7. 史上最详细Windows版本搭建安装React Native环境配置 转载,比官网的靠谱亲测可用

    史上最详细Windows版本搭建安装React Native环境配置   2016/01/29 |  React Native技术文章 |  Sky丶清|  95条评论 |  33530 views ...

  8. 【问题与解决】Mac OS通过 npm 安装 React Native 报错(checkPermissions Missing write access to /usr/local/lib/node_modules)

    报错情况: 当Mac OS通过 npm 安装 React Native 报错,警告文字为:checkPermissions Missing write access to /usr/local/lib ...

  9. MacOS安装react。问题 -- npm全局包的权限问题

    网上的教程有好多,在这里不一一列举,我只介绍我今天安装成功的步骤 首先,在安装react之前要先配置好node 1.安装node 在这里下载node的安装包https://nodejs.org/en/ ...

随机推荐

  1. 20145207《Java程序设计》实验二(Java面向对象程序设计)实验报告

    <Java程序设计>实验二(Java面向对象程序设计)实验报告 目录 改变 Java面向对象程序设计实验要求 实验成果 课后思考 改变 看了下之前实验二的整体,很搞笑,大图+代码,没了.. ...

  2. Python中的对象引用、浅拷贝与深拷贝

    最近项目中遇到一个Python浅拷贝机制引起的bug,由于对于Python中对象引用.赋值.浅拷贝/深拷贝机制没有足够的认识,导致调试了很久才发现问题,这里简单记录一下相关概念. 在Python的设计 ...

  3. 【Todo】找出共同好友 & Spark & Hadoop面试题

    找了这篇文章看了一下面试题<Spark 和hadoop的一些面试题(准备)> http://blog.csdn.net/qiezikuaichuan/article/details/515 ...

  4. 【LG3236】[HNOI2014]画框

    [LG3236][HNOI2014]画框 题面 洛谷 题解 和这题一模一样. 将最小生成树换成\(KM\)即可. 关于复杂度,因为决策点肯定在凸包上,且\(n\)凸包的期望点数为\(\sqrt {\l ...

  5. URL特别字符处理

    import time,os,datetimeimport urllib3utcNow = datetime.datetime.utcnow()fifteen = utcNow +datetime.t ...

  6. 验证码示例代码演示——以php为例

    运行 · 修改index.php(图片验证码的生成示例) [html] view plain copy initNECaptcha({ captchaId: 'YOUR_CAPTCHA_ID', // ...

  7. Codeforces Round #503 (by SIS, Div. 2) D. The hat

    有图可以直观发现,如果一开始的pair(1,1+n/2)和pair(x, x+n/2)大小关系不同 那么中间必然存在一个答案 简单总结就是大小关系不同,中间就有答案 所以就可以使用二分 #includ ...

  8. windows python MySQL-python安装过程

    问题表述: pip install MySQL-python==1.2.5 出现如下报错: C:\Users\Administrator\AppData\Local\Programs\Common\M ...

  9. .NET导出Excel之NPOI

    前段时间研究过微软的Excel导出.table输出Excel,而它们也存在一些弊端: 1.对于微软的Excel导出存在一些弊端,如:需要安装Office软件.速度问题: 2.table输出Excel在 ...

  10. 【win10系统问题】远程桌面登录一次后,第二次登录看不到用户名和密码输入框

    [win10系统远程桌面登录问题] 远程桌面登录某服务器一次后,第二次登录看不到用户名和密码输入框 [解决方法] 在注册表里找到该路径下的远程服务器ip,删除即可: HKEY_CURRENT_USER ...