Dart to JS: How to debug the generated Javascript errors

Question

Currently, the Javascript generated by dart2Js converter is very unintuitive to debug and doesn't produce intelligible error messages.

Is there a specific way that people use to debug Javascript code generated by dart?

I would like to get to the Dart line that is responsible for the error.

Also it would be great to see core dump and stack frames in terms of Dart code.

Seems there is ongoing work to support this eventually https://github.com/dart-lang/dev_compiler — Günter Zöchbauer, Feb 26 '15 at 17:31
The Javascript source maps solution is better. I want to see the Dart line that caused the error. And Dart stack frame. I dont ever want to deal with Javascript (hopefully :P). — Ravi Teja Gudapati, Feb 27 '15 at 09:32

score 5 · Answer 1 · edited Jun 20 '20 at 09:12

5

At first ensure that you build with pub build --mode=debug.
This prevents minification and tree shaking.

Ensure that source maps are activated in Chrome devtools.
(DevTools settings - General - Sources - Enable JavaScript source maps).

Launch the application and debug.
The Chrome debugger should now show Dart source code when stepping through.

There seems to be an issue that the script used by default doesn't reference source maps How make pub build to use source maps on dart polymer projects

edited Jun 20 '20 at 09:12

Community

answered Sep 02 '14 at 13:23

Thanks!!! I am not debugging for Chrome but for Firefox. Also, it would be great to see which dart line is responsible and see the stack frame with references to dart file and line numbers. – Ravi Teja Gudapati Sep 02 '14 at 14:16
I don't know Firefox so well but it supports source maps too. – Günter Zöchbauer Sep 02 '14 at 14:17

1 Answers1