debugging dart in visual studio code

Question

I'm new to Dart/Visual studio code and have hit a wall setting up one of the predefined stagehand apps "web-angular".

I've installed the dart language support extension and created a new folder called c:\webdev\Angular_dart . From within the terminal in VSCode i ran "stagehand web-angular", then "pub get" then "pub global run webdev serve web:8888"

I'm able to see the default web page (a todo list) but when I hit F5 from within VSCode it gives me an error saying it can't see any of the files in my lib folder.

The first one it hits is..

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;

it looks like my .packages file is setup correctly as my last line reads

Angular_Dart:lib/

And my launch.json configuration is

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

Has anyone seen this?

Thanks in advance.

Try not to use uppercase in file names and package names. Angular_Dart should be angular_dart everywhere (pubspec.yaml`, imports, file names, ...) — Günter Zöchbauer
– Günter Zöchbauer, Commented Feb 28, 2019 at 20:46

Maksym Anurin · Accepted Answer · 2020-11-06 21:35:50Z

5

Right now it's simple. Use following configuration:

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

VS Code: 1.50.1
Dart SDK: 2.11.0-213.1.beta

Make sure "program" points to the index HTML file.

answered Nov 6, 2020 at 21:35

Maksym Anurin

4,1071 gold badge23 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

cjmarques Over a year ago

Thank you, this has been very helpful. Is there a way to specify hot reload?

Danny Tuppeny · Accepted Answer · 2020-11-09 21:19:59Z

Edit: This answer is out of date, see theanurin's answer above or the Dart-Code v3.7 release notes.

The Dart VS Code extension doesn't currently have first-class support for web apps so unfortunately it's not as simple as just hitting F5 like for Flutter or CLI projects.

There are some relevant discussions here:

The Flutter Devtools app is somewhat set up for this, and has VS Code tasks and launch configs to launch with webdev serve:

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

The build config uses the Chrome Debugger for launching the browser, but has a preLaunchTask that runs webdev serve. It works, but the debugging isn't perfect, it's using source maps via the Chrome Debugger extension.

Collectives™ on Stack Overflow

debugging dart in visual studio code

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related