[译]新版 React DevTools 简介

Posted 2021-04-26 印记中文

8 月 15 日，React 团队发布了最新版本的 React DevTools，全面支持了 React Hook，欢迎大家试用。

React 开发者工具发布了新版本，目前可以在 Chrome，Fireox 以及 （Chromium）Edge 中使用！

有哪些变化？

React DevTools v4 中发生了很多变化！站在高角度来看，此版本应该可以提供显著的性能提升以及得以改进的导航体验。它还对 React Hook 进行了全面地支持，包括检查嵌套对象。

访问互动教程试用新版本或参阅 changelog，以了解相关演示视频及更多信息。

支持哪些版本的 React？

react-dom

• 0- 14.x：不支持

• 15.x：支持（新的组件过滤特性除外）

• 16.x：支持

react-native

• 0- 0.61：不支持

• 0.62：将得到支持 （当 0.62 版本发布时）

如何获取最新的 DevTools

React DevTools 可作为 Chrome 和 Firefox 的扩展程序。如果你已安装了此扩展程序，则会在接下来的几小时内自动更新。

如果你使用了独立的 shell （例如：在 ReactNative 或 Safari 中），则可以通过 NPM 安装新版本：

 
   
   
 

  
    
    
  
npm install -g react-devtools@^4
 
   
   
 

所有 DOM 元素去了哪里？

新的 DevTools 提供了一种在树中过滤组件的方法，以便更轻松地展示嵌套的层次结构。宿主节点（例如：html <div>，React Native <View>）默认隐藏，但可以禁用此过滤器：

如何恢复旧版本？

如果你使用的是 React Native v0.60（或更早版本），则可以通过 NPM 安装旧版本的 DevTools：

 
   
   
 

  
    
    
  
npm install --dev react-devtools@^3
 
   
   
 

对于旧版本的 React DOM（v0.14 或更早版本），你需要通过源代码的方式构建此扩展程序：

 
   
   
 

  
    
    
  
# 查阅扩展源代码
  
    
    
  
git clone https://github.com/facebook/react-devtools
  
    
    
  


  
    
    
  
cd react-devtools
  
    
    
  


  
    
    
  
# 安装依赖并构建压缩扩展程序
  
    
    
  
yarn install
  
    
    
  
yarn build:extension
  
    
    
  


  
    
    
  
# 按照屏幕上的说明完成安装
 
   
   
 

如对文中内容有疑问，请阅读原文，提出建议。

关注印记中文