DOCSEARCHbyAlgolia
Submit Docs

Dart & Flutter DevTools

repository·master·Indexed 23 days ago

https://github.com/flutter/devtools

A suite of performance and debugging tools for the Dart and Flutter ecosystems. Includes the devtools_app_shared package for VM service management, isolates, service extensions, and shared UI components, as well as infrastructure for running performance and size benchmarks and integration tests.

Tokens
21.2K
Snippets
48
Records
118
Agent score
82%

What's inside flutter-devtools

  1. Overview of Dart & Flutter DevTools Extensions

    master

    DevTools Extensions allow you to extend the Dart DevTools suite with custom tools. These extensions are built as Flutter web apps and are embedded within DevTools via an iFrame.

    Extensions can be:

    • Companion tools: Added to an existing pub package.
    • Standalone tools: Provided by a new package that only offers the extension.

    To make an extension visible to an end-user, the user must include the package providing the extension as a dependency in their project. Once detected, the extension appears in its own dedicated DevTools tab.

    Supported tool types include:

    • Tools interacting with a running application.
    • Tools that do not interact with a running application.
    • Tools interacting with project files in the IDE.
    • Companion tools for existing packages.

  2. Overview of Dart & Flutter DevTools

    master
    Dart & Flutter DevTools is a suite of performance tools designed for Dart and Flutter developers. It provides various tools to inspect, debug, and optimize the performance of Dart and Flutter applications.

  4. Use the devtools_shared package for JSON data structures

    master

    The devtools_shared package provides the formal data structures used to describe the format of JSON files exchanged between DevTools components. Use this package if you are building tools that need to parse or generate the specific JSON formats used by DevTools, such as heap samples or memory information.

    Key data structures include:

    • HeapSample: Represents heap sampling data.
    • HeapSpace: Represents memory structures collected from the Dart VM.
    • AdbMemoryInfo: Represents memory information collected from Android's ADB.

  7. Overview of DevTools test types

    master

    DevTools uses several testing layers to ensure quality:

    1. Unit tests: Validate business logic.
    2. Widget tests: Test DevTools UI components using mock or fake data. These may include golden image testing.
    3. Partial integration tests: Test DevTools UI and business logic using a real VM service connection to a test app.
    4. Full integration tests: Flutter web integration tests that run DevTools as a web app and connect to real test apps on mobile, web, and Dart CLI platforms. (See packages/devtools_app/integration_test/README.md for details).
    5. Benchmark tests: Verify rendering performance and web app bundle size against expected thresholds. (See packages/devtools_app/benchmark/README.md for details).

  8. Understand the boundary between DevTools and DevTools extensions

    master

    When developing, distinguish between the extension template and the DevTools core API:

    • For building extensions: Use the files in this directory, which are exported via lib/devtools_extensions.dart.
    • For shared logic: Anything that must be shared between DevTools itself and DevTools extensions should be located in the src/api directory and exported through lib/api.dart.

    Note: The code in this specific template directory is not intended to be imported into the DevTools core codebase.

  9. How DevTools Charting works

    master

    The DevTools charting subsystem is designed to plot time-series data using a hierarchical model of Traces and Data.

    • Traces: A trace is a collection of data points plotted on the same temporal X-axis (time). Each trace defines its own monolithic rendering characteristics (color, shape, stroke width, etc.). This design allows for efficient rendering of tens of thousands of points by applying the same style to the entire trace rather than per-datum.
    • Data (Data points): A datum represents a single point in time with a corresponding Y value. For line charts, the Y value determines position; for symbol charts, it can represent event placement.
    • ChartController: The central authority that manages traces, timestamps, and the X-axis scale.

    Supported chart types include:

    1. Line charts: Used to display continuous values or events.
    2. Scatter charts: Used to display discrete points, with or without shading from 0 to the Y coordinate.

  10. Understand the Performance Timeline architecture

    master

    The Performance Timeline in DevTools follows a Model-View-Controller (MVC) pattern to decouple data processing from the user interface:

    • View: The UI layer. It has no direct awareness of the raw timeline data. Instead, it accesses data (such as frames, selected events, selected frames, and CPU profiles) through the TimelineController via streams.
    • Model (TimelineData): The data layer. It stores the current state of the DevTools timeline, including frames, selectedFrame, selectedEvent, cpuProfileData, and traceEvents. This state is maintained by the TimelineController.
    • Controller (TimelineController): The orchestration layer. It manages the TimelineData and facilitates communication between the View and the data sources. It handles data processing using two specific protocols:
      • TimelineProtocol: Processes trace events and composes them into TimelineEvents and TimelineFrames.
      • CpuProfileProtocol: Processes CpuProfileData and composes it into a structured tree of CpuStackFrames.

    The TimelineController communicates with the TimelineService, which manages the actual interactions between the Timeline and the VmService. Notably, TimelineController has no dependency on dart:html, ensuring it is platform-independent and easily testable.

  11. Choose between 'live connection' and 'offline' integration tests

    master

    Decide where to place your test based on whether you need a live application or stable data:

    • "live connection" integration tests: Located in integration_test/test/live_connection. These run a real Dart or Flutter "test app" and connect DevTools to it.
    • "offline" integration tests: Located in integration_test/test/offline. These run DevTools without a live application by loading offline data. Use this for features with unstable live data (e.g., Performance screen timelines) to enable reliable screenshot testing.

  12. Understand Runtime vs Static DevTools extensions

    master

    DevTools extensions can be categorized into two types based on whether they require a running application to function:

    Runtime Extensions

    These extensions load in their own tab in DevTools when debugging a connected application, CLI app, or test. They are provided by the dependencies of the application being debugged.

    Static Extensions

    These extensions are available even without a connected application. You can declare an extension as static by setting requiresConnection: false in the extension/devtools/config.yaml file.

    Static extensions can be viewed in the Flutter sidebar panel in VS Code without an active debug session.