{"componentChunkName":"component---src-templates-blog-js","path":"/blog/2015/09/02/new-react-developer-tools.html","result":{"data":{"markdownRemark":{"html":"<p>A month ago, we <a href=\"/blog/2015/08/03/new-react-devtools-beta.html\">posted a beta</a> of the new React developer tools. Today, we’re releasing the first stable version of the new devtools. We’re calling it version 0.14, but it’s a full rewrite so we think of it more like a 2.0 release.</p>\n<p><img src=\"/f57ae67cfaa1fe76880654e2eddbf71f/devtools-full.gif\" alt=\"Video/screenshot of new devtools\"></p>\n<p>It contains a handful of new features, including:</p>\n<ul>\n<li>Built entirely with React, making it easier to develop and extend</li>\n<li>Firefox support</li>\n<li>Selected component instance is available as <code class=\"gatsby-code-text\">$r</code> from the console</li>\n<li>More detail is shown in props in the component tree</li>\n<li>Right-click any node and choose “Show Source” to jump to the <code class=\"gatsby-code-text\">render</code> method in the Sources panel</li>\n<li>Right-click any props or state value to make it available as <code class=\"gatsby-code-text\">$tmp</code> from the console</li>\n<li>Full React Native support</li>\n</ul>\n<h2 id=\"installation\"><a href=\"#installation\" 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>Installation </h2>\n<p>Download the new devtools from the <a href=\"https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Chrome Web Store</a>, <a href=\"https://addons.mozilla.org/en-US/firefox/addon/react-devtools/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Firefox Add-ons</a> for Firefox, and <a href=\"https://microsoftedge.microsoft.com/addons/detail/gpphkfbcpidddadnkolkpfckpihlkkil\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Microsoft Edge Addons</a> for Edge. If you’re developing using React, we highly recommend installing these devtools.</p>\n<p>If you already have the Chrome extension installed, it should autoupdate within the next week. You can also head to <code class=\"gatsby-code-text\">chrome://extensions</code> and click “Update extensions now” if you’d like to get the new version today. If you installed the devtools beta, please remove it and switch back to the version from the store to make sure you always get the latest updates and bug fixes.</p>\n<p>If you run into any issues, please post them on the <a href=\"https://github.com/facebook/react\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">React GitHub repo</a>.</p>","excerpt":"A month ago, we posted a beta of the new React developer tools. Today, we’re releasing the first stable version of the new devtools. We’re calling it version 0.14, but it’s a full rewrite so we think of it more like a 2.0 release. Video/screenshot of new devtools It contains a handful of new features, including: Built entirely with React, making it easier to develop and extend Firefox support Selected component instance is available as  from the console More detail is shown in props in the…","frontmatter":{"title":"New React Developer Tools","next":null,"prev":null,"author":[{"frontmatter":{"name":"Sophie Alpert","url":"https://sophiebits.com/"}}]},"fields":{"date":"September 02, 2015","path":"content/blog/2015-09-02-new-react-developer-tools.md","slug":"/blog/2015/09/02/new-react-developer-tools.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/2015/09/02/new-react-developer-tools.html"}},"staticQueryHashes":[]}