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\ Code/Contents/MacOS/Electron --inspect-extensions=9333

After VS Code is started, you want to head over to Chrome and go to about://tracing 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 about://tracing 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

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
Engineering/ML/Embeddings
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
Other/Notes
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.