From 1a3ee9936521af4a5ff112ae4f68bd085af230b2 Mon Sep 17 00:00:00 2001 From: Flip Stewart Date: Wed, 29 Apr 2015 18:59:50 -0500 Subject: [PATCH 1/2] [Docs] Clean up debugging docs --- docs/Debugging.md | 36 +++++++++++++++++++++--------------- docs/RunningOnDevice.md | 4 ++++ 2 files changed, 25 insertions(+), 15 deletions(-) diff --git a/docs/Debugging.md b/docs/Debugging.md index d92393a908e074..c09260374b647a 100644 --- a/docs/Debugging.md +++ b/docs/Debugging.md @@ -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`. + +### Reload +Selecting Reload will reload the iOS application (this is the same as pressing `⌘ + r` in the iOS Simulator). + +### 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). + +Press `⌘ + Option + i` to open the Chrome Developer Tools, or open it via `View` → `Developer` → `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. +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. -## Live Reload -To activate Live Reload do the following: +#### 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. -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. +### Live Reload +Enable Live Reload via the developer menu to have the application automatically reload when changes are made. diff --git a/docs/RunningOnDevice.md b/docs/RunningOnDevice.md index 4c08ea156620e4..5931250964f833 100644 --- a/docs/RunningOnDevice.md +++ b/docs/RunningOnDevice.md @@ -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. From ee8ba19ab1d3dfc1cfae87a74553b7f24e57c046 Mon Sep 17 00:00:00 2001 From: Brent Vatne Date: Fri, 29 May 2015 13:00:27 -0700 Subject: [PATCH 2/2] [Docs] Tweak debugging docs to be more concise --- docs/Debugging.md | 25 +++++++++++-------------- 1 file changed, 11 insertions(+), 14 deletions(-) diff --git a/docs/Debugging.md b/docs/Debugging.md index c09260374b647a..716188ffe3b72f 100644 --- a/docs/Debugging.md +++ b/docs/Debugging.md @@ -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.