mirror of
https://github.com/status-im/react-native.git
synced 2025-01-12 10:34:57 +00:00
Add info about inspecting instances to the docs
Summary: Looks like this: ![](https://d2ppvlu71ri8gs.cloudfront.net/items/1N0X3d3Y2m3E3a1Z3W37/Screen%20Recording%202017-05-09%20at%2003.41%20PM.gif?v=cbf2a26b) Closes https://github.com/facebook/react-native/pull/13866 Differential Revision: D5028363 Pulled By: gaearon fbshipit-source-id: a07aecd31446d0361d299c2f7519a280ac2b8815
This commit is contained in:
parent
73973e8c56
commit
82fd02a1e2
@ -105,6 +105,18 @@ However, when `react-devtools` is running, Inspector will enter a special collap
|
||||
|
||||
You can choose "Hide Inspector" in the same menu to exit this mode.
|
||||
|
||||
### Inspecting Component Instances
|
||||
|
||||
When debugging JavaScript in Chrome, you can inspect the props and state of the React components in the browser console.
|
||||
|
||||
First, follow the [instructions for debugging in Chrome](docs/debugging.html#chrome-developer-tools) to open the Chrome console.
|
||||
|
||||
Make sure that the dropdown in the top left corner of the Chrome console says `debuggerWorker.js`. **This step is essential.**
|
||||
|
||||
Then select a React component in React DevTools. There is a search box at the top that helps you find one by name. As soon as you select it, it will be available as `$r` in the Chrome console, letting you inspect its props, state, and instance properties.
|
||||
|
||||
![React DevTools Chrome Console Integration](img/ReactDevToolsDollarR.gif)
|
||||
|
||||
## Performance Monitor
|
||||
|
||||
You can enable a performance overlay to help you debug performance problems by selecting "Perf Monitor" in the Developer Menu.
|
||||
|
BIN
website/src/react-native/img/ReactDevToolsDollarR.gif
Normal file
BIN
website/src/react-native/img/ReactDevToolsDollarR.gif
Normal file
Binary file not shown.
After Width: | Height: | Size: 2.1 MiB |
Loading…
x
Reference in New Issue
Block a user