Skip to content

Profiling

Kartik Raj edited this page Mar 18, 2021 · 7 revisions

Profiling the Extension

If you find yourself with the need to profile the extension, here's some steps you can take to get a usable profile:

  1. npm install -g vsce <- This is the vscode extension packager. It needs to be global
  2. npm run package <- This will generate a vsix of your development bits
  3. Close VS code
  4. Navigate to your user/.vscode/extensions directory
  5. Delete all ms-python directories there.
  6. Open VS Code and run the 'Install From VSIX' command to install the vsix you just generated.

This gets your bits (and only your bits) installed as a package inside of VS Code without having to run the debugger.

Debug Bits

The next step is to make those bits non-minified.

  1. npm run clean <- This will clean your output directory
  2. npm run compile
  3. npm run compile-webviews
  4. Copy the 'out' directory from your source code overtop of the 'out' directory in your user/.vscode/extensions/ms-python directory
  5. Copy the 'node_modules' directory from your source next to the 'out' directory in your user/.vscode/extensions/ms-python directory. This might take a while.

Now you have debug bits installed.

Running the profiler

Follow the directions here: https://github.com/Microsoft/vscode/wiki/Performance-Issues#profile-the-running-extensions

You should generate a profile and save it. You can then load it into any Chrome javscript profiler and look at the results.

I found using the 'Chart' view and searching (CTRL+F) for classes/functions I thought might be expensive was a good way to start:

JavascriptProfiler

Steps to find the code from the CPU Profiler and a .js.map file

  1. Get the .cpuprofile file from the user. They can get that file by following this instructions.
  2. Get the extension version the user used, either from the VS Code marketplace, Azure, or build it yourself.
  3. Open the .cpuprofile file in the Edge devtools or directly on VS Code to find an identifiable function that we can find on a minimized js file.

These profilers help find the slow functions, which file they're in, and which line. In this case, the slow function is l and gets called by t.getDependencies, both on extension.js and on line 47.

DevToolsProfiler

VSCodeProfiler

Also, open it on notepad since neither Edge nor VS Code display the column the function is at. In this case, the l function is on column 256673.

NotepadProfiler

  1. Use this tool to find the file and function that causes the performance issue. Open a terminal in the folder where the .js and the .js.map file are located, and run source-map resolve <path>.js.map <line> <column>. In this case, the file in the project with the slow function is planner.js, and the function is dependencies.forEach(...).

source-map-cli

Profiling tests

Based on the instructions here, you can also use chrome to profile the mocha tests: https://medium.com/@paul_irish/debugging-node-js-nightlies-with-chrome-devtools-7c4a1b95ae27

Essentially I did this:

  1. Open chrome://inspect in chrome
  2. Run node .\node_modules\mocha\bin\mocha --inspect-brk --require source-map-support/register --opts ./build/.mocha.functional.opts "--grep=Simple text"
  3. In the chrome inspector, wait for the node process to show up
  4. Click the 'Open Dedicated DevTools for Node'
  5. Debug breakpoint on entry should hit
  6. Switch to profiler and start profiling
  7. Once done the profile can be inspected in that window or saved and opened in another chrome window.
Clone this wiki locally