By Brian Vaughn

Translation: Crazy geek

Reactjs.org/blog/2019/0…

Reproduced without permission

We’re excited to announce a new version of the React developer tool, now available in Chrome, Firefox, and Chromium Edge!

What has changed?

A lot has changed in version 4! At a high level, this new release should provide significant performance improvements and improved navigation experience. It also provides full support for React Hooks, including checking for nested objects.

Visit the interactive tutorial to try out the new version or see the demo video and more details in the Change Log.

What versions of React are supported?

react-dom

  • 0–14.x: don’t support
  • 15.x: Supported (except new component filter function)
  • 16.xSupport:

react-native

  • 0–0.61: don’t support
  • 0.62: will be supported (when 0.62 is released)

How do I get a new DevTools?

React DevTools is available as an extension for Chrome and Firefox. If you already have the extension installed, it will automatically update within the next few hours.

If you use a standalone shell (e.g. in React Native or Safari), you can install the new version from NPM:

npm install -g react-devtools@^4
Copy the code

Where do all the DOM elements go?

The new DevTools provides a way to filter components from the tree to make it easier to navigate nested hierarchies. The primary node (e.g. HTML

, React Native

) is hidden by default, but you can disable this filter:

How do I get older versions?

If you use React Native version 60 (or earlier), you can install previous versions of DevTools from NPM:

npm install --dev react-devtools@^3
Copy the code

For older versions of the React DOM (V 0.14 or earlier), you need to build extensions from source code:

# 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
Copy the code

Thank you very much!

We would like to thank everyone who tested early versions of DevTools V 4. Your feedback helped to significantly improve this initial release.

We still plan to develop a lot of exciting features, feedback is welcome! Please open [GitHub Issue]github.com/facebook/re… Tools) or follow @reactjs on Twitter.

Welcome to pay attention to the front end public number: front end pioneer, receive front-end engineering practical toolkit.