在 Visual Studio 代码中调试飞镖答案

【问题标题】：debugging dart in visual studio code在 Visual Studio 代码中调试飞镖
【发布时间】：2019-07-22 19:59:49
【问题描述】：

我是 Dart/Visual Studio 代码的新手，并且在设置一个预定义的舞台手应用程序“web-angular”时遇到了困难。

我已经安装了 dart 语言支持扩展并创建了一个名为 c:\webdev\Angular_dart 的新文件夹。从 VSCode 的终端中，我运行“stagehand web-angular”，然后运行“pub get”，然后运行“pub global run webdev serve web:8888”

我可以看到默认网页（待办事项列表），但是当我在 VSCode 中按 F5 时，它给了我一个错误，说它看不到我的 lib 文件夹中的任何文件。

它击中的第一个是..

web/main.dart:2:8: Error: Error when reading 'lib/app_component.template.dart': The system cannot find the file specified.

import 'package:Angular_Dart/app_component.template.dart' as ng;

看起来我的 .packages 文件设置正确，因为我的最后一行显示

Angular_Dart:lib/

而我的launch.json配置是

"name": "Dart",
"program": "web/main.dart",
"request": "launch",
"type": "dart"

有人看过吗？

提前致谢。

【问题讨论】：

尽量不要在文件名和包名中使用大写。 Angular_Dart 应该是 angular_dart 任何地方（pubspec.yaml`，导入，文件名，...）

标签： dart visual-studio-code

【解决方案1】：

现在很简单。使用以下配置：

{
    "name": "Dart",
    "program": "web/index.html",
    "request": "launch",
    "type": "dart"
}

VS 代码：1.50.1
Dart SDK：2.11.0-213.1.beta

确保“程序”指向索引 HTML 文件。

【讨论】：

谢谢，这很有帮助。有没有办法指定热重载？

【解决方案2】：

编辑：此答案已过时，请参阅上面 theanurin 的答案或the Dart-Code v3.7 release notes。

Dart VS Code 扩展目前对 Web 应用程序没有一流的支持，因此不幸的是，它不像 Flutter 或 CLI 项目那样只需按 F5 即可。

这里有一些相关的讨论：

Flutter Devtools 应用程序为此进行了一定程度的设置，并且具有 VS Code 任务和启动配置以使用 webdev serve 启动：

https://github.com/flutter/devtools/tree/master/packages/devtools/.vscode

构建配置使用 Chrome 调试器来启动浏览器，但有一个运行 webdev serve 的 preLaunchTask。它可以工作，但调试并不完美，它通过 Chrome Debugger 扩展使用源映射。

【讨论】：