Rift Panel

INTEGRATIONS

Flutter DevTools

An embedded Flutter DevTools panel with automatic detection of DevTools URLs from terminal output, giving you performance profiling and widget inspection without leaving your workspace.

Flutter DevTools is a suite of debugging and profiling tools for Flutter applications. Normally, DevTools opens in a separate browser window that you have to manage alongside your editor and terminal. Rift Panel embeds DevTools directly into a workspace panel, so you can inspect widget trees, profile performance, analyze network requests, and debug layouts right next to your running terminal sessions.

DevTools Panel

The Flutter DevTools panel renders the DevTools web interface inside an iframe within your workspace. The panel supports all standard DevTools features:

  • Flutter Inspector — Browse the widget tree, view widget properties, and toggle debug paint overlays
  • Performance — Analyze frame rendering times, identify jank, and profile rebuild counts
  • CPU Profiler — Capture and examine CPU profiles to find expensive function calls
  • Memory — Monitor memory usage, track allocations, and detect memory leaks
  • Network — Inspect HTTP requests and responses made by your Flutter app
  • Logging — View structured log messages from your application and framework

The panel connects to the DevTools server that is started alongside your Flutter application. When your Flutter app is running in debug mode, the Dart VM exposes a VM service URL. DevTools connects to this URL to communicate with the running app. Rift Panel simply embeds the same DevTools UI that would otherwise open in your browser.

You can resize the DevTools panel like any other Rift Panel panel. The embedded DevTools interface is fully responsive and adapts to the available space. For complex profiling sessions, maximize the panel with Ctrl+Shift+M to give DevTools the full workspace area.

Auto-Detection

When you run a Flutter application in debug mode (via flutter run), the Flutter tool prints a line like: 

The Flutter DevTools debugger and profiler on Chrome is available at:
http://127.0.0.1:9100?uri=http://127.0.0.1:52485/aBcDeFgH=/

Rift Panel monitors all terminal sessions for this output pattern. When a DevTools URL is detected, one of two things happens:

  • If a DevTools panel is already open — The panel automatically navigates to the detected URL, connecting to the newly launched app.
  • If no DevTools panel is open — A notification toast appears at the bottom of the workspace with the message "Flutter DevTools available" and an "Open" button. Clicking it creates a new DevTools panel pre-configured with the detected URL.

Auto-detection works regardless of which terminal session is running the Flutter app. Whether you start the app in a Shell session, a Claude Code session that runs flutter run, or any other session type, Rift Panel will detect the DevTools URL.

If you are running multiple Flutter apps simultaneously in different sessions, each will produce a separate DevTools URL. Open multiple DevTools panels to inspect each app independently.

Prerequisites

The Flutter DevTools panel requires the following:

  • Flutter SDK — Flutter must be installed and the flutter binary must be on your PATH. DevTools is bundled with the Flutter SDK starting from Flutter 2.8.
  • Debug mode — Your Flutter application must be running in debug mode. DevTools does not connect to release or profile builds. Use flutter run (without the --release flag) to start your app in debug mode.
  • DevTools server — The DevTools server is started automatically by flutter run. If you are running your app through an IDE or custom script, ensure the DevTools URL is printed to stdout so Rift Panel can detect it.

If auto-detection does not trigger, you can manually paste a DevTools URL into the panel's address bar. Look for the DevTools URL in your terminal output and copy the full URL including the uri query parameter.