![\"The](\"/f57ae67cfaa1fe76880654e2eddbf71f/devtools-full.gif\")
We’ve made an entirely new version of the devtools, and we want you to try it\nout!
\n
Perhaps the biggest reason was to create a defined API for dealing with\ninternals, so that other tools could benefit as well and not have to depend on\nimplementation details. This gives us more freedom to refactor things\ninternally without worrying about breaking tooling.
\nThe current version of the devtools is a fork of Blink’s “Elements” pane, and\nis imperative, mutation-driven, and tightly integrated with Chrome-specific\nAPIs. The new devtools are much less coupled to Chrome, and easier to reason\nabout thanks to React.
\nYeah!
\n\n
$rRight-click menu
\nSelect the search bar (or press ”/”), and start searching for a component by\nname.
\n![](\"/9e5f4fcd1569e0ff017320590aafbc85/devtools-search.gif\")
context for a component![](\"/f3552d987634913612d6f06248fd303d/devtools-side-pane.gif\")
First, disable the Chrome web store version, or it will break things. Then\ndownload the .crx and\ndrag it into your chrome://extensions page. If it’s not working to drag it\nfrom the downloads bar, try opening your downloads folder and drag it from\nthere.
Once we’ve determined that there aren’t any major regressions, we’ll update\nthe official web store version, and everyone will be automatically upgraded.
\nWe also have an initial version of the devtools for Firefox, which you can\ndownload from the same release page.
\nLet us know what issues you run into\non GitHub, and check out\nthe README\nfor more info.
\nAugust 12, 2015
\nA second beta is out, with a number of bugfixes. It is also listed on the\nreleases page.
","excerpt":"We’ve made an entirely new version of the devtools, and we want you to try it\nout! The full devtools gif Why entirely new? Perhaps the biggest reason was to create a defined API for dealing with\ninternals, so that other tools could benefit as well and not have to depend on\nimplementation details. This gives us more freedom to refactor things\ninternally without worrying about breaking tooling. The current version of the devtools is a fork of Blink’s “Elements” pane, and\nis imperative, mutation…","frontmatter":{"title":"New React Devtools Beta","next":null,"prev":null,"author":[{"frontmatter":{"name":"Jared Forsyth","url":"https://twitter.com/jaredforsyth"}}]},"fields":{"date":"August 03, 2015","path":"content/blog/2015-08-03-new-react-devtools-beta.md","slug":"/blog/2015/08/03/new-react-devtools-beta.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/08/03/new-react-devtools-beta.html"}},"staticQueryHashes":[]}