kylefang/react-native
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-native.git synced 2026-04-22 11:16:06 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add info about inspecting instances to the docs

Browse Source 
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:
Dan Abramov
2017-05-09 11:56:11 -07:00
committed by Facebook Github Bot
parent 73973e8c56
commit 82fd02a1e2
2 changed files with 12 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
docs/Debugging.md
View File

@@ -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.