VS Code Debugging

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.

Configuration First, add the "Attach to Packager" configuration to your launch.json by doing the following:

• Launch VS Code in your app directory
• Install the React Native Tools plugin.  See:  https://www.youtube.com/watch?v=_srHOd6EFQ0
• 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"
    },

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

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!