How to debug flutter web through stack trace?
Asked Answered
A

2

29

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.

Arnettaarnette answered 2/7, 2021 at 18:46 Comment(4)
Hey, have you solved this issue?Linkwork
Seems like an android studio / flutter plugin bug. Just use CTRL + Shift + N to open the file manually.Blaney
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 answerArnettaarnette
If you check the browser console while running flutter web you will see the correct error line in its source. you can refer to thatNotarial
D
1

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

flutter performance

Druse answered 14/7, 2022 at 7:5 Comment(0)
F
-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
Faultfinder answered 5/12, 2022 at 10:51 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.