內容

偵錯 Dart 網路應用程式

您可以使用 Dart IDEDart DevTools 和瀏覽器工具,例如 Chrome DevTools 來偵錯您的 Dart 網路應用程式。

  • 若要偵錯應用程式的邏輯,請使用您的 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 網路應用程式,您需要下列軟體

開始使用 Dart DevTools

#
DevTools

本節將引導您了解使用 Dart DevTools 偵錯網路應用程式的基礎知識。如果您已經有一個準備好要偵錯的應用程式,您可以跳過建立測試應用程式(步驟 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 標誌 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 程式碼。

不論您使用哪一個瀏覽器,您都應該至少啟用暫停於未捕捉的例外狀況,甚至所有例外狀況。對於會在 try-catch 中包住使用者程式碼的架構 (例如 dart:async),我們建議暫停於所有例外狀況。

Chrome

#

在 Chrome 中偵錯

  1. 開啟開發人員工具視窗,如 Chrome DevTools 文件 中所述。
  2. 開啟原始碼對應,如影片 Chrome 中的原始碼對應 中所述。
  3. 啟用偵錯,針對所有例外狀況或僅針對未捕捉的例外狀況,如 如何設定中斷點 中所述。
  4. 重新載入您的應用程式。

Edge

#

在 Edge 中偵錯

  1. 更新至 Edge 的最新版本。
  2. 載入開發人員工具 (F12)。
  3. 重新載入應用程式。偵錯程式索引標籤會顯示原始碼對應的檔案。
  4. 例外狀況行為可透過 Ctrl+Shift+E 控制;預設為中斷於未處理的例外狀況

Firefox

#

在 Firefox 中偵錯

  1. 開啟網頁開發人員工具視窗,如 Firefox 開發人員工具文件 中所述。

  2. 啟用暫停於例外狀況,如下圖所示

    Enable Pause on exceptions in Firefox debugger
  3. 重新載入應用程式。偵錯程式索引標籤會顯示原始碼對應的檔案。

Safari

#

在 Safari 中偵錯

  1. 開啟開發功能表,如 Safari 網頁檢查器教學 中所述。
  2. 啟用中斷,無論是在所有例外情況下,還是僅在未捕捉的例外情況下。請參閱 新增 JavaScript 中斷點,位於 Safari 開發人員說明 中。
  3. 重新載入您的應用程式。

資源

#

如需深入了解,請參閱下列內容