# `react-devtools` React DevTools is available as a built-in extension for Chrome and Firefox browsers. This package enables you to debug a React app elsewhere (e.g. a mobile browser, an embedded webview, Safari, inside an iframe). It works both with React DOM and React Native. ![React DevTools screenshot](https://user-images.githubusercontent.com/29597/63811956-bdd9b580-c8dd-11e9-8962-c568e475c425.png) ## Installation Install the `react-devtools` package. Because this is a development tool, a global install is often the most convenient: ```sh # Yarn yarn global add react-devtools # NPM npm install -g react-devtools ``` If you prefer to avoid global installations, you can add `react-devtools` as a project dependency. With Yarn, you can do this by running: ```sh yarn add --dev react-devtools ``` With NPM you can just use [NPX](https://www.npmjs.com/package/npx): ```sh npx react-devtools ``` ## Usage with React Native Run `react-devtools` from the terminal to launch the standalone DevTools app: ```sh react-devtools ``` If you're not in a simulator then you also need to run the following in a command prompt: ```sh adb reverse tcp:8097 tcp:8097 ``` If you're using React Native 0.43 or higher, it should connect to your simulator within a few seconds. ### Integration with React Native Inspector You can open the [in-app developer menu](https://facebook.github.io/react-native/docs/debugging.html#accessing-the-in-app-developer-menu) and choose "Show Inspector". It will bring up an overlay that lets you tap on any UI element and see information about it: ![React Native Inspector](http://i.imgur.com/ReFhREb.gif) However, when `react-devtools` is running, Inspector will enter a special collapsed mode, and instead use the DevTools as primary UI. In this mode, clicking on something in the simulator will bring up the relevant components in the DevTools: ![React DevTools Inspector Integration](https://user-images.githubusercontent.com/29597/63811958-be724c00-c8dd-11e9-8587-37357334a0e1.gif) You can choose "Hide Inspector" in the same menu to exit this mode. ### Inspecting Component Instances When debugging JavaScript in Chrome, you can inspect the props and state of the React components in the browser console. First, follow the [instructions for debugging in Chrome](https://facebook.github.io/react-native/docs/debugging.html#chrome-developer-tools) to open the Chrome console. Make sure that the dropdown in the top left corner of the Chrome console says `debuggerWorker.js`. **This step is essential.** Then select a React component in React DevTools. There is a search box at the top that helps you find one by name. As soon as you select it, it will be available as `$r` in the Chrome console, letting you inspect its props, state, and instance properties. ![React DevTools Chrome Console Integration](https://user-images.githubusercontent.com/29597/63811957-be724c00-c8dd-11e9-9d1d-8eba440ef948.gif) ## Usage with React DOM The standalone shell can also be useful with React DOM (e.g. to debug apps in Safari or inside of an iframe). Run `react-devtools` from the terminal to launch the standalone DevTools app: ```sh react-devtools ``` Add `` as the very first ` ``` This will ensure the developer tools are connected. **Don’t forget to remove it before deploying to production!** >If you install `react-devtools` as a project dependency, you may also replace the `