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

• 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.

Nothing else: the janklens CLI ships inside the extension, so installing JankLens from the VS Code Marketplace or Open VSX (Antigravity, Cursor, VSCodium) is enough. The same build works on every platform. It contains the CLI for macOS (Apple silicon and Intel), Linux (x64 and arm64), and Windows x64. On any other platform, JankLens builds the CLI once with the Dart SDK inside your Flutter SDK (Flutter with Dart 3.10 or later), which takes a few seconds, and reuses it afterwards. The panel footer shows which CLI is in use.

The janklens.cliPath setting overrides all of this, which is how to run a local CLI build against the released extension.

Settings

Build and install from source

cd packages/janklens_vscode
npm ci
npm test                        # unit and webview tests
npm run package:all -- --allow-missing win32-x64   # on a Mac: every CLI except Windows, then both VSIXs
code --install-extension janklens-1.0.2.vsix

npm run build:cli compiles packages/janklens_cli into bin/<target>/ for every target the machine can build. On Apple silicon that is darwin-arm64, darwin-x64 (with an x64 Dart SDK under Rosetta, downloaded once to ~/.cache/janklens), and linux-arm64 and linux-x64 (Dart cross-compiles to Linux). Windows x64 can only be built on Windows (node scripts/build-cli.js --target win32-x64); the release workflow does that on a Windows runner.

scripts/package.js puts every executable in bin/ and the CLI's Dart source (with its dependencies, from dart pub get) in cli/ into one VSIX. It fails if a target is missing unless you name it in --allow-missing; users on that platform then get the CLI built from cli/ on first use.

The Marketplace publisher (VaibhavBhus) differs from the Open VSX namespace (Vaibhav-Bhus) used by Antigravity and other VS Code forks, so there are two files: janklens-<version>.vsix for the Marketplace and janklens-<version>-openvsx.vsix for Open VSX. npm run package and npm run package:openvsx build one each.

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. Optional variables: JANKLENS_EXTENSION_PATH tests an installed or unpacked VSIX instead of this folder, JANKLENS_EXPECT_CLI_SOURCE asserts where the CLI came from (bundled, built, …), and JANKLENS_VM_SERVICE_URI makes a real recording of a running profile-mode app.