How to debug flutter web through stack trace?

Question

When I moved from Flutter mobile to web, I noticed that logs printed on the console are not helpful because they do not target to the code in my IDE (Android Studio) On mobile:

======= Exception caught by widgets library =======================================================
The following message was thrown building PhoneSignUpPage(state: _PhoneSignUpPageState#b52e9):
some error

The relevant error-causing widget was: 
  PhoneSignUpPage file:///Users/me/AndroidStudioProjects/myproject/lib/services/routing_service.dart:30:14
When the exception was thrown, this was the stack: 
#0      PhonePageViewState.initState (package:my_app/common/phone/phone_page_view.dart:63:5) // this was clickable
#1      StatefulElement._firstBuild (package:flutter/src/widgets/framework.dart:4711:57)
#2      ComponentElement.mount (package:flutter/src/widgets/framework.dart:4548:5)
#3      Element.inflateWidget (package:flutter/src/widgets/framework.dart:3611:14)
#4      Element.updateChild (package:flutter/src/widgets/framework.dart:3360:20)
...

On Web:

======== Exception caught by widgets library =======================================================
The following message was thrown building PhoneSignUpPage(state: _PhoneSignUpPageState#fb057):
some error

The relevant error-causing widget was: 
  PhoneSignUpPage file:///Users/me/AndroidStudioProjects/my_project/lib/services/routing_service.dart:30:14
When the exception was thrown, this was the stack: 
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 236:49  throw_
packages/my_app/common/phone/phone_page_view.dart 63:5                      initState  // not clickable
packages/flutter/src/widgets/framework.dart 4711:57                           [_firstBuild]
packages/flutter/src/widgets/framework.dart 4548:5                            mount
packages/flutter/src/widgets/framework.dart 3611:13                           inflateWidget
...
====================================================================================================

As you can see, the mobile stack trace used to be clickable but the web is not. And sometimes the StackTrace has a localhost:5000/path prefix that if clicked, leads nowhere.

I know I can check the stack trace using Chrome dev tools but I want it to be the original way, through the Android studio console, opening the file in Android Studio itself.

Seems like an android studio / flutter plugin bug. Just use CTRL + Shift + N to open the file manually. — Code Spirit
– Code Spirit, Commented May 2, 2022 at 15:41
No, but I am thinking of a solution, maybe we can fork the Zone and change the PrintHandler to map the log in a way that matches the format that works with Android Studio. I haven't had time to do that but if I do, I will post it here. If someone also managed to make this idea work, please post an answer — TSR
– TSR, Commented Aug 1, 2022 at 10:58
If you check the browser console while running flutter web you will see the correct error line in its source. you can refer to that — Afinas EM
– Afinas EM, Commented Dec 22, 2022 at 7:22

Mahendra Raj · Accepted Answer · 2022-07-14 07:05:14Z

1

If you are using Android Studio then you can go to the tab Flutter Performance -> Click on Open DevTools...

answered Jul 14, 2022 at 7:05

Mahendra Raj

4654 silver badges11 bronze badges

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

Comments

As Ad · Accepted Answer · 2022-12-05 10:51:34Z

-1

To debug a flutter web, you can use the flutter logs command to print out a stack trace in the terminal.

flutter run --debug

answered Dec 5, 2022 at 10:51

As Ad

1

Collectives™ on Stack Overflow

How to debug flutter web through stack trace?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related