VS Code Direct Debugging

"Direct Debugging" allows you to debug JS while it's running directly in the client (as opposed to in the web debugger).

Enable direct debugging

To enable direct debugging, run your app with:

npx react-native run-windows --direct-debugging <port>

on a specified port.

Alternatively you can make a few code changes in your native code to configure direct debugging. Set the following instance settings:

InstanceSettings().UseWebDebugger(false);
InstanceSettings().UseDirectDebugger(true);
InstanceSettings().DebuggerBreakOnNextLine(true);
InstanceSettings().DebuggerPort(9229);

Attaching to the process

Open Visual Studio and go to "Debug" > "Attach to Process...". In the new window make sure that "Attach to:" has "Script code" selected. Navigate to your process and select "Attach".

If you are using Hermes/V8 you will be able to attach from VS Code. In VS Code add a configuration like this:

{  
    "type": "node",  
    "request": "attach",  
    "name": "Attach to ReactTest direct debugger",  
    "protocol": "inspector",  
    "port": 9229  
}   

Launch your app. In VS Code, from the Debug menu, hit the play button with "Attach to ReactTest direct debugger" selected
Support for Chakra is tracked in the following issue: https://github.com/microsoft/react-native-windows/issues/4771