kylefang/react-native
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-native.git synced 2026-03-26 07:04:05 +08:00
Code Issues Packages Projects Releases Wiki Activity

[Docs] Tweak debugging docs to be more concise

Browse Source
This commit is contained in:
Brent Vatne
2015-05-29 13:00:27 -07:00
parent 1a3ee99365
commit ee8ba19ab1
1 changed files with 11 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
docs/Debugging.md
View File

@@ -8,30 +8,27 @@ next: testing
---
## Debugging React Native Apps
To access the in-app developer menu, shake the iOS device or simulate a shake in the iOS Simulator by pressing `Control + ⌘ + z`.
To access the in-app developer menu, shake the iOS device or press `control + ⌘ + z` in the simulator.
> Hint
>
> To disable the in-app developer menu for production builds of your application, open the project in Xcode and navigate to `Product` → `Scheme` → `Edit Scheme...`(or press `⌘ + <`), select `Run` from the menu on the left, and change the Build Configuration to `Release`.
> To disable the developer menu for production builds, open your project in Xcode and select `Product` → `Scheme` → `Edit Scheme...` (or press `⌘ + <`). Next, select `Run` from the menu on the left and change the Build Configuration to `Release`.
### Reload
Selecting Reload will reload the iOS application (this is the same as pressing `⌘ + r` in the iOS Simulator).
Selecting `Reload` or pressing `⌘ + r` in the simulator will reload the JavaScript that powers your application. If you have added new resources (such as an image to `Images.xcassets`) or modified any Objective-C/Swift code, you will need to re-build from Xcode for the changes to take effect (you can do this with `⌘ + r` in Xcode).
### Chrome Developer Tools
To debug the JavaScript code of your React app in Chrome, either select the option from the developer menu or press `⌘ + d` to open the in-app developer menu, select `Debug in Chrome`, and a webpage should open up at [http://localhost:8081/debugger-ui](http://localhost:8081/debugger-ui).
To debug the JavaScript code in Chrome, select `Debug in Chrome` from the developer menu. This will open a new tab at [http://localhost:8081/debugger-ui](http://localhost:8081/debugger-ui).
Press `⌘ + Option + i` to open the Chrome Developer Tools, or open it via `View` → `Developer` → `Developer Tools`.
Press `⌘ + option + i` or select `View` → `Developer` → `Developer Tools` to toggle the developer tools console. Enable [Pause On Caught Exceptions](http://stackoverflow.com/questions/2233339/javascript-is-there-a-way-to-get-chrome-to-break-on-all-errors/17324511#17324511) for a better debugging experience.
You should now be able to debug as you normally would.
Enable [Pause On Caught Exceptions](http://stackoverflow.com/questions/2233339/javascript-is-there-a-way-to-get-chrome-to-break-on-all-errors/17324511#17324511) for a better debugging experience.
> Hint
>
> To debug on a real device: Open the file `RCTWebSocketExecutor.m` and change `localhost` to the IP address of your computer. Shake the device to open the development menu with the option to start debugging.
To debug on a real device: Open the file `RCTWebSocketExecutor.m` and change `localhost` to the IP address of your computer. Shake the device to open the development menu with the option to start debugging.
#### React Developer Tools (optional)
Install the [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) extension for Google Chrome. This will allow you to navigate the view hierarchy if you select the `React` tab when the developer tools are open.
Install the [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) extension for Google Chrome. This will allow you to navigate the component hierarchy via the `React` in the developer tools (see [facebook/react-devtools](https://github.com/facebook/react-devtools) for more information).
### Live Reload
Enable Live Reload via the developer menu to have the application automatically reload when changes are made.
Select `Enable Live Reload` via the developer menu to have the application automatically reload when changes are made to the JavaScript.
### FPS (Frames per Second) Monitor
On `0.5.0-rc` and higher versions, you can enable a FPS graph overlay in the developers menu in order to help you debug performance problems.