调试 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 调试扩展，以便您可以运行您的应用并在 Chrome 的已运行实例中打开 Dart DevTools。

3. 在您应用的顶层目录中，运行 dart pub get 以获取其依赖项。

   $ cd example
   $ dart pub get

4. 使用您的 IDE 或命令行中的 webdev 以调试模式编译并服务该应用。

   如果您在命令行中使用 webdev，则要使用的命令取决于您是否想要（或需要）在 Chrome 的已运行实例中运行应用和调试器。

   • 如果您已安装 Dart 调试扩展，并且想要使用现有的 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 调试扩展，并且您使用了 webdev 的 --debug-extension 标志，请单击浏览器窗口右上角的 Dart 徽标 。

   • 如果您使用了 webdev 的 --debug 标志，请按 Alt+D（在 macOS 上是 Option+D）。

   Dart DevTools 窗口会出现，并显示您应用主文件的源代码。

7. 通过单击代码行的左侧，在计时器或事件处理程序内部设置断点。
   例如，单击事件处理程序或计时器回调内部第一行的行号。

8. 触发导致函数调用的事件。执行在断点处停止。

9. 在 变量 窗格中，检查变量的值。

10. 恢复脚本执行，并再次触发该事件或按 暂停。执行再次暂停。

11. 尝试使用 单步进入、单步跳过 和 单步跳出 按钮逐行执行代码。

12. 更改您的源代码并重新加载运行该应用的 Chrome 窗口。该应用会快速重建并重新加载。在 issue 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 开发者工具文档中所述。
2. 启用源映射，如视频 Chrome 中的 SourceMaps 中所述。
3. 启用调试，可以在所有异常或仅在未捕获的异常处启用，如 如何设置断点中所述。
4. 重新加载您的应用。

在 Edge 中调试

1. 更新到最新版本的 Edge。
2. 加载 开发者工具 (F12)。
3. 重新加载应用。调试器选项卡会显示源映射文件。
4. 异常行为可以通过 Ctrl+Shift+E 控制；默认设置为在未处理的异常处中断。

在 Firefox 中调试

1. 打开 Web 开发者工具 窗口，如 Firefox 开发者工具文档中所述。

2. 启用 在异常处暂停，如下图所示

   

3. 重新加载应用。调试器选项卡会显示源映射文件。

在 Safari 中调试

1. 启用 开发 菜单，如 Safari Web Inspector 教程中所述。
2. 启用断点，可以在所有异常或仅在未捕获的异常处启用。请参阅 添加 JavaScript 断点，位于 Safari 开发者帮助下。
3. 重新加载您的应用。

要了解更多信息，请参阅以下内容

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

除非另有说明，本网站上的文档反映了 Dart 3.6.0。页面最后更新于 2024-05-29。 查看源代码 或 报告问题。