React DevTools Integration
NOTE Supported React Native version is
>= 0.43. Please downgrade RNDebugger version to
0.7.21 if you're using older versions of React Native.
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.
For Android, we have the built-in
adb util and it will reverse the port automatically.
Specified features for React Native
React Native Style Editor
- Native styler
- Layout inspect
Show component source in editor
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.
Change theme of Chrome DevTools with React DevTools together
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:
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
Ctrl+Alt+I)), subscribe #87 for tracking the issue.
How to use it with real device?
- 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.43- The same as above, but use
$r global variable of React Native runtime in the console