Skip to content

Getting a JS callstack in the debugger

Jump to bottom
Chris Glein edited this page Feb 4, 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

Fixing Symbols

You'll need symbols to go with it. Enable verbose mode for symbols and quickly look at your symbol path

!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

Good now?

lm vm chakra

Turn off all that symbol noise

!sym quiet

Now you should be able to get a callstack with resolved symbols

k

Getting the JS stack

And get the JavaScript stack

!jstack

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>

More resources

This developer extension has other stuff. Try:

!jd.help

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

Clone this wiki locally