CODEWITHSUNDEEP
dartvisual-studio-code
cjmarques
cjmarques

Reputation: 682

debugging dart in visual studio code

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.

Upvotes: 6

Views: 10892

Answers (2)

Danny Tuppeny
Danny Tuppeny

Reputation: 42433

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.

Upvotes: 3

Maksym Anurin
Maksym Anurin

Reputation: 3977

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.

Upvotes: 5

Related Questions