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.
3 answers
solution1
2 2017-05-02 06:24:38
使用 React Native 0.43 或更高版本，您应该使用独立的 DevTools 应用程序： https : //github.com/facebook/react-devtools/tree/master/packages/react-devtools
solution2
1 2016-06-11 19:55:57
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.
solution3
0 2019-12-17 23:20:50
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.