Dart-Code icon indicating copy to clipboard operation
Dart-Code copied to clipboard

Debugging Dart web app (via webdev) downloads source code from instead of mapping back to local paths

Open andynewman10 opened this issue 2 years ago • 4 comments

Describe the bug

  • VS code does not stop on my breakpoint the first time a web page is run through a debug session.
  • when refreshing the web page, the breakpoint is indeed hit, and the locations of the breakpoints are not correctly displayed with a red dot.
  • a Which DevTools page? message keeps being displayed in the command palette everything time a debug session is initiated. Is this expected? How to get rid of this?

To Reproduce

Steps to reproduce the behavior:

  1. Create a new dart project with dart create -t web dartwebapp
  2. Open the main.dart file, place a breakpoint on the first line, and start a debug session by clicking the Debug text above main.

Expected behavior

The web page should be open, and the debugger should stop on the first line of code. All breakpoint locations should be displayed with a red dot.

Actual behavior

VS code asks to activate webdev when running a debug session for the first time. OK with me. To be on the safe side, I then close VS code then reload it, and start the debug session (not closing and restarting VS triggers weird stuff in the console, with Write failed errors and weird GET /packages/...dill messages).

  • a web page opens and the main function is run
  • my breakpoint is not hit
  • in the VS window, I see a Which DevTools page? in the command palette, with choices ranging from Open Widget Inspector Page to Open DevTools in Web Browser. I choose this latter option. A new browser window opens with 'Connected app'.

Now I hit refresh on my web page.

  • the debugger does stop, but it stops on another main.dart file, which path is 'org-dartlang-app:..\web\main.dart'. The breakpoints are not correctly shown in this file.

I close the debug session, and start a new one: Which DevTools page? is, again, proposed.

What is exactly this option for, how to define it once for all and is it possible for VS code to debug my actual main.dart file, not the other main.dart file (see above)?

  • Operating System and version: Windows 11
  • VS Code version: 1.87.0
  • Dart extension version: 3.84.0
  • Dart/Flutter SDK version: 3.19.2
  • Target device (if the issue relates to Flutter debugging):

andynewman10 avatar Mar 07 '24 09:03 andynewman10

Unfortunately, not hitting the breakpoints at startup is a webdev issue because it doesn't support starting paused (this means there is a race between us setting breakpoints and the code being executed). There's an open issue about that at https://github.com/dart-lang/webdev/issues/830

in the VS window, I see a Which DevTools page? in the command palette, with choices ranging from Open Widget Inspector Page to Open DevTools in Web Browser. I choose this latter option. A new browser window opens with 'Connected app'.

Sounds odd that we're prompting here - I've opened https://github.com/Dart-Code/Dart-Code/issues/5025 to look into that issue.

the debugger does stop, but it stops on another main.dart file, which path is 'org-dartlang-app:..\web\main.dart'. The breakpoints are not correctly shown in this file.

@elliette are you familiar with this org-dartlang-app scheme? I think somewhere along the line these should be mapped back to real file paths (there's some previous discussion about this in https://github.com/dart-lang/webdev/issues/790) but I don't know where that's supposed to happen.

DanTup avatar Mar 07 '24 10:03 DanTup

@elliette are you familiar with this org-dartlang-app scheme? I think somewhere along the line these should be mapped back to real file paths (there's some previous discussion about this in https://github.com/dart-lang/webdev/issues/790) but I don't know where that's supposed to happen.

Looking at my tests, I'm not sure they've ever verified we got back real paths here. The breakpoint tests do normally compare paths, but only if we actually get a path back from the debug adapter (and in this case we do not, we end up downloading the source from the VM).

So probably, it's always worked this way. It would be nice if we could handle that mapping though - perhaps the VM Service's lookupResolvedUris would handle this? I'll have to do some testing (right now, webdev is still using the legacy DAPs - we don't have an SDK implementation for it).

DanTup avatar Mar 07 '24 11:03 DanTup

I've updated the title of this slightly to reflect the remaining issue here (that we're downloading a copy of the source instead of mapping it to a local source on disk). The other issues mentioned above are covered by https://github.com/dart-lang/webdev/issues/830 and https://github.com/Dart-Code/Dart-Code/issues/5025).

DanTup avatar Mar 07 '24 11:03 DanTup

Regarding not hitting breakpoints at startup - I'm actively working on fixing this issue (progress is being tracked at https://github.com/flutter/devtools/issues/7231). The fix will most likely be in the next release of package:webdev.

Regarding the wrong main.dart file opening - this is a new one for me! I've opened https://github.com/dart-lang/webdev/issues/2383

elliette avatar Mar 07 '24 19:03 elliette