由于不能科学的上网。网上看资料装上了这个插件,装的过程有点坑。记录一下,希望能帮到和我一样的新手。

1.第一步,克隆下远程仓库的东西。

桌面右键,git-bash。然后输入:

git clone https://github.com/facebook/react-devtools.git

这个过程耗时比较长。

结果:

2.第二步, 进入到react-devtools目录,安装依赖

cd react-devtools
npm install

过程耗时长。安装碰上的情况。如下:

admin@battle MINGW64 ~/Desktop
$ cd react-devtools admin@battle MINGW64 ~/Desktop/react-devtools (master)
$ npm install
npm WARN deprecated clipboard-js@0.3.: Please migrate to https://github.com/lgarron/clipboard-polyfill
npm WARN deprecated core-js@1.2.: core-js@<2.6. is no longer maintained. Please, upgrade to core-js@ or at least to actual version of core-js@.
npm WARN deprecated gulp-util@3.0.: gulp-util is deprecated - replace it, following the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5
npm WARN deprecated cross-spawn-async@2.2.: cross-spawn no longer requires a build toolchain, use it instead
npm WARN deprecated firefox-client@0.3.: Package no longer supported. Contact support@npmjs.com for more info.
npm WARN deprecated circular-json@0.3.: CircularJSON is in maintenance only, flatted is its successor.
npm WARN deprecated js-select@0.6.: Package no longer supported. Contact support@npmjs.com for more info.
npm WARN deprecated hawk@3.1.: This module moved to @hapi/hawk. Please make sure to switch over as this distribution is no longer supported and may contain bugs and critical security issues.
npm WARN deprecated left-pad@1.3.: use String.prototype.padStart()
npm WARN deprecated joi@6.10.: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
npm WARN deprecated sntp@1.0.: This module moved to @hapi/sntp. Please make sure to switch over as this distribution is no longer supported and may contain bugs and critical security issues.
npm WARN deprecated cryptiles@2.0.: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
npm WARN deprecated topo@1.1.: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
npm WARN deprecated hoek@2.16.: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
npm WARN deprecated boom@2.10.: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial). > dtrace-provider@0.8. install C:\Users\admin\Desktop\react-devtools\node_modules\dtrace-provider
> node-gyp rebuild || node suppress-error.js C:\Users\admin\Desktop\react-devtools\node_modules\dtrace-provider>if not defined npm_config_node_gyp (node "C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin\\..\..\node_modules\node-gyp\bin\node-gyp.js" rebuild ) else (node "C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js" rebuild )
gyp ERR! configure error
gyp ERR! stack Error: Can't find Python executable "python", you can set the PYTHON env variable.
gyp ERR! stack at PythonFinder.failNoPython (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\configure.js::)
gyp ERR! stack at PythonFinder.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\configure.js::)
gyp ERR! stack at C:\Program Files\nodejs\node_modules\npm\node_modules\graceful-fs\polyfills.js::
gyp ERR! stack at FSReqWrap.oncomplete (fs.js::)
gyp ERR! System Windows_NT 10.0.
gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild"
gyp ERR! cwd C:\Users\admin\Desktop\react-devtools\node_modules\dtrace-provider
gyp ERR! node -v v10.15.3
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok > command-join@2.0. postinstall C:\Users\admin\Desktop\react-devtools\node_modules\command-join
> npx -p @seangenabe/tnx tnx || exit npx: 安装成功,用时 3.104 秒 Thanks for installing command-join! If you like this package, be sure to star its repo,
and please consider donating: https://seangenabe.netlify.com/donate > core-js@2.6. postinstall C:\Users\admin\Desktop\react-devtools\node_modules\core-js
> node scripts/postinstall || echo "ignore" Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library! The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -) > core-js-pure@3.1. postinstall C:\Users\admin\Desktop\react-devtools\node_modules\core-js-pure
> node scripts/postinstall || echo "ignore" Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library! The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -) > spawn-sync@1.0. postinstall C:\Users\admin\Desktop\react-devtools\node_modules\spawn-sync
> node postinstall npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN ajv-errors@1.0. requires a peer of ajv@>=5.0. but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2. (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) added packages from contributors and audited packages in .133s
found vulnerabilities ( low, moderate, high, critical)
run `npm audit fix` to fix them, or `npm audit` for details

直接忽略了。。继续下一步。

3.打包一份扩展程序。如下:

npm run build:extension:chrome

结果:

这个时候就可以在react-devtools目录下找到shells--chrome--build--unpacked文件夹。

4.打开chrome,地址栏输出:chrome://extensions/。 左上角点击加载已解压的扩展程序。把unpacked文件夹放进去了。

大功告成,右上角多了个react图标。

npm 安装 react-devtools的更多相关文章

  1. npm 安装React Devtools调试工具

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

  2. React安装React Devtools调试工具

    在运行一个React项目的时候浏览器控制台会提醒你去安装react devtools调试工具. Download the React DevTools for a better development ...

  3. 【问题与解决】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 ...

  4. npm安装cnpm、vue、react

    安装cnpmnpm install -g cnpm --registry=https://registry.npm.taobao.org 安装vuecnpm install --global vue- ...

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

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

  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. 利用npm安装/删除/发布/更新/撤销发布包 --社会我npm哥,好用话不多

      一.什么是npm? npm是javascript的包管理工具,是前端模块化下的一个标志性产物 简单地地说,就是通过npm下载模块,复用已有的代码,提高工作效率   1.从社区的角度:把针对某一特定 ...

  9. React DevTools

    [React DevTools] 在应用商店搜索安装.F12可打开.如果是react应用,在最右排会显示react标签. 参考:https://github.com/facebook/react-de ...

  10. 【npm】利用npm安装/删除/发布/更新/撤销发布包

      什么是npm? npm是javascript的包管理工具,是前端模块化下的一个标志性产物 简单地地说,就是通过npm下载模块,复用已有的代码,提高工作效率   1.从社区的角度:把针对某一特定问题 ...

随机推荐

  1. c# 通过json.net中的JsonConverter进行自定义序列化与反序列化

    https://www.cnblogs.com/yijiayi/p/10051284.html 相信大家在工作中会经常遇见对json进行序列化与反序列化吧,但通常的序列化与反序列化中的json结构与c ...

  2. iostat vmstat

    iostat https://linux.die.net/man/1/iostat https://www.geeksforgeeks.org/iostat-command-in-linux-with ...

  3. Sword C语言原子操作

    /* gcc内置原子操作 */ #include <stdio.h> /* 知识补充: gcc 4.1.2版本之后,对X86或X86_64支持内置原子操作.即不需要引入第三方库(如pthr ...

  4. 【翻译】Flink Table Api & SQL —Streaming 概念 ——在持续查询中 Join

    本文翻译自官网 :  Joins in Continuous Queries   https://ci.apache.org/projects/flink/flink-docs-release-1.9 ...

  5. packaged_task

    /** @file packaged_task.cpp * @note * @brief * @author * @date 2019-8-15 * @note * @history * @warni ...

  6. [LeetCode] 254. Factor Combinations 因子组合

    Numbers can be regarded as product of its factors. For example, 8 = 2 x 2 x 2; = 2 x 4. Write a func ...

  7. 【剑指offer】面试题 31. 栈的压入、弹出序列

    面试题 31. 栈的压入.弹出序列 NowCoder LeetCode 题目描述 输入两个整数序列,第一个序列表示栈的压入顺序,请判断第二个序列是否为该栈的弹出顺序.假设压入栈的所有数字均不相等.例如 ...

  8. Callable+Future

    Future提供了三种功能: 1)判断任务是否完成: 2)能够中断任务: 3)能够获取任务执行结果 package com.moreas; import java.util.concurrent.Ca ...

  9. python_scratch教程:绘制荧光圈教程

    在演唱会中,出现最多的就是荧光棒,很多粉丝也都会举着荧光棒为自己的爱豆加油,当然也会有一些人用的荧光圈,为此南京小码王scratch培训机构,就想到了和小朋友一起绘制荧光圈,现在我们就一起来看看吧! ...

  10. Django重新添加字段然后迁移给定默认值依然迁移不生效

    1.将对应app下的migrations文件夹下面的除了__init__.py文件外全部删除 2.delete from django_migrations where app='当前模型的app名称 ...