CODEWITHSUNDEEP
javascriptfacebookreactjsreact-native
user1618840
user1618840

Reputation: 453

How to use React dev tools with react native?

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.

Upvotes: 4

Views: 7276

Answers (3)

Ben Butterworth
Ben Butterworth

Reputation: 28572

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.

Upvotes: 0

zarcode
zarcode

Reputation: 2485

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

Upvotes: 2

Daniel Schmidt
Daniel Schmidt

Reputation: 11921

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.

Upvotes: 1

Related Questions