From 863e66e449a8d4157547bb2de84e3b8993ee7df1 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Fri, 5 May 2017 11:37:43 -0700 Subject: [PATCH] Explain how to use React Developer Tools Summary: Existing instructions are a bit misleading, as Chrome extension is not supposed to work, but there is still a supported way to run them. Closes https://github.com/facebook/react-native/pull/13707 Differential Revision: D5010169 Pulled By: gaearon fbshipit-source-id: f9558c9ccb04196854b2eef6ff40a998350b65db --- docs/Debugging.md | 34 +++++++++++++++++++++++++++++ local-cli/server/util/debugger.html | 1 + 2 files changed, 35 insertions(+) diff --git a/docs/Debugging.md b/docs/Debugging.md index cc6663baa..5b18121ba 100644 --- a/docs/Debugging.md +++ b/docs/Debugging.md @@ -63,6 +63,8 @@ To debug the JavaScript code in Chrome, select "Debug JS Remotely" from the Deve Select `Tools → Developer Tools` from the Chrome Menu to open the [Developer Tools](https://developer.chrome.com/devtools). You may also access the DevTools using keyboard shortcuts (**`Command`**`⌘` + **`Option`**`⌥` + **`I`** on Mac, **`Ctrl`** + **`Shift`** + **`I`** on Windows). You may also want to enable [Pause On Caught Exceptions](http://stackoverflow.com/questions/2233339/javascript-is-there-a-way-to-get-chrome-to-break-on-all-errors/17324511#17324511) for a better debugging experience. +> Note: the React Developer Tools Chrome extension does not work with React Native, but you can use its standalone version instead. Read the [next section](#react-developer-tools) to learn how. + ### Debugging using a custom JavaScript debugger To use a custom JavaScript debugger in place of Chrome Developer Tools, set the `REACT_DEBUGGER` environment variable to a command that will start your custom debugger. You can then select "Debug JS Remotely" from the Developer Menu to start debugging. @@ -71,6 +73,38 @@ The debugger will receive a list of all project roots, separated by a space. For > Custom debugger commands executed this way should be short-lived processes, and they shouldn't produce more than 200 kilobytes of output. +## React Developer Tools + +With React Native 0.43 or higher, you can use [the standalone version of React Developer Tools](https://github.com/facebook/react-devtools/tree/master/packages/react-devtools) to debug the React component hierarchy. To use it, install the `react-devtools` package globally: + +``` +npm install -g react-devtools +``` + +Now run `react-devtools` from the terminal to launch the standalone DevTools app: + +``` +react-devtools +``` + +React DevTools + +It should connect to your simulator within a few seconds. + +> Note: if you prefer to avoid global installations, you can add `react-devtools` as a project dependency. With Yarn, you can run `yarn add --dev react-devtools`, and then run `yarn react-devtools` from your project folder to open the DevTools. With npm, you can run `npm install --save-dev react-devtools`, add `"react-devtools": "react-devtools"` to the `scripts` section in your `package.json`, and then run `npm run react-devtools` from your project folder to open the DevTools. + +### Integration with React Native Inspector + +You can open the [in-app developer menu](#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: + +Show Inspector + +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: + +Show Inspector with React DevTools + +You can choose "Hide Inspector" in the same menu to exit this mode. + ## Performance Monitor You can enable a performance overlay to help you debug performance problems by selecting "Perf Monitor" in the Developer Menu. diff --git a/local-cli/server/util/debugger.html b/local-cli/server/util/debugger.html index 7d6bf02a1..1773e391b 100644 --- a/local-cli/server/util/debugger.html +++ b/local-cli/server/util/debugger.html @@ -249,6 +249,7 @@ React Native JS code runs as a web worker inside this tab.

Press ⌘⌥J to open Developer Tools. Enable Pause On Caught Exceptions for a better debugging experience.

+

You may also install the standalone version of React Developer Tools to inspect the React component hierarchy, their props, and state.

Status: Loading...