status-im
/
react-native
mirror of https://github.com/status-im/react-native.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

[Docs] Clean up debugging docs

This commit is contained in:
Flip Stewart 2015-04-29 18:59:50 -05:00 committed by Brent Vatne
parent f8a4467b7d
commit 1a3ee99365
2 changed files with 25 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
docs/Debugging.md
View File

@ -8,24 +8,30 @@ next: testing
---
## Debugging React Native Apps
To debug the javascript code of your react app do the following:
1. Run your application in the iOS simulator.
2. Press ```Command + D``` and a webpage should open up at [http://localhost:8081/debugger-ui](http://localhost:8081/debugger-ui). (Chrome only for now)
3. 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.
4. Press ```Command + Option + I``` to open the Chrome Developer tools, or open it via ```View``` -> ```Developer``` -> ```Developer Tools```.
5. You should now be able to debug as you normally would.
To access the in-app developer menu, shake the iOS device or simulate a shake in the iOS Simulator by pressing `Control + ⌘ + z`.
> 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 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`.
### 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.
### Reload
Selecting Reload will reload the iOS application (this is the same as pressing `⌘ + r` in the iOS Simulator).
## Live Reload
To activate Live Reload do the following:
### 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).
1. Run your application in the iOS simulator.
2. Press ```Control + Command + Z```.
3. You will now see the `Enable/Disable Live Reload`, `Reload` and `Enable/Disable Debugging` options.
Press `⌘ + Option + i` to open the Chrome Developer Tools, or open it via `View` → `Developer` → `Developer Tools`.
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.
#### 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.
### Live Reload
Enable Live Reload via the developer menu to have the application automatically reload when changes are made.

4
docs/RunningOnDevice.md
View File

@ -35,6 +35,10 @@ The bundle script supports a couple of flags:
* `--dev` - sets the value of `__DEV__` variable to true. When `true` it turns on a bunch of useful development warnings. For production it is recommended to set `__DEV__=false`.
* `--minify` - pipe the JS code through UglifyJS.
## Disabling in-app developer menu
When building your app for production, your app's scheme should be set to `Release` as detailed in [the debugging documentation](/react-native/docs/debugging.html#debugging-react-native-apps) in order to disable the in-app developer menu.
## Troubleshooting
If `curl` command fails make sure the packager is running. Also try adding `--ipv4` flag to the end of it.