Skip to content

Commit 4cc6a8d

Browse files
committed
Update docs/react-devtools-integration.md
1 parent 157554d commit 4cc6a8d

File tree

1 file changed

+16
-16
lines changed

1 file changed

+16
-16
lines changed

docs/react-devtools-integration.md

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,21 @@
11
# React DevTools Integration
22

3+
**_NOTE_** Supported React Native version is `>= 0.43`. Please downgrade RNDebugger version to `0.7.20` if you're using older versions of React Native.
4+
35
The React DevTools is built by [`react-devtools-core/standalone`](https://github.com/facebook/react-devtools/tree/master/packages/react-devtools-core#requirereact-devtools-corestandalone), this is same with element inspector of [`Nuclide`](https://nuclide.io/docs/platforms/react-native/#debugging__element-inspector).
46

57
It will open a WebSocket server to waiting React Native connection. The connection already included in React Native (see [`setupDevtools.js`](https://github.com/facebook/react-native/blob/master/Libraries/Core/Devtools/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](#how-to-use-it-with-real-device).
68

7-
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).
9+
We made the server listen a random port and inject `window.__REACT_DEVTOOLS_PORT__` global variable in debugger worker.
810

911
For Android, we have the built-in `adb` util and it will reverse the port automatically.
1012

1113
## Specified features for React Native
1214

1315
#### React Native Style Editor
1416

15-
* Native styler
16-
* Layout inspect (RN ^0.43 support)
17+
- Native styler
18+
- Layout inspect
1719

1820
<img width="288" alt="2017-05-27 12 00 36" src="https://cloud.githubusercontent.com/assets/3001525/26518163/0dc24ea6-42dd-11e7-91aa-52da5c4d347d.png">
1921

@@ -39,23 +41,21 @@ The `RNDebugger DevTools` option is by default to match Chrome DevTools.
3941

4042
## How to use it with real device?
4143

42-
* Starting from RN `0.53.0-rc`, it should work by default.
43-
* If you're debugging via Wi-Fi, you need to edit `setupDevtools.js` of React Native manually, change `'localhost'` to your machine IP.
44-
* `< 0.37` - Find [`node_modules/react-native/Libraries/Devtools/setupDevtools.js`](https://github.com/facebook/react-native/blob/0.36-stable/Libraries/Devtools/setupDevtools.js) in your project, then change `hostname` variable.
45-
* `>= 0.37 && < 0.43` - The same as above, but the path have been changed to [`Libraries/`**Core**/`Devtools/setupDevtools.js`](https://github.com/facebook/react-native/blob/0.37-stable/Libraries/Core/Devtools/setupDevtools.js)
46-
* `>= 0.43` - The same as above, but use `host` property of `connectToDevTools` instead.
44+
- Starting from RN `0.53.0-rc`, it should work by default.
45+
- If you're debugging via Wi-Fi, you need to edit `setupDevtools.js` of React Native manually, change `'localhost'` to your machine IP.
46+
- `>= 0.43` - The same as above, but use `host` property of `connectToDevTools` instead.
4747

4848
## Get `$r` global variable of React Native runtime in the console
4949

5050
Refer to [`Debugger Integration`](debugger-integration.md#debugging-tips).
5151

5252
## Other documentations
5353

54-
* [Getting Started](getting-started.md)
55-
* [Debugger Integration](debugger-integration.md)
56-
* [Redux DevTools Integration](redux-devtools-integration.md)
57-
* [Shortcut references](shortcut-references.md)
58-
* [Network inspect of Chrome Developer Tools](network-inspect-of-chrome-devtools.md)
59-
* [Enable open in editor in console](enable-open-in-editor-in-console.md)
60-
* [Troubleshooting](troubleshooting.md)
61-
* [Contributing](contributing.md)
54+
- [Getting Started](getting-started.md)
55+
- [Debugger Integration](debugger-integration.md)
56+
- [Redux DevTools Integration](redux-devtools-integration.md)
57+
- [Shortcut references](shortcut-references.md)
58+
- [Network inspect of Chrome Developer Tools](network-inspect-of-chrome-devtools.md)
59+
- [Enable open in editor in console](enable-open-in-editor-in-console.md)
60+
- [Troubleshooting](troubleshooting.md)
61+
- [Contributing](contributing.md)

0 commit comments

Comments
 (0)