One-Time Setup

Get WinDbg Preview from the store https://www.microsoft.com/store/productId/9PGJGD53TN86

Launch the App

Use WinDbg to launch your app with the debugger attached from the start. Use "File"->"Launch app package". You can use the search box in the top right to find your app (e.g. to debug React Native Gallery search for "gallery" and select from the list). When you find it, press "Launch".

Enable break on first chance C++ exceptions

sxe eh

Resume execution

Once The Debugger Breaks In

You'll be broken in now with something like this:

(6948.aa04): C++ EH exception - code e06d7363 (first chance)
First chance exceptions are reported before any exception handling.
This exception may be expected and handled.
KERNELBASE!RaiseException+0x6c:
00007ffe`18d2071c 0f1f440000      nop     dword ptr [rax+rax]

Load the JS debugger extension that matches your build (important if you're on a prerelease windows build). Get your branch/version information with this command:

vertarget

And plug it in to load the extension like so:

!load \\winbuilds\release\ni_asdf_mybranchname\23144.1000.230201-1554\amd64fre\bin\jscript\jd.dll

Do you have symbols?

You can't run the debugger extension if you don't have symbols for chakra. So check if you have symbols for chakra:

lm vm chakra

How do you know if it's good or bad? Well, if it shows as "deferred", then you don't have them:

0:027> lm vm chakra
Browse full module list
start             end                 module name
00007fff`15c10000 00007fff`163c9000   chakra     (deferred)             
    Image path: C:\WINDOWS\SYSTEM32\chakra.dll
    Image name: chakra.dll

But if you get something like this that shows a PDB, you're good:

0:027> lm vm chakra
Browse full module list
start             end                 module name
00007fff`15c10000 00007fff`163c9000   chakra     (private pdb symbols)  C:\ProgramData\Dbg\sym\chakra.pdb\54C90C5E3AF4C536A9178720CBB3ECE41\chakra.pdb
    Loaded symbol image file: C:\WINDOWS\SYSTEM32\chakra.dll
    Image path: C:\WINDOWS\SYSTEM32\chakra.dll

Fixing Symbols: Option 1

This command should be able to fix your chakra symbols:

!ldsym

Fixing Symbols: Option 2

Enable verbose mode for symbols while you're digging into this. Let's start by taking a look at your symbol path (sympath):

!sym noisy
.sympath

It's likely lacking any reference for private symbols. Add the private symbol server:

.sympath+ SRV*https://symweb

Your symbol path should by updated now. Reload the chakra symbols:

.reload -f chakra

Once that's working (check using the steps above lm vm chakra, turn off all that symbol noise:

!sym quiet

Now you should be able to get a callstack with resolved symbols for chakra (note this is still the native stack, not the JS stack)

Getting the JS stack

To get the JavaScript stack using the jd debugger extension:

!jstack

Use the args command to get the values passed to each method:

!jstack /args

Un-minifying the callstack

Is your callstack all minified symbols (single letter names)? You need to disable minification of your build. You can edit your vcxproj and do this:

   <PropertyGroup Label="ReactNativeWindowsProps">
     <ReactNativeWindowsDir Condition="'$(ReactNativeWindowsDir)' == ''">$([MSBuild]::GetDirectoryNameOfFileAbove($(MSBuildThisFileDirectory), 'node_modules\react-native-windows\package.json'))\node_modules\react-native-windows\</ReactNativeWindowsDir>
+    <BundlerExtraArgs>--minify false</BundlerExtraArgs>
   </PropertyGroup>

Note that you will need to rebuild with this enabled, but once you've done this you can debug multiple instances and you're fine.

More resources

This developer extension has other stuff. Try:

!jd.help

(Needs validation) Some potentially helpful links for more information:

V8

The above instructions are for debugging on Chakra. If you're on V8: Grab the v8windbg.dll from the same nuget version as the v8jsi.dll and load it up in windbg. There are some usage instructions here