Skip to content

Latest commit

 

History

History
63 lines (38 loc) · 3.64 KB

react-devtools-integration.md

File metadata and controls

63 lines (38 loc) · 3.64 KB
Raw

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.

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.

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

2017-05-27 12 00 36

Show component source in editor

It's support Atom, Subline, VSCode for macOS.

tt

Inspect elements

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:

2017-08-23 13_20_17

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.

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.js of React Native manually, change 'localhost' to your machine IP.
    • >= 0.43 - The same as above, but use host property of connectToDevTools instead.

Get $r global variable of React Native runtime in the console

Refer to Debugger Integration.

Other documentations