JankLens for VS Code

Record, analyze, and compare Flutter app performance without the terminal.

Features

• JankLens icon in the activity bar (left icon strip), opening a panel laid out as three steps:
  1. Device: your connected phones and emulators are listed automatically (flutter devices).
  2. App: Run app in profile mode or Attach to running app, with no VM Service URL to copy. Apps you start with F5 through the Dart/Flutter extension connect automatically.
  3. Record: name the interaction (flows from janklens.yaml appear as chips), pick the refresh rate, and use one button to start and stop (also ⌥⌘R / Ctrl+Alt+R, or the status bar timer).
• Latest result card: pass/fail, jank %, P95 build and raster, freezes, average FPS, top finding.
• Report tab: overview KPIs (including Average FPS, computed with DevTools' own formula, so it matches the "FPS (average)" in DevTools' Performance page for the same frames), refresh-rate evaluation, UI-vs-raster breakdown, an interactive frame chart (hover, then click a janky frame for its UI and raster events), findings with evidence, and source hints that open the file at the line.
• Delete recordings: the trash button on a recording row (hover it), Delete in a report, or JankLens: Delete Recordings… in the command palette (select several at once). It always asks first. Baselines saved from a recording are kept.
• Baselines and comparison: save any recording as a baseline, compare it with a later recording in a verdict view (improved/regressed per metric, environment checks).
• Copy AI context for Claude, Codex, or Gemini, and export Markdown reports.
• Open in Browser: the external-link (↗) button in the JankLens panel title bar, Open in browser at the bottom of the panel or in a report, or JankLens: Open in Browser in the command palette. It opens the same UI in your default browser, like DevTools: controls on the left, the report on the right. Recording, baselines, comparison, Markdown export, and source hints all work. Clicking a source file opens it in VS Code. Use JankLens: Copy Browser Link to open it in a specific browser such as Chrome.

Average FPS and DevTools

DevTools averages every frame in its chart: all frames since it connected, or since you last clicked Clear all. JankLens averages the frames in your recording. For identical numbers, click Clear all in DevTools' Performance page when you start recording, and pause DevTools' frame recording when you stop. Delivered FPS is the other rate: frames per second with idle time included.

Browser UI security

The browser UI is served on 127.0.0.1 with a random port and a secret token in the URL, only while this VS Code window is open. Other websites and local programs cannot use it without the link. Treat the link like a VM Service URI.

Requirements

• The janklens CLI: run tool/install_cli.sh in the JankLens repository (installs to ~/.local/bin/janklens), or set janklens.cliPath.
• Flutter SDK. JankLens finds it via janklens.flutterPath, the Dart extension's dart.flutterSdkPath, the project's FVM config, or PATH.
• A physical device is strongly recommended. Emulator timings are not representative.

Settings

Build and install from source

cd packages/janklens_vscode
npm ci
npm test                        # unit and webview tests
npm run package                 # produces janklens-1.0.0.vsix
code --install-extension janklens-1.0.0.vsix

The Marketplace publisher (VaibhavBhus) differs from the Open VSX namespace (Vaibhav-Bhus) used by Antigravity and other VS Code forks. npm run package:openvsx produces janklens-1.0.0-openvsx.vsix with the Open VSX namespace.

npm run test:integration runs an extension-host smoke test in a separate VS Code instance, including the browser server. Set VSCODE_EXECUTABLE to use an installed VS Code (for example /Applications/Visual Studio Code.app/Contents/MacOS/Code). It works from a VS Code terminal: the runner clears the variables that would attach it to the surrounding window.