microsoft/vscode-react-native
Publicmirrored fromhttps://github.com/microsoft/vscode-react-nativeAvailable
doc/debugging.md
60lines · modecode
| 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 | |
| 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. |
| 8 | |
| 9 | ## Debugging with TypeScript and Haul |
| 10 | |
| 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 | |
| 23 | ## Debugging on iOS device |
| 24 | |
| 25 | Debugging on an iOS device require following manual steps: |
| 26 | * Install [ios-deploy](https://www.npmjs.com/package/ios-deploy) `npm install -g ios-deploy`. |
| 27 | * Have a valid iOS Development certificate installed. |
| 28 | * 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" ]` |
| 29 | * Choose **Debug iOS** configuration from the Configuration dropdown and press F5. |
| 30 | * Shake the device to open the development menu and select "Debug JS Remotely". |
| 31 | |
| 32 | ## Debugging React Native Windows |
| 33 | |
| 34 | For UWP apps use `windows` target platform in `launch.json` configuration, e.g.: |
| 35 | |
| 36 | ``` |
| 37 | { |
| 38 | "name": "Debug UWP", |
| 39 | "program": "${workspaceRoot}/.vscode/launchReactNative.js", |
| 40 | "type": "reactnative", |
| 41 | "request": "launch", |
| 42 | "platform": "windows", |
| 43 | "sourceMaps": true, |
| 44 | "outDir": "${workspaceRoot}/.vscode/.react" |
| 45 | } |
| 46 | ``` |
| 47 | |
| 48 | For WPF apps use `wpf`, e.g.(WPF debugging available only for react-native-windows gt 0.55.0): |
| 49 | |
| 50 | ``` |
| 51 | { |
| 52 | "name": "Debug WPF", |
| 53 | "program": "${workspaceRoot}/.vscode/launchReactNative.js", |
| 54 | "type": "reactnative", |
| 55 | "request": "launch", |
| 56 | "platform": "wpf", |
| 57 | "sourceMaps": true, |
| 58 | "outDir": "${workspaceRoot}/.vscode/.react" |
| 59 | } |
| 60 | ``` |
| 61 | |