npm 安装 react-devtools

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

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.6: Please migrate to https://github.com/lgarron/clipboard-polyfill
npm WARN deprecated core-js@1.2.7: core-js@<2.6.8 is no longer maintained. Please, upgrade to core-js@3 or at least to actual version of core-js@2.
npm WARN deprecated gulp-util@3.0.8: 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.5: cross-spawn no longer requires a build toolchain, use it instead
npm WARN deprecated firefox-client@0.3.0: Package no longer supported. Contact support@npmjs.com for more info.
npm WARN deprecated circular-json@0.3.3: CircularJSON is in maintenance only, flatted is its successor.
npm WARN deprecated js-select@0.6.0: Package no longer supported. Contact support@npmjs.com for more info.
npm WARN deprecated hawk@3.1.3: 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.0: use String.prototype.padStart()
npm WARN deprecated joi@6.10.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 sntp@1.0.9: 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.5: 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.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 hoek@2.16.3: 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.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).

> dtrace-provider@0.8.7 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:484:19)
gyp ERR! stack     at PythonFinder.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\configure.js:509:16)
gyp ERR! stack     at C:\Program Files\nodejs\node_modules\npm\node_modules\graceful-fs\polyfills.js:284:29
gyp ERR! stack     at FSReqWrap.oncomplete (fs.js:153:21)
gyp ERR! System Windows_NT 10.0.17134
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.1 postinstall C:\Users\admin\Desktop\react-devtools\node_modules\command-join
> npx -p @seangenabe/tnx tnx || exit 0

npx: 1 安装成功,用时 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.9 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.4 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.15 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.1 requires a peer of ajv@>=5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 1781 packages from 819 contributors and audited 32379 packages in 131.133s
found 76 vulnerabilities (66 low, 7 moderate, 2 high, 1 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图标。

 

转载于:https://www.cnblogs.com/caimuguodexiaohongmao/p/11295597.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 1. 首先,你需要在你的项目中安装 React 开发工具。你可以通过运行以下命令来安装它: ``` npm install -g react-devtools ``` 2. 安装完成后,你可以通过以下命令来启动 React 开发工具: ``` react-devtools ``` 3. 如果你使用的是 Chrome 浏览器,你还可以通过以下步骤来安装 React 开发工具的 Chrome 扩展程序: - 打开 Chrome 浏览器,进入 Chrome 网上应用店。 - 在搜索框中输入“React Developer Tools”。 - 点击“添加至 Chrome”按钮,等待安装完成。 - 安装完成后,你可以在 Chrome 浏览器的开发者工具中找到 React 开发工具的选项卡。 4. 安装完成后,你可以在你的 React 应用程序中使用 React 开发工具来调试和分析你的组件。 ### 回答2: React DevToolsReact官方推出的调试工具,它可以帮助开发人员更方便地调试React应用程序。安装React DevTools非常简单,下面是安装步骤。 第一步:准备工作 首先,我们需要在项目中安装React,由于React是通过npm包被安装,因此需要在项目中运行以下命令进行安装: ``` npm install react ``` 接着,我们需要在项目中安装React DevToolsReact DevTools是一个Chrome浏览器的扩展程序,因此需要在Chrome浏览器中进行安装。 第二步:安装React DevTools 在Chrome浏览器中搜索React DevTools,然后找到它的官方扩展程序页面。在页面中,我们可以看到添加到Chrome的按钮。点击这个按钮,Chrome浏览器就会自动下载并安装React DevTools安装完成后,我们可以在Chrome浏览器的扩展程序中看到React DevTools的图标。这个图标就是我们调试React应用程序的入口。 第三步:调试React应用程序 要使用React DevTools调试React应用程序,我们需要先启动React应用程序。在应用程序中,点击浏览器地址栏左侧的React图标,就可以打开React DevTools面板。 在面板中,我们可以看到所有React组件的结构和状态。我们可以查看组件的props、state、context、refs,也可以在控制台中进行组件的调试。 总之,使用React DevTools可以给React开发带来很大的便利,可以帮助开发人员更好地调试React应用程序。 ### 回答3: React DevToolsReact开发中重要的调试工具之一,它能够帮助开发者快速诊断和调试React代码。在本篇文章中,我们将会提供React DevTools安装教程,帮助大家快速上手。 安装流程: 1. 打开Chrome浏览器 2. 进入Chrome Web Store,搜索React DevTools 3. 安装React DevTools插件 4. 安装完成后,在Chrome浏览器工具栏中找到“React DevTools”图标。 5. 点击“React DevTools”图标,打开开发者工具。 安装完成后,我们可以采用以下步骤测试是否成功安装React DevTools: 1. 打开一个React应用程序,例如一个React页面。 2. 打开Chrome浏览器开发者工具 3. 点击“React”选项卡,在“React DevTools”中可以看到React组件的树形结构,并可以针对每个组件进行诊断和调试。 React DevTools的优点: 1.可视化组件树形结构,快速定位React组件的问题。 2.元素检查器,可快速查看组件的属性值。 3. 支持多种React版本,包括React Native。 4. 支持调试React Hoc、Context、组件性能等问题。 5. 增强了调试效率,提高了工作效率。 总结: React DevTools是一个非常强大的React调试工具,为React开发提供了很大的便利性。我们可以通过以上步骤轻松安装React DevTools,并在React开发中快速诊断和调试React代码。同时,我们也需要注意安全性,只在开发阶段安装使用,不要滥用浏览器插件,避免数据泄露。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值