调试 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. 点击“日志记录”按钮以查看标准输出、标准错误和系统日志。

如果您使用的是命令行而不是 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 检查器教程中所述。
2. 启用断点，可以选择所有异常或仅未捕获的异常。请参阅添加 JavaScript 断点（位于Safari 开发者帮助中）。
3. 重新加载您的应用。

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

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

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