除錯 Dart Web 應用

您可以使用 Dart IDE、Dart DevTools 以及 Chrome DevTools 等瀏覽器工具來除錯您的 Dart Web 應用。

• 要除錯您應用的邏輯，請使用您的 IDE、Dart DevTools 或瀏覽器工具。相比瀏覽器工具，Dart DevTools 在檢查和自動重新載入 Dart 程式碼方面提供了更好的支援。
• 要除錯您應用的外觀 (HTML/CSS) 和效能，請使用您的 IDE 或 Chrome DevTools 等瀏覽器工具。

要提供您的應用，請使用 webdev serve（透過命令列或您的 IDE）啟動 Dart 開發編譯器。要啟用 Dart DevTools，請新增 --debug 或 --debug-extension 選項（透過命令列或您的 IDE）。

webdev serve --debug

當使用 webdev 的 --debug 標誌執行您的應用時，您可以按 Alt+D（在 macOS 上按 Option+D）開啟 Dart DevTools。

要開啟 Chrome DevTools，請按 Control+Shift+I（在 macOS 上按 Command+Option+I）。如果您想使用 Chrome DevTools 除錯您的應用，您可以使用源對映 來顯示您的 Dart 原始檔，而不是編譯器生成的 JavaScript 檔案。有關使用 Chrome DevTools 的更多資訊，請參閱Chrome DevTools 文件。

要使用 Dart DevTools 或 Chrome DevTools 除錯 Dart Web 應用，您需要以下軟體

• Google Chrome。
• Dart SDK，版本 2.0.0 或更高。
• 以下開發環境之一
  • 命令列：Dart 命令列工具包，例如 webdev（Dart 和 Chrome DevTools 都需要）和 devtools（Dart DevTools 需要）。
    或
  • 支援 Web 開發的Dart IDE 或編輯器。
• 一個要除錯的Dart Web 應用。

本節將引導您瞭解使用 Dart DevTools 除錯 Web 應用的基礎知識。如果您已經有一個可以除錯的應用，則可以跳過建立測試應用（第 1 步），但您需要根據您的應用調整說明。

1. 可選：克隆 webdev 倉庫，以便您可以使用其示例應用來試用 Dart DevTools。

2. 可選：安裝 Dart Debug Extension，以便您可以在已執行的 Chrome 例項中執行您的應用並開啟 Dart DevTools。

3. 在您應用的頂級目錄中，執行 dart pub get 來獲取其依賴項。

   cd example
   dart pub get

4. 使用您的 IDE 或在命令列上使用 webdev 編譯並以除錯模式提供應用。

   如果您在命令列上使用 webdev，要使用的命令取決於您是否希望（或需要）在已執行的 Chrome 例項中執行應用和偵錯程式。

   • 如果您已安裝 Dart Debug Extension 並想使用現有的 Chrome 例項進行除錯

     webdev serve --debug-extension

   • 否則，使用以下命令，它會啟動一個新的 Chrome 例項並執行應用

     webdev serve --debug

5. 如果您的應用尚未執行，請在 Chrome 瀏覽器視窗中開啟它。
   例如，如果您不帶引數使用 webdev serve --debug-extension，請開啟 http://127.0.0.1:8080。

6. 開啟 Dart DevTools 除錯當前視窗中執行的應用。

   • 如果已安裝 Dart Debug Extension 並且您對 webdev 使用了 --debug-extension 標誌，請點選瀏覽器視窗右上角的 Dart 徽標 。

   • 如果您對 webdev 使用了 --debug 標誌，請按 Alt+D（在 macOS 上按 Option+D）。

   將出現 Dart DevTools 視窗，並顯示您的應用主檔案的原始碼。

7. 透過點選計時器或事件處理程式程式碼行左側來設定斷點。
   例如，點選事件處理程式或計時器回撥函式內部第一行的行號。

8. 觸發導致函式呼叫的事件。執行將在斷點處停止。

9. 在變數面板中，檢查變數的值。

10. 恢復指令碼執行，並再次觸發事件或按暫停。執行將再次暫停。

11. 嘗試使用步入、步過和步出按鈕逐行除錯程式碼。

12. 更改您的原始碼並重新載入執行應用的 Chrome 視窗。應用會快速重新構建並重新載入。在解決 問題 1925 之前，重新載入應用時會丟失您的斷點。

13. 點選日誌按鈕檢視 stdout、stderr 和系統日誌。

如果您使用命令列而不是 IDE 或啟用 Dart 的編輯器，則需要 webdev 工具。Dart DevTools 由 SDK 提供。

dart pub global activate webdev

如果您的 PATH 環境變數設定正確，您現在可以在命令列中使用這些工具

webdev --help
A tool to develop Dart web projects.
...

有關設定 PATH 的資訊，請參閱dart pub global 文件。

無論何時更新 Dart SDK，請透過再次啟用工具來更新它們

dart pub global activate webdev     # update webdev

本節提供了在 Chrome、Firefox 和 Safari 中除錯生產編譯程式碼的技巧。您只能在支援源對映的瀏覽器（如 Chrome）中除錯 JavaScript 程式碼。

無論使用哪種瀏覽器，您都應啟用在至少未捕獲異常時暫停，如果可能，還應啟用在所有異常時暫停。對於像 dart:async 這樣將使用者程式碼包裝在 try-catch 中的框架，我們建議在所有異常時暫停。

在 Chrome 中除錯

1. 開啟開發者工具視窗，如Chrome DevTools 文件中所述。
2. 開啟源對映，如影片 Chrome 中的 SourceMaps 中所述。
3. 啟用除錯，可以選擇在所有異常或僅在未捕獲異常時暫停，如如何設定斷點 中所述。
4. 重新載入您的應用。

在 Edge 中除錯

1. 更新到最新版本的 Edge。
2. 載入開發者工具（F12）。
3. 重新載入應用。偵錯程式標籤頁顯示源對映檔案。
4. 異常行為可以透過 Ctrl+Shift+E 控制；預設設定為在未處理的異常時中斷。

在 Firefox 中除錯

1. 開啟網頁開發者工具視窗，如Firefox 開發者工具文件中所述。

2. 啟用在異常時暫停，如下圖所示

   

3. 重新載入應用。偵錯程式標籤頁顯示源對映檔案。

在 Safari 中除錯

1. 開啟開發選單，如Safari Web Inspector 教程中所述。
2. 啟用中斷，可以選擇在所有異常或僅在未捕獲異常時中斷。請參閱Safari 開發者幫助下的新增 JavaScript 斷點。
3. 重新載入您的應用。

要了解更多資訊，請參閱以下內容

• 您的 IDE 文件
• Dart DevTools 文件
• webdev 工具文件
• webdev 包文件