Skip to content

VS Code Debugging

Jump to bottom
Brian Savatia Keyonzo edited this page Jan 16, 2020 · 14 revisions

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

Enable Web Debugging

Before you can start debugging, you need to enable your application to use Web Debugging. You can do this by customizing your React application instance settings in both C++ and C#. In C++,

  1. In your application root directory, navigate to windows/<your application name>/MainPage.cpp
  2. Find the instance settings declaration InstanceSettings settings; in the MainPage::LoadReact() method
  3. Set the UseWebDebugger property to true; settings.UseWebDebugger = true;.

In C#:

  1. In your application root directory, navigate to windows/<your application name>/MainPage.xaml.cs
  2. Find the instance settings declaration InstanceSettings settings; in the LoadReact() method
  3. Set the UseWebDebugger property to true; settings.UseWebDebugger = true;.

Configuration

Hit the Debug button, notice the Debug toolbar has "No Configurations". Hit the drop down arrow and select "Add Configuration…". This will add a new file: .vscode\launch.json. You will need to edit this file and in order to add your debug configuration.

There are two scenarios in which you can debug a React Native Windows Application with VS Code:

  1. "Launch": In this scenario, VS Code launches the application itself and breaks into it in one action. This is the easiest scenario because it requires the least amount of steps.
  2. "Attach to Packager" scenario: In this scenario, the developer has to start the React Native packager, attach the VS Code debugger to the packager and then start the application. This scenario is more involved than the "Launch" scenario.

We will now look at how we can configure VS Code to debug using either scenario:

"Launch" scenario

Once you open launch.json press the "Add Configuration..." button. From the presets pick "React Native: Debug Windows". Add Configuration "React Native: Debug Windows"

"Attach to Packager" scenario

Once you open launch.json press the "Add Configuration..." button. From the presets pick "React Native: Attach to packager". Add Configuration "React Native: Attach to packager"

Launch and connect to the packager

The steps to launch the application vary based on the two scenarios:

"Launch" scenario

  • In VS Code, select "Debug Windows" from the Debug drop-down and hit the green arrow to launch it. Dropdown Launch

"Attach to Packager" scenario

  • 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.
    Dropdown Attach
  • Launch your app. It should connect to the debugger running inside VS Code

If all 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

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

Hitting breakpoints in VS Code

Clone this wiki locally