新的 React DevTools 发布!

2019-08-20 admin

作者:Brian Vaughn

翻译:疯狂的技术宅

https://reactjs.org/blog/2019…

未经允许严禁转载

我们很高兴地宣布推出 React 开发者工具的新版本,现在可以在 Chrome,Firefox和(Chromium)Edge 中使用!

有什么变化?

第 4 版中发生了很多变化!从较高的层面来看,这个新版本应该可以提供显着的性能提升和改进的导航体验。它还提供对 React Hooks 的完全支持,包括检查嵌套对象。

clipboard.png

访问互动教程试用新版本或参见更改日志中的相关演示视频和更多详细信息。

支持哪些版本的 React?

react-dom

  • 0-14.x: 不支持
  • 15.x: 支持(新组件过滤器功能除外)
  • 16.x: 支持

react-native

  • 0-0.61: 不支持
  • 0.62: 将要支持(当0.62发布时)

如何获得新的 DevTools?

React DevTools 可作为 ChromeFirefox 的扩展程序提供。如果你已经安装了扩展程序,则会在接下来的几个小时内自动更新。

如果你使用独立 shell(例如在 React Native 或 Safari 中),则可以从 NPM 安装新版本:

npm install -g react-devtools@^4

所有DOM元素都去了哪里?

新的 DevTools 提供了一种从树中过滤组件的方法,以便更轻松地导航嵌套的层次结构。主节点(例如HTML <div>,React Native <View>)默认是隐藏的,但可以禁用此过滤器:

devtools-component-filters-758ea5ee734afdda4cd0f6b43c74fbb4.gif

如何获取旧版本?

如果你使用的是 React Native 60 版本(或更早版本),则可以从 NPM 安装以前版本的 DevTools:

npm install --dev react-devtools@^3

对于旧版本的 React DOM(v 0.14 或更早版本),你需要从源代码构建扩展:

# Checkout the extension source
git clone https://github.com/facebook/react-devtools

cd react-devtools

# Install dependencies and build the unpacked extension
yarn install
yarn build:extension

# Follow the on-screen instructions to complete installation

谢谢!

我们要感谢所有测试 DevTools v 4 早期版本的人。你的反馈有助于显着改进此初始版本。

我们仍然计划开发许多令人兴奋的功能,欢迎提供反馈!请打开 [GitHub issue]https://github.com/facebook/r…:Developer Tools) 或关注 Twitter 上的 @reactjs


本文首发微信公众号:前端先锋

欢迎扫描二维码关注公众号,每天都给你推送新鲜的前端技术文章

欢迎扫描二维码关注公众号,每天都给你推送新鲜的前端技术文章

欢迎继续阅读本专栏其它高赞文章:


[转载]原文链接:https://segmentfault.com/a/1190000020130188

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-73054.html

文章标题:新的 React DevTools 发布!

相关文章
JavaScript中文网:即将发布JavaSCript原创教程
JavaScript中文网:即将发布JavaSCript原创教程 ...
2015-11-12
深入理解JavaScript的React框架的原理
如果你在两个月前问我对React的看法,我很可能这样说: 我的模板在哪里?javascript中的HTML在做些什么疯狂的事情?JSX开起来非常奇怪!快向它开火,消灭它吧! 那是因为我没有理解它. 我发誓,React 无疑是在正确的轨道...
2017-03-26
Yarn v0.24.2 发布,新型 Javascript 包管理器
Yarn 是 Facebook 贡献 Javascript 包管理器,用于替代现有的 npm 客户端或者其他兼容 npm 仓库的包管理工具。Yarn 保留了现有工作流的特性,优点是更快、更安全、更可靠。 特性: 极速:Yarn 缓存它下载...
2017-05-08
#react-native# Error: Command failed: gradlew.bat installDebug
这篇文章主要解决react-native中遇到的bug。 编译并运行 React Native 应用之前我们可以使用下面的方法清理gradlew 和之前的构建文件。 Error: Command failed: gradlew.bat in...
2019-02-28
vue下使用 pdf.js 预览 和 打印 PDF文档 兼容React
我使用前端开发框架是vue,有一个打印PDF文档的需求. 这个需求最开始是交给后台,但是明显不切实际, 因为后台服务器,根本就无法连接打印机. 所以这个预览加打印文档的需求就交到了前端, 开始我有想过直接打开pdf文件, 但事实上直接打开p...
2018-06-06
从开发到发布一款基于Vue2x的图片预览插件
先来看下Demo LiveDemo 关于开发Vue插件的几种方式 (具体请移步官网)Vue官网 MyPlugin.install = function (Vue, options) { &#x2F;&#x2F; 1\. 添加全局方法或...
2018-05-14
一个适合新手的react小demo
之前一直都是在用vue,这两个月换了个公司,不过现在又离职了,这里什么框架都用, vue、angular、react,一般公司都是选二项技术去开发已经就够了, 要不是vue+angular或是react+angular个人觉得用了vue还来...
2018-01-11
webpack入门+react环境配置
本文介绍了react.js使用webpack搭配环境的入门教程,分享给大家,也给自己做个笔记 如果你想直接上手开发,而跳过这些搭配环境的繁琐过程,推荐你使用官方的create-react-app命令 npm install -g creat...
2017-03-20
React水印组件,支持图片水印,文字水印
React水印组件,支持图片水印,文字水印。 安装 npm i --save react-watermark-module 用法 import ReactWatermark from &#x27;react-watermark-modul...
2018-01-09
Chrome 新的自动播放策略
最近看 来自 Chrome 团队在 IO 2018上的 分享 《Build awesome media experiences on the web》 。大概主要是说关于 音视频在 Chrome 上的更新。其中业务团队需要及时关注新的 自动...
2018-05-11
回到顶部