Profiling Extension in Production

March 7, 2024 Engineering/VS Code

The VS Code extension runtime uses Node.js (via Electron) and you can thus use Node.js related debugging tool.

Here's a quick guide on how to record performances traces of VS Code extensions:

/Applications/Visual\ Studio\ --inspect-extensions=9333

After VS Code is started, you want to head over to Chrome and go to chrome://inspect which should open up a view like this:

tracing overview

From here you want to configure the inspect server that we just started on port 9333. To do this, click on "Open dedicated DevTools for Node", go to the "Connection" tab if that is not open yet, and make sure to add localhost:9333 to the list like this:

add localhost to the list

Now, head back to the chrome://inspect tab and you should see a new remote target that you can inspect. For me this looks like this:

tracing overview with a new electron option

Clicking this will open a (somewhat reduced) DevTools view. Great! We've almost got it. From here you can go to the "Performance" tab to record a trace. Then, swap tabs to the VS Code window and interact with the extension. Come back later to stop the recording and export it. Voila!

screenshot of the performance tab in the nodejs profiler

Other Notes

Engineering/The 50-50 Goal
May 17, 2024
May 2, 2024
April 3, 2024
Engineering/Infrastructure/Deploy Workers Programatically
April 2, 2024
March 7, 2024
Engineering/Feature Flags
February 21, 2024
Engineering/Demo Culture
February 16, 2024
February 1, 2024
May 5, 2023
Engineering/ML/Jaccard Similarity
May 4, 2023
May 2, 2023
Engineering/Front-End/Modern Front-End Problems
November 3, 2022
Engineering/Test Matrixes
February 25, 2022
February 25, 2022
Engineering/Front-End/React’s Escape Hatch
February 21, 2022
January 1, 2022

About the author

Philipp Spiess
Philipp Spiess [ˈʃpiːs]

Engineer at Sourcegraph.
Prev: UI Engineer at Meta, curator of This Week in React, React DOM team member, and Team Lead at PSPDFKit.