偵錯 Dart 網頁應用程式
您可以使用 Dart IDE、Dart 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 網頁應用程式，您需要下列軟體
- Google Chrome。
- Dart SDK，版本 2.0.0 或更高版本。
- 下列其中一個開發環境
- 命令列：Dart 命令列工具套件，例如 webdev（Dart 和 Chrome DevTools 皆需）和 devtools（Dart DevTools 需要）。
或 - 支援網頁開發的 Dart IDE 或編輯器。
- 命令列：Dart 命令列工具套件，例如 webdev（Dart 和 Chrome DevTools 皆需）和 devtools（Dart DevTools 需要）。
- 要偵錯的 Dart 網頁應用程式。
開始使用 Dart DevTools
#
本節將引導您了解使用 Dart DevTools 偵錯網頁應用程式的基本知識。如果您已經有準備好偵錯的應用程式，您可以跳過建立測試應用程式（步驟 1），但您需要調整指示以符合您的應用程式。
選用：複製 webdev 儲存庫，這樣您就可以使用其範例應用程式來操作 Dart DevTools。
選用：安裝 Dart 偵錯擴充功能，這樣您就可以執行您的應用程式，並在已執行的 Chrome 執行個體中開啟 Dart DevTools。
在您應用程式的最上層目錄中，執行
dart pub get以取得其相依性。$ cd example $ dart pub get使用您的 IDE 或命令列上的
webdev，以偵錯模式編譯並提供應用程式。如果您在命令列使用 webdev，要使用的命令取決於您是否想要（或需要）在已執行的 Chrome 執行個體中執行應用程式和偵錯工具。
如果您已安裝 Dart 偵錯擴充功能，並想要使用現有的 Chrome 執行個體進行偵錯
$ webdev serve --debug-extension否則，請使用下列命令，它會啟動新的 Chrome 執行個體並執行應用程式
$ webdev serve --debug
如果您的應用程式尚未執行，請在 Chrome 瀏覽器視窗中開啟它。
例如，如果您使用webdev serve --debug-extension但沒有任何引數，請開啟 http://127.0.0.1:8080。開啟 Dart DevTools 以偵錯目前視窗中執行的應用程式。
如果已安裝 Dart 偵錯擴充功能，且您使用
webdev的--debug-extension旗標，請按一下瀏覽器視窗右上角的 Dart 標誌
。如果您使用
webdev的--debug旗標，請按 Alt+D（或 macOS 上的 Option+D）。
Dart DevTools 視窗隨即出現，並顯示應用程式主要檔案的原始程式碼。
按一下程式碼行左側，在計時器或事件處理常式內設定中斷點。
例如，按一下事件處理常式或計時器回呼內第一行的行號。觸發造成函式呼叫的事件。執行會在該中斷點停止。
在 變數 窗格中，檢查變數的值。
繼續指令碼執行，並再次觸發該事件，或按 暫停。執行會再次暫停。
嘗試使用 單步進入、單步跳過 和 單步跳出 按鈕逐行單步執行程式碼。
變更您的原始程式碼並重新載入執行應用程式的 Chrome 視窗。應用程式會快速重建和重新載入。在 問題 1925 修正之前，重新載入應用程式時會遺失您的中斷點。
按一下 記錄 按鈕以查看 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 中偵錯
- 開啟開發人員工具視窗，如 Chrome DevTools 文件中所述。
- 開啟來源對應，如影片 Chrome 中的來源對應中所述。
- 啟用偵錯功能，您可以針對所有例外狀況或僅針對未捕獲的例外狀況進行偵錯，如如何設定中斷點所述。
- 重新載入您的應用程式。
Edge
#在 Edge 中偵錯
- 更新至最新版本的 Edge。
- 載入開發人員工具 (F12)。
- 重新載入應用程式。偵錯工具分頁會顯示來源對應的檔案。
- 例外狀況行為可透過 Ctrl+Shift+E 控制；預設值為在未處理的例外狀況時中斷。
Firefox
#在 Firefox 中偵錯
開啟網頁開發人員工具視窗，如Firefox 開發人員工具文件中所述。
啟用在例外狀況時暫停，如下圖所示
重新載入應用程式。偵錯工具分頁會顯示來源對應的檔案。
Safari
#在 Safari 中偵錯
- 開啟開發選單，如Safari 網頁偵測器教學中所述。
- 啟用中斷，您可以針對所有例外狀況或僅針對未捕獲的例外狀況中斷。請參閱新增 JavaScript 中斷點，位於Safari 開發人員說明之下。
- 重新載入您的應用程式。
資源
#若要了解更多資訊，請參閱以下內容
除非另有說明，否則本網站上的文件反映 Dart 3.6.0。頁面最後更新於 2024-05-29。 檢視原始碼 或 回報問題。