{"componentChunkName":"component---src-templates-blog-js","path":"/blog/2019/08/15/new-react-devtools.html","result":{"data":{"markdownRemark":{"html":"<p>We are excited to announce a new release of the React Developer Tools, available today in Chrome, Firefox, and (Chromium) Edge!</p>\n<h2 id=\"whats-changed\"><a href=\"#whats-changed\" aria-hidden class=\"anchor\"><svg aria-hidden=\"true\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>What’s changed? </h2>\n<p>A lot has changed in version 4!\nAt a high level, this new version should offer significant performance gains and an improved navigation experience.\nIt also offers full support for React Hooks, including inspecting nested objects.</p>\n<p>\n  <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/9552e88d7605ef4e547af89096a9225d/cd138/devtools-v4-screenshot.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n  \n  <span\n    class=\"gatsby-resp-image-wrapper\"\n    style=\"position: relative; display: block;  max-width: 840px; margin-left: auto; margin-right: auto;\"\n  >\n    <span\n      class=\"gatsby-resp-image-background-image\"\n      style=\"padding-bottom: 46.19047619047619%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAYAAAAywQxIAAAACXBIWXMAABYlAAAWJQFJUiTwAAABlElEQVQoz22SSU/DMBCF+0vYpGa3szhpFpqmSRegQFlEe0ZAEeIKBw5Q4Jc/xm5aQsXhaTz2+NObsVvc7cCyAzhOAMZDMCZg09p1I5iWB91wYZgeDIpyX4gMupdC5x1oVgDbSxCmJUTSh+OnaGmLJbSnb+w+fGKPdPD4pbT7sMTO3Qfp/TfK89s3iN4xbDeGZgsYLFJQi3IF1IczsPkT+PwZ/Owe48UrJosX7JfX0EYzaHTebqq8ghcXCqg7oZIEt8ktJ/cts1PCLk7B+udg3QnyyQ2KY4L5XRii949yBHGfgKmCSIdrqGy7ZfkZ+GAKd3QJXp7BFF06DKDVRU2tL7LgEFEyQNobwYtW9RK+apmKGM1EAllxAqOejbpct7RprY7SlR/1CDikvAOdxQq6AdoJtZ1WsKhIp2LN9BuOwj+zWkeLZ/CCHF6YwsmmWw67R+DVFM7hmDRSUt+iAWhGg4UQcYm8OoEb0h7lbUvU30ZaTSo1R17RwxQTuMMLGDRb+c/07bYJKh9ExBXCLKe9aPPKjIA/TNYlV65TlpIAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n    >\n      <img\n        class=\"gatsby-resp-image-image\"\n        style=\"width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;\"\n        alt=\"DevTools version 4 screenshot\"\n        title=\"\"\n        src=\"/static/9552e88d7605ef4e547af89096a9225d/1e088/devtools-v4-screenshot.png\"\n        srcset=\"/static/9552e88d7605ef4e547af89096a9225d/65ed1/devtools-v4-screenshot.png 210w,\n/static/9552e88d7605ef4e547af89096a9225d/d10fb/devtools-v4-screenshot.png 420w,\n/static/9552e88d7605ef4e547af89096a9225d/1e088/devtools-v4-screenshot.png 840w,\n/static/9552e88d7605ef4e547af89096a9225d/cd138/devtools-v4-screenshot.png 1220w\"\n        sizes=\"(max-width: 840px) 100vw, 840px\"\n      />\n    </span>\n  </span>\n  \n  </a>\n    </p>\n<p><a href=\"https://react-devtools-tutorial.now.sh/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Visit the interactive tutorial</a> to try out the new version or <a href=\"https://github.com/facebook/react/blob/master/packages/react-devtools/CHANGELOG.md#400-august-15-2019\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">see the changelog</a> for demo videos and more details.</p>\n<h2 id=\"which-versions-of-react-are-supported\"><a href=\"#which-versions-of-react-are-supported\" aria-hidden class=\"anchor\"><svg aria-hidden=\"true\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Which versions of React are supported? </h2>\n<p><strong><code class=\"gatsby-code-text\">react-dom</code></strong></p>\n<ul>\n<li><code class=\"gatsby-code-text\">0</code>-<code class=\"gatsby-code-text\">14.x</code>: Not supported</li>\n<li><code class=\"gatsby-code-text\">15.x</code>: Supported (except for the new component filters feature)</li>\n<li><code class=\"gatsby-code-text\">16.x</code>: Supported</li>\n</ul>\n<p><strong><code class=\"gatsby-code-text\">react-native</code></strong></p>\n<ul>\n<li><code class=\"gatsby-code-text\">0</code>-<code class=\"gatsby-code-text\">0.61.x</code>: Not supported</li>\n<li><code class=\"gatsby-code-text\">0.62</code>: Supported</li>\n</ul>\n<h2 id=\"how-do-i-get-the-new-devtools\"><a href=\"#how-do-i-get-the-new-devtools\" aria-hidden class=\"anchor\"><svg aria-hidden=\"true\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>How do I get the new DevTools? </h2>\n<p>React DevTools is available as an extension for <a href=\"https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Chrome</a> and <a href=\"https://addons.mozilla.org/en-US/firefox/addon/react-devtools/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Firefox</a>.\nIf you have already installed the extension, it should update automatically within the next couple of hours.</p>\n<p>If you use the standalone shell (e.g. in React Native or Safari), you can install the new version <a href=\"https://www.npmjs.com/package/react-devtools\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">from NPM</a>:</p>\n<div class=\"gatsby-highlight\" data-language=\"shell\"><pre class=\"gatsby-code-shell\"><code class=\"gatsby-code-shell\"><span class=\"token function\">npm</span> <span class=\"token function\">install</span> -g react-devtools@^4</code></pre></div>\n<h2 id=\"where-did-all-of-the-dom-elements-go\"><a href=\"#where-did-all-of-the-dom-elements-go\" aria-hidden class=\"anchor\"><svg aria-hidden=\"true\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Where did all of the DOM elements go? </h2>\n<p>The new DevTools provides a way to filter components from the tree to make it easier to navigate deeply nested hierarchies.\nHost nodes (e.g. HTML <code class=\"gatsby-code-text\">&lt;div&gt;</code>, React Native <code class=\"gatsby-code-text\">&lt;View&gt;</code>) are <em>hidden by default</em>, but this filter can be disabled:</p>\n<p><img src=\"/758ea5ee734afdda4cd0f6b43c74fbb4/devtools-component-filters.gif\" alt=\"DevTools component filters\"></p>\n<h2 id=\"how-do-i-get-the-old-version-back\"><a href=\"#how-do-i-get-the-old-version-back\" aria-hidden class=\"anchor\"><svg aria-hidden=\"true\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>How do I get the old version back? </h2>\n<p>If you are working with React Native version 60 (or older) you can install the previous release of DevTools from NPM:</p>\n<div class=\"gatsby-highlight\" data-language=\"shell\"><pre class=\"gatsby-code-shell\"><code class=\"gatsby-code-shell\"><span class=\"token function\">npm</span> <span class=\"token function\">install</span> --dev react-devtools@^3</code></pre></div>\n<p>For older versions of React DOM (v0.14 or earlier) you will need to build the extension from source:</p>\n<div class=\"gatsby-highlight\" data-language=\"shell\"><pre class=\"gatsby-code-shell\"><code class=\"gatsby-code-shell\"><span class=\"token comment\"># Checkout the extension source</span>\n<span class=\"token function\">git</span> clone https://github.com/facebook/react-devtools\n\n<span class=\"token builtin class-name\">cd</span> react-devtools\n\n<span class=\"token comment\"># Checkout the previous release branch</span>\n<span class=\"token function\">git</span> checkout v3\n\n<span class=\"token comment\"># Install dependencies and build the unpacked extension</span>\n<span class=\"token function\">yarn</span> <span class=\"token function\">install</span>\n<span class=\"token function\">yarn</span> build:extension\n\n<span class=\"token comment\"># Follow the on-screen instructions to complete installation</span></code></pre></div>\n<h2 id=\"thank-you\"><a href=\"#thank-you\" aria-hidden class=\"anchor\"><svg aria-hidden=\"true\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Thank you! </h2>\n<p>We’d like to thank everyone who tested the early release of DevTools version 4.\nYour feedback helped improve this initial release significantly.</p>\n<p>We still have many exciting features planned and feedback is always welcome!\nPlease feel free to open a <a href=\"https://github.com/facebook/react/issues/new?labels=Component:%20Developer%20Tools\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">GitHub issue</a> or tag <a href=\"https://twitter.com/reactjs\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">@reactjs on Twitter</a>.</p>","excerpt":"We are excited to announce a new release of the React Developer Tools, available today in Chrome, Firefox, and (Chromium) Edge! What’s changed?  A lot has changed in version 4!\nAt a high level, this new version should offer significant performance gains and an improved navigation experience.\nIt also offers full support for React Hooks, including inspecting nested objects.  Visit the interactive tutorial to try out the new version or see the changelog for demo videos and more details. Which…","frontmatter":{"title":"Introducing the New React DevTools","next":null,"prev":null,"author":[{"frontmatter":{"name":"Brian Vaughn","url":"https://github.com/bvaughn"}}]},"fields":{"date":"August 15, 2019","path":"content/blog/2019-08-15-new-react-devtools.md","slug":"/blog/2019/08/15/new-react-devtools.html"}},"allMarkdownRemark":{"edges":[{"node":{"frontmatter":{"title":"Introducing the New JSX Transform"},"fields":{"slug":"/blog/2020/09/22/introducing-the-new-jsx-transform.html"}}},{"node":{"frontmatter":{"title":"React v17.0 Release Candidate: No New Features"},"fields":{"slug":"/blog/2020/08/10/react-v17-rc.html"}}},{"node":{"frontmatter":{"title":"React v16.13.0"},"fields":{"slug":"/blog/2020/02/26/react-v16.13.0.html"}}},{"node":{"frontmatter":{"title":"Building Great User Experiences with Concurrent Mode and Suspense"},"fields":{"slug":"/blog/2019/11/06/building-great-user-experiences-with-concurrent-mode-and-suspense.html"}}},{"node":{"frontmatter":{"title":"Preparing for the Future with React Prereleases"},"fields":{"slug":"/blog/2019/10/22/react-release-channels.html"}}},{"node":{"frontmatter":{"title":"Introducing the New React DevTools"},"fields":{"slug":"/blog/2019/08/15/new-react-devtools.html"}}},{"node":{"frontmatter":{"title":"React v16.9.0 and the Roadmap Update"},"fields":{"slug":"/blog/2019/08/08/react-v16.9.0.html"}}},{"node":{"frontmatter":{"title":"Is React Translated Yet? ¡Sí! Sim! はい！"},"fields":{"slug":"/blog/2019/02/23/is-react-translated-yet.html"}}},{"node":{"frontmatter":{"title":"React v16.8: The One With Hooks"},"fields":{"slug":"/blog/2019/02/06/react-v16.8.0.html"}}},{"node":{"frontmatter":{"title":"React v16.7: No, This Is Not the One With Hooks"},"fields":{"slug":"/blog/2018/12/19/react-v-16-7.html"}}}]}},"pageContext":{"slug":"/blog/2019/08/15/new-react-devtools.html"}},"staticQueryHashes":[]}