Skip to content

Commit 3c7837a

Browse files
author
Brian Vaughn
authored
React DevTools v4 blog post (#2199)
1 parent af4db1d commit 3c7837a

File tree

3 files changed

+76
-0
lines changed

3 files changed

+76
-0
lines changed
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
---
2+
title: "Introducing the New React DevTools"
3+
author: [bvaughn]
4+
---
5+
We are excited to announce a new release of the React Developer Tools, available today in Chrome, Firefox, and (Chromium) Edge!
6+
7+
## What's changed?
8+
9+
A lot has changed in version 4!
10+
At a high level, this new version should offer significant performance gains and an improved navigation experience.
11+
It also offers full support for React Hooks, including inspecting nested objects.
12+
13+
![DevTools version 4 screenshot](../images/blog/devtools-v4-screenshot.png)
14+
15+
[Visit the interactive tutorial](https://react-devtools-tutorial.now.sh/) to try out the new version or [see the changelog](https://github.com/facebook/react/blob/master/packages/react-devtools/CHANGELOG.md#400-august-15-2019) for demo videos and more details.
16+
17+
## Which versions of React are supported?
18+
19+
**`react-dom`**
20+
21+
* `0`-`14.x`: Not supported
22+
* `15.x`: Supported (except for the new component filters feature)
23+
* `16.x`: Supported
24+
25+
**`react-native`**
26+
* `0`-`0.61`: Not supported
27+
* `0.62`: Supported
28+
29+
## How do I get the new DevTools?
30+
31+
React DevTools is available as an extension for [Chrome](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) and [Firefox](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/).
32+
If you have already installed the extension, it should update automatically within the next couple of hours.
33+
34+
If you use the standalone shell (e.g. in React Native or Safari), you can install the new version [from NPM](https://www.npmjs.com/package/react-devtools):
35+
36+
```shell
37+
npm install -g react-devtools@^4
38+
```
39+
40+
## Where did all of the DOM elements go?
41+
42+
The new DevTools provides a way to filter components from the tree to make it easier to navigate deeply nested hierarchies.
43+
Host nodes (e.g. HTML `<div>`, React Native `<View>`) are *hidden by default*, but this filter can be disabled:
44+
45+
![DevTools component filters](../images/blog/devtools-component-filters.gif)
46+
47+
## How do I get the old version back?
48+
49+
If you are working with React Native version 60 (or older) you can install the previous release of DevTools from NPM:
50+
51+
```shell
52+
npm install --dev react-devtools@^3
53+
```
54+
55+
For older versions of React DOM (v0.14 or earlier) you will need to build the extension from source:
56+
57+
```shell
58+
# Checkout the extension source
59+
git clone https://github.com/facebook/react-devtools
60+
61+
cd react-devtools
62+
63+
# Install dependencies and build the unpacked extension
64+
yarn install
65+
yarn build:extension
66+
67+
# Follow the on-screen instructions to complete installation
68+
```
69+
70+
## Thank you!
71+
72+
We'd like to thank everyone who tested the early release of DevTools version 4.
73+
Your feedback helped improve this initial release significantly.
74+
75+
We still have many exciting features planned and feedback is always welcome!
76+
Please feel free to open a [GitHub issue](https://github.com/facebook/react/issues/new?labels=Component:%20Developer%20Tools) or tag [@reactjs on Twitter](https://twitter.com/reactjs).
Loading
124 KB
Loading

0 commit comments

Comments
 (0)