內容

Dart DevTools 是一套適用於 Dart 和 Flutter 的除錯和效能工具。這些工具會作為 dart 工具的一部分進行散佈,並與 IDE、dart runwebdev 等工具互動。

Screenshot of DevTools' Memory page

下表顯示您可以與常見的 Dart 應用程式類型搭配使用的工具。

工具Flutter 行動裝置或桌上型電腦Flutter 網頁其他網頁命令列
除錯器完成完成完成完成
記錄檢視完成完成完成完成
應用程式大小工具完成完成
CPU 分析器完成完成
記憶體檢視完成完成
網路檢視完成完成
效能檢視完成完成
Flutter 檢查器完成完成

如需瞭解如何將 Dart DevTools 與各個應用程式類型搭配使用(例如命令列應用程式)的資訊,請按一下最上排的應用程式類型。如需瞭解個別工具(例如除錯器)的詳細資料,請按一下左欄中的工具名稱。

如表格所示,除錯器和記錄檢視是 Dart DevTools 中唯一可供所有應用程式類型使用的部分。網頁應用程式無法使用時間軸、記憶體和效能檢視;相反地,它們可以使用瀏覽器工具,例如 Chrome DevTools。 Flutter 檢查器僅適用於 Flutter 應用程式;其他網頁應用程式應使用瀏覽器工具,例如 Chrome DevTools。

在命令列應用程式中使用 DevTools

#

您可以使用 DevTools 執行原始碼層級除錯,或查看正在執行的命令列應用程式的常規記錄和診斷資訊。

1. 啟動目標應用程式

#

使用 dart run --observe 指令執行您想要除錯或觀察的 Dart 命令列應用程式的 main 檔案。您可以選擇性地新增 --pause-isolates-on-start,這會在腳本開始時自動中斷執行。

$ cd path/to/dart/app
$ dart run --pause-isolates-on-start --observe main.dart

The 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

請注意 Dart DevTools 除錯器和分析器 URL。您在下一步中會需要它。

2. 開啟 DevTools 並連線到目標應用程式

#

複製 Dart DevTools 除錯器和分析器 URL,並將它貼到 Chrome 瀏覽器視窗的網址列中。

當您在 Chrome 中瀏覽該 URL 時,Dart DevTools UI 會出現,顯示有關目標應用程式的資訊。按一下 除錯器 開始除錯應用程式。

在 Flutter 應用程式中使用 DevTools

#

如需瞭解如何將 DevTools 與任何平台(包括網頁)的 Flutter 應用程式搭配使用的詳細資料,請參閱 flutter.dev 上的 DevTools 文件

在非 Flutter Web 應用程式中使用 DevTools

#

如需啟動網頁應用程式以便您可以使用 Dart DevTools,請使用 webdev serve 指令搭配 --debug--debug-extension 旗標

$ webdev serve --debug

如需瞭解更多資訊,請參閱 除錯 Dart 網路應用程式