The React DevTools is built by react-devtools-core/standalone, this is same with element inspector of Nuclide.
It will open a WebSocket server to waiting React Native connection. The connection already included in React Native (see setupDevtools.js), it will keep trying to connect the React DevTools server in development mode, it should works well without specify anything, unless you need to set the server hostname for use it with real device.
We made the server listen a random port and inject window.__REACT_DEVTOOLS_PORT__ global variable in debugger worker, note that the random port is only works with React Native version >= 0.39, otherwise it will fallback to 8097 (default port).
For Android, we have the built-in adb util and it will reverse the port automatically.
- Native styler
- Layout inspect (RN ^0.43 support)
It's support Atom, Subline, VSCode for macOS.
You can read the section Integration with React Native Inspector from README of react-devtools, we have the same usage with the package.
You can change Chrome DevTools theme (Default / Dark), the theme of React DevTools will be changed together if you have no selected another theme for React DevTools:
The RNDebugger DevTools option is by default to match Chrome DevTools.
NOTE Currently Chrome DevTools (Electron) doesn't reload automatically, we need to Toggle Developer Tools twice (Application menu or ⌥+⌘+I (Ctrl+Alt+I)), subscribe #87 for tracking the issue.
- Starting from RN
0.53.0-rc, it should work by default. - If you're debugging via Wi-Fi, you need to edit
setupDevtools.jsof React Native manually, change'localhost'to your machine IP.< 0.37- Findnode_modules/react-native/Libraries/Devtools/setupDevtools.jsin your project, then changehostnamevariable.>= 0.37 && < 0.43- The same as above, but the path have been changed toLibraries/Core/Devtools/setupDevtools.js>= 0.43- The same as above, but usehostproperty ofconnectToDevToolsinstead.
Refer to Debugger Integration.