Creating VS Code Extension Profiles

README.md

Creating VS Code Extension Profiles

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:

1. You have to start VS Code with a special runtime flag. In macOS, you can do so via the terminal like this:

   /Applications/Visual\ Studio\ Code.app/Contents/MacOS/Electron --inspect-extensions=9333

   Note that you may need to quit VSCode first, then run that command to re-launch it. It will open all of your windows and tabs again.

2. 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:

   

3. From here you want to configre 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:

   

4. 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:

   

5. 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!