Skip to content

Getting a JS callstack in the debugger

Chris Glein edited this page Feb 10, 2023 · 6 revisions

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

g 

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)

k 

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

Clone this wiki locally