How to use React dev tools with react native?

Question

I'm currently using react native to develop an android app, with emulation in genymotion. I've attempted to debug my application using react developer tools as described here. JS errors are thrown in the console, but I'm unable to select the react tab in chrome dev tools.

The reason for this appears to be that no react components are generated in html, just this:

<body>
  <div id="devtools-banner">
    <h3>Install React DevTools</h3>
    <p>
       React Developer Tools is an extension that allows you to inspect the
       React component hierarchies in the Chrome Developer Tools.
    </p>
    <a href="https://fb.me/react-devtools" target="_blank">
      Install
    </a>
  </div>
  <div class="content">
    <p>
      React Native JS code runs inside this Chrome tab.
    </p>
    <p>Press <span class="shortcut">⌘⌥J</span> to open Developer Tools. Enable <a href="http://stackoverflow.com/a/17324511/232122" target="_blank">Pause On Caught Exceptions</a> for a better debugging experience.</p>
    <p>Status: <span id="status">Debugger session #0 active.</span></p>
  </div>
</body>

I have the same issue with iOS.How do I use the React dev tools with react native?

Note: I'm currently using v0.14.5 of React dev tools.

The react dev tools stopped working somewhere along the way, 0.12.0 I think. It's a known issue https://github.com/facebook/react-devtools/issues/229 — Chris Geirman, Nov 07 '15 at 16:29
That said it may be resolved soon since `react` is now a direct import as of version `0.25` — kwelch, May 10 '16 at 02:49

score 2 · Answer 1 · answered May 02 '17 at 06:24

2

With React Native 0.43 or higher you should use standalone DevTools app: https://github.com/facebook/react-devtools/tree/master/packages/react-devtools

answered May 02 '17 at 06:24

zarcode

2,465
17
31

score 1 · Answer 2 · answered Jun 11 '16 at 19:55

1

You can simply install the React DevTools as a chrome extension, the have full React Native support.. They work in my current setup with react native version 0.26.

answered Jun 11 '16 at 19:55

Daniel Schmidt

11,605
5
38
70

score 0 · Answer 3 · answered Dec 17 '19 at 23:20

I had issues with connecting react native (both iOS and android) to the latest (react-devtools v4). By installing v3 (changing the dependency in package.json to be "react-devtools": "^3",, it worked. This also includes using the Chrome console to 'inspect' components with $r.

Make sure you don't have a global react-devtools v4. npm rm -g react-devtools@^4, then npm i -g react-devtools@^3. This way, you can use react-devtools to launch the standalone app.

How to use React dev tools with react native?

3 Answers3

Linked