VSCode extension for viewing Speedscope flamegraphs.

With this extension you can open Speedscope compatible files directly from VSCode and jump to the source code locations of the profiled functions.

Install from VSCode marketplace

This extension extends speedscope to be viewable from VSCode.

• Right click particular file in VSCode File Explorer
• Select "Open with..."
• Select "Speedscope"

• Use "Open with..." from VSCode File Explorer just like a local file

• Ctrl + click (Command + click on MacOS) on a colored block to open the associated file
• Or click link to a file in the stack detail view

(if relative path assume it is relative to the file being viewed)

• Only files can be opened at the moment. Allow directories as inputs to support opening Instruments traces.

# Build deps npm install npm run build-external-deps # Build extension npx vsce package 

See DEVELOPMENT.md for development and implementation details.

• An example usage: Profile .NET MAUI Applications to Find Performance Issues: Video and Blogpost (Thanks to @Alexgoon)

• To specify files with certain file extensions to be opened by default with this viewer within VSCode:

  Add the following in your workspace settings.json.

  { "workbench.editorAssociations": { "*.speedscope.json": "speedscope-in-vscode.speedscope" } }