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.

Answer 1

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