Dart DevTools is a suite of debugging and performance tools for Dart and Flutter. These tools are distributed as part of thedart tool and interact with tools such as IDEs,dart run, andwebdev.

The following table shows which tools you can use with common Dart app types.

For information about using Dart DevTools with each app type (for example, command-line apps), click the app type in the top row. For details about individual tools (for example, the debugger), click the tool name in the left column.

As the table shows, the debugger and the logging view are the only parts of Dart DevTools that are available to all app types. Web apps can't use the timeline, memory, and performance views; instead, they can use browser tools such as theChrome DevTools. The Flutter inspector works only for Flutter apps; other web apps should use browser tools such as the Chrome DevTools.

You can use DevTools to perform source-level debugging or to view general log and diagnostics information for a running command-line app.

Use thedart run --observe command to execute the main file for the Dart command-line app that you want to debug or observe. Optionally add--pause-isolates-on-start, which automatically breaks execution at the start of the script.

$cd path/to/dart/app$dart run --pause-isolates-on-start --observe main.dartThe Dart VM service is listening on http://127.0.0.1:8181/afZySiNbDPg=/The Dart DevTools debugger and profiler is available at: http://127.0.0.1:8181/afZySiNbDPg=/devtools/#/?uri=ws%3A%2F%2F127.0.0.1%3A8181%2FafZySiNbDPg%3D%2Fws

Note theDart DevTools debugger and profiler URL. You'll need it in the next step.

Copy theDart DevTools debugger and profiler URL, and paste it into the address bar of a Chrome browser window.

When you visit that URL in Chrome, the Dart DevTools UI appears, displaying information about the target app. ClickDebugger to start debugging the app.

Configure VS Code to launch Dart command-line apps with DevTools enabled to access features like the Timeline view.

The following table shows examples of VS Code debug configurations for Dart apps:

To enable timeline events, add this configuration to your.vscode/launch.json:

{"version":"0.2.0","configurations":[{"name":"Dart with DevTools Timeline","type":"dart","request":"launch","vmAdditionalArgs":["--timeline_streams=VM,Isolate,GC"],"program":"main.dart"}]}

Replace"main.dart" with the path to your app's main file.

1. Start debugging in VS Code using the configured launch configuration.

2. In the VS Code Debug Console or terminal output, look for a line similar to:

   The Dart DevTools debugger and profiler is available at: http://127.0.0.1:8181/aBcDeFg123=/devtools/#/?uri=...

   content_copy

3. Copy the DevTools URL and paste it into a Chrome browser window.

4. In DevTools, view the timeline, memory, and performance for your running app.

For details on using DevTools with a Flutter app for any platform (including web) see theDevTools documentation on flutter.dev.

To launch a web app so that you can use Dart DevTools, use thewebdev serve command with the--debug or--debug-extension flag:

$webdev serve --debug

For more information, seeDebugging Dart web apps.