How to build flutter web app in debug mode?

Question

flutter build web will build my flutter app with obfuscation and minification.

I want my error stack to be readable though.

How should I modify the command?

Beberg

good question, did you find a solution? – Stubblefield

nope. it seems it is impossible – Beberg

maybe a good idea for a feature request on the flutter github – Stubblefield

Answer 1

Try:

flutter build web --profile --dart-define=Dart2jsOptimization=O0

See:

https://github.com/flutter/flutter/blob/720dff6a94bd054e82ec4bf84b5cb802bbc52ddd/packages/flutter_tools/lib/src/build_system/targets/web.dart#L238-L239

Homophone

This isn't the same as debug mode tho. In debug mode (and flutter run -d chrome), assert expressions are executed. With this command, they aren't, and the obvious flutter build web --debug fails with 'Could not find an option named "debug"' – Messenia

This was good enough for me to error trace production-only issues, where previously the minification was preventing me from seeing anything. However, it's not as good as debug mode for identifying the specific file causing problems. – Paucker

I know this isn't the same as debug mode, but I think that it is currently the best you can get in build mode. – Homophone

this solved my no minification problem for chrome web. Is there a better way to remove minification because flutter build web --no-minify was not recognized. – Canopy

Answer 2

This is a old post, but I found the answer.

If you build the app with this line:

flutter build web --profile --source-maps

Then when you print a stacktrace, you'll get something like this:

Exception: Hello
at Object.wrapException (js_helper.dart:1123:37)
at _MyHomePageState__incrementCounter_closure.call$0 (main.dart:64:7)
at _MyHomePageState.setState$1 (framework.dart:1114:28)
at _MyHomePageState._incrementCounter$0 (main.dart:57:5)
at tear_off.<anonymous> (js_helper.dart:2099:9)
at _InkResponseState.handleTap$0 (framework.dart:909:26)
at tear_off.<anonymous> (js_helper.dart:2099:9)
at TapGestureRecognizer.invokeCallback$1$3$debugReport (recognizer.dart:253:16)
at TapGestureRecognizer.invokeCallback$2 (recognizer.dart:239:6)
at TapGestureRecognizer.handleTapUp$2$down$up (tap.dart:627:11)

If you use --source-maps with a release build, you will still get the dart file and line number, but the class/method names in the stacktrace will be obfuscated.

And, if you copy the lib directory into the root of built web directory, it will display the source code when you click on the dart file/line number in the stacktrace. Also, you can set breakpoints in the dart code, just like you can do when you do flutter run web.

Tammy

Answer 3

There's an issue on github for this feature, feel free to upvote ;)

https://github.com/flutter/flutter/issues/96283

Seigler

Answer 4

The only way I have found to do this is to use flutter run -d chrome. We would then need to locate where the files on disk are located.

Horlacher

how can I find the location of the files? – Finesse