Skip to content

VS Code Debugging

Jump to bottom
Brian Savatia Keyonzo edited this page Oct 21, 2019 · 14 revisions

Note: These instructions are temporary workarounds with manual steps. We have plans to enable VS Code debugging through the "normal" workflow, but this isn't working yet.

If you follow these steps you can use VS Code to debug the javascript for your react-native-windows app. This is a better experience than debugging in the Chrome debugger.

Installation

Configuration

Add the "Attach to Packager" configuration to your launch.json by doing the following:

  • Hit the Debug button, notice the Debug toolbar has "No Configurations". Hit the drop down arrow and select Add Configuration…
  • Now that you have a .vscode directory and launch.json (from the previous step), add the "Attach to Packager" configuration, by copying/pasting this into launch.json:

{
"name": "Attach to packager",
"program": "${workspaceRoot}/.vscode/launchReactNative.js",
"type": "reactnative",
"request": "attach",
"sourceMaps": true,
"outDir": "${workspaceRoot}/.vscode/.react"
},

image

Launch and connect to the packager

  • From your command-prompt, launch the packager from your app directory by running react-native start
  • In VS Code, select "Attach to Packager" from the Debug drop-down and hit the green arrow to launch it. If this is successful you'll see this logged in the Debug Console: Starting debugger app worker. Established a connection with the Proxy (Packager) to the React Native application

image

Hack your client code to turn on Web Debugging

  • Open your app solution in Visual Studio and change the ReactInstanceSettings.UseWebDebugger property to true to turn on Web Debugging: In D:<your app>\node_modules\react-native-windows\include\ReactUWP\IReactInstance.h (around line 30): struct ReactInstanceSettings { bool UseWebDebugger{true}; *Launch your app. It should connect to the debugger running inside VS Code

You can now set breakpoints in your javascript inside VS Code and use the VS Code debugger!

Clone this wiki locally