microsoft/vscode-react-native
Publicmirrored from https://github.com/microsoft/vscode-react-nativeAvailable
doc/debugging.md
100lines · modeblame
2af998b7Vladimir Kotikov8 years ago | 1 | # Setting up debug environment |
| 2 | | |
| 3 | Once you have set up a `launch.json` file with default configurations, you can modify these configurations, or add new ones to the list. You can use other fields in these configurations as well. | |
| 4 | | |
| 5 |  | |
| 6 | | |
db6fd42aRuslan Bikkinin7 years ago | 7 | For example, you can modify the `target` field to specify the simulator you want to target for iOS debugging or the device using the one from output of `adb devices` command for Android debugging. |
2af998b7Vladimir Kotikov8 years ago | 8 | |
| 9 | ## Debugging with TypeScript and Haul | |
dd90a856Artem Egorov8 years ago | 10 | |
2af998b7Vladimir Kotikov8 years ago | 11 | If you use Haul instead of the react-native packager, you must add `sourceMapPathOverrides` to the `launch.json` file. |
| 12 | | |
| 13 | For example: | |
| 14 | ``` | |
| 15 | "sourceMapPathOverrides": { | |
| 16 | "webpack:///./~/*": "${workspaceRoot}/node_modules/*", | |
| 17 | "webpack:///./*": "${workspaceRoot}/*", | |
| 18 | "webpack:///*": "*" | |
| 19 | } | |
| 20 | ``` | |
| 21 | See more about source map overrides [here](https://github.com/Microsoft/vscode-node-debug2#sourcemappathoverrides) | |
| 22 | | |
116c3cb0Ruslan Bikkinin7 years ago | 23 | ## Specifying scheme for iOS app |
| 24 | | |
| 25 | If you want to use custom scheme for your application you can either pass it as part of `runArguments` parameter arguments or set `scheme` configuration parameter as shown below: | |
| 26 | ```js | |
| 27 | "runArguments": ["--scheme", "customScheme", ...] | |
| 28 | // or | |
| 29 | "runArguments": ["--scheme=customScheme", ...] | |
| 30 | // or | |
| 31 | "scheme" : "customScheme" | |
| 32 | ``` | |
| 33 | Please be aware, specifying scheme value as a part of `runArguments` parameter arguments will override `scheme` configuration parameter value if it set. | |
| 34 | | |
2af998b7Vladimir Kotikov8 years ago | 35 | ## Debugging on iOS device |
dd90a856Artem Egorov8 years ago | 36 | |
2af998b7Vladimir Kotikov8 years ago | 37 | Debugging on an iOS device require following manual steps: |
| 38 | * Install [ios-deploy](https://www.npmjs.com/package/ios-deploy) `npm install -g ios-deploy`. | |
| 39 | * Have a valid iOS Development certificate installed. | |
284aa6f9Sergey Akhalkov8 years ago | 40 | * In your project's `launch.json` file set `target` to `device` or use 'launchArguments' property to specify particular device to run on in case of multiple devices connected, e.g. `"runArguments": [ "--device", "My iPhone" ]` |
2af998b7Vladimir Kotikov8 years ago | 41 | * Choose **Debug iOS** configuration from the Configuration dropdown and press F5. |
dd90a856Artem Egorov8 years ago | 42 | * Shake the device to open the development menu and select "Debug JS Remotely". |
| 43 | | |
| 44 | ## Debugging React Native Windows | |
| 45 | | |
| 46 | For UWP apps use `windows` target platform in `launch.json` configuration, e.g.: | |
| 47 | | |
| 48 | ``` | |
| 49 | { | |
| 50 | "name": "Debug UWP", | |
8c3266b0RedMickey6 years ago | 51 | "cwd": "${workspaceFolder}", |
dd90a856Artem Egorov8 years ago | 52 | "type": "reactnative", |
| 53 | "request": "launch", | |
135c493eYuri Skorokhodov7 years ago | 54 | "platform": "windows" |
dd90a856Artem Egorov8 years ago | 55 | } |
| 56 | ``` | |
| 57 | | |
| 58 | For WPF apps use `wpf`, e.g.(WPF debugging available only for react-native-windows gt 0.55.0): | |
| 59 | | |
| 60 | ``` | |
| 61 | { | |
| 62 | "name": "Debug WPF", | |
8c3266b0RedMickey6 years ago | 63 | "cwd": "${workspaceFolder}", |
dd90a856Artem Egorov8 years ago | 64 | "type": "reactnative", |
| 65 | "request": "launch", | |
135c493eYuri Skorokhodov7 years ago | 66 | "platform": "wpf" |
dd90a856Artem Egorov8 years ago | 67 | } |
| 68 | ``` | |
549baae2RedMickey6 years ago | 69 | |
| 70 | ## Debugging React Native apps with Hermes enabled | |
| 71 | | |
| 72 | Hermes is the new JavaScript engine optimized for running React Native apps on Android. It improves app performance and decreases app size. | |
| 73 | | |
| 74 | Click [here](https://facebook.github.io/react-native/docs/hermes/) to learn more about Hermes. | |
| 75 | | |
| 76 | Debugging apps with Hermes enabled is currently experimental. Please, see [this issue](https://github.com/microsoft/vscode-react-native/issues/1073) for current known issues on Hermes support. | |
| 77 | | |
| 78 | To debug while using Hermes engine, please choose one of the following debug configurations: | |
| 79 | - React Native (Hermes): Debug Android - Experimental | |
| 80 | | |
| 81 | ``` | |
| 82 | { | |
| 83 | "name": "Debug Android (Hermes) - Experimental", | |
| 84 | "cwd": "${workspaceFolder}", | |
| 85 | "type": "reactnativedirect", | |
| 86 | "request": "launch", | |
| 87 | "platform": "android" | |
| 88 | } | |
| 89 | ``` | |
| 90 | | |
8411a7adYuri Skorokhodov6 years ago | 91 | - React Native (Hermes): Attach to Hermes application - Experimental |
549baae2RedMickey6 years ago | 92 | |
| 93 | ``` | |
| 94 | { | |
8411a7adYuri Skorokhodov6 years ago | 95 | "name": "Attach to Hermes application - Experimental", |
549baae2RedMickey6 years ago | 96 | "cwd": "${workspaceFolder}", |
| 97 | "type": "reactnativedirect", | |
| 98 | "request": "attach" | |
| 99 | } | |
| 100 | ``` |