调试 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 并且您使用了 --debug-extension 标志来运行 webdev，请单击浏览器窗口右上角的 Dart 徽标 。

   • 如果您使用了 --debug 标志来运行 webdev，请按 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 DevTools 文档中所述。
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.7.1 版本。页面上次更新于 2024-05-29。 查看源代码 或 报告问题。