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 ponents 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 ponent hierarchies in the Chrome Developer Tools.
</p>
<a href="" 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="" 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.
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 ponents 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 ponent 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./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.
Share Improve this question edited Nov 7, 2015 at 11:35 Yevgen Safronov 4,0331 gold badge29 silver badges38 bronze badges asked Nov 7, 2015 at 9:26 user1618840user1618840 4531 gold badge5 silver badges15 bronze badges 2- 3 The react dev tools stopped working somewhere along the way, 0.12.0 I think. It's a known issue github./facebook/react-devtools/issues/229 – Chris Geirman Commented Nov 7, 2015 at 16:29
-
That said it may be resolved soon since
reactis now a direct import as of version0.25– kwelch Commented May 10, 2016 at 2:49
3 Answers
Reset to default 2With React Native 0.43 or higher you should use standalone DevTools app: https://github./facebook/react-devtools/tree/master/packages/react-devtools
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.
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' ponents 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.