Repository navigation
Flutter Widget Inspector does not render correctly, mostly a blank page #4855
Description
Describe the bug
My Flutter Widget Inspector randomly broke a few weeks ago, and I haven't been able to figure out how to get it working again. It's either blank, or displays a few lines like this:
Workspace Environment
Dart Code extension: 3.77.20231116
Flutter extension: 3.77.20231101 (activated)
App: Visual Studio Code
App Host: desktop
Version: linux 1.84.2
Workspace type: Dart, Flutter (LSP) (Multiroot)
Dart (3.3.0-91.0.dev): /opt/flutter/bin/cache/dart-sdk
Flutter (3.17.0-0.0.pre): /opt/flutter (sdk gphone x86 64 (android-x64/android))
Output from 'dart info'
/opt/flutter/bin/cache/dart-sdk/bin/dart info
If providing this information as part of reporting a bug, please review the information
below to ensure it only contains things you're comfortable posting publicly.
General info
- Dart 3.3.0-91.0.dev (dev) (Thu Nov 2 09:10:03 2023 -0700) on "linux_x64"
- on linux / Linux 6.5.10-200.fc38.x86_64 Code already includes yaml support, doesn't need providing #1 SMP PREEMPT_DYNAMIC Thu Nov 2 19:59:55 UTC 2023
- locale is en_US.utf8
Project info
- sdk constraint: '>=3.1.5 <4.0.0'
- dependencies: auto_size_text, boxy, cached_network_image, carousel_slider, collection, cross_file, cupertino_icons, device_info_plus, email_validator, exif, extended_image, flutter, flutter_cache_manager, flutter_email_sender, flutter_fgbg, flutter_image_utilities, flutter_localizations, flutter_persistent_value_notifier, flutter_reactive_value, flutter_svg, fluttertoast, geocoding, geolocator, getwidget, google_fonts, google_mlkit_face_detection, http, image_picker, intl, jiffy, line_awesome_flutter, logging, material_dialogs, package_info_plus, path_provider, persistent_bottom_nav_bar_v2, provider, random_string, routemaster, share_plus, shared_preferences, url_launcher
- dev_dependencies: flutter_launcher_icons, flutter_lints, flutter_test, lints
- elided dependencies: 11
Process info
| Memory | CPU | Elapsed time | Command line |
|---|---|---|---|
| 525 MB | 0.0% | 1-04:50:32 | dart --enable-vm-service=0 --pause_isolates_on_start --disable-dart-dev -DSILENT_VM_SERVICE=true --write-service-info=file:/vm.json --pause_isolates_on_exit --enable-asserts /main.dart |
| 714 MB | 0.0% | 1-18:50:10 | dart ../serverpod_cli.dart generate --watch |
| 77 MB | 0.0% | 1-04:50:32 | dart debug_adapter |
| 75 MB | 0.0% | 3-04:10:13 | dart devtools --machine --allow-embedding --port 9100 |
| 64 MB | 0.0% | 4-01:44:58 | dart devtools --machine --allow-embedding --port 9101 |
| 2174 MB | 0.4% | 3-04:10:13 | dart language-server --protocol=lsp --client-id=VS-Code --client-version=3.77.20231116 |
| 1480 MB | 0.2% | 2-00:32:28 | dart language-server --protocol=lsp --client-id=VS-Code --client-version=3.77.20231116 |
| 94 MB | 0.0% | 4-01:44:58 | flutter_tools.snapshot daemon |
| 94 MB | 0.0% | 3-04:10:13 | flutter_tools.snapshot daemon |
| 74 MB | 0.1% | 51:18 | flutter_tools.snapshot debug_adapter |
| 170 MB | 0.2% | 51:18 | flutter_tools.snapshot run --machine --start-paused -d emulator-5554 --devtools-server-address http:/ --target /main.dart |
Output from 'flutter doctor'
/opt/flutter/bin/flutter doctor -v
[✓] Flutter (Channel beta, 3.17.0-0.0.pre, on Fedora Linux 38 (Workstation Edition) 6.5.10-200.fc38.x86_64, locale en_US.utf8)
• Flutter version 3.17.0-0.0.pre on channel beta at /opt/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 0b591f2c82 (3 weeks ago), 2023-11-02 22:01:10 -0400
• Engine revision dff66925dc
• Dart version 3.3.0 (build 3.3.0-91.0.dev)
• DevTools version 2.29.0
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.1)
• Android SDK at /home/luke/Android/Sdk
• Platform android-UpsideDownCake, build-tools 33.0.1
• Java binary at: /opt/android-studio/jbr/bin/java
• Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)
• All Android licenses accepted.
[✓] Chrome - develop for the web
• Chrome at google-chrome
[✓] Linux toolchain - develop for Linux desktop
• clang version 16.0.6 (Fedora 16.0.6-3.fc38)
• cmake version 3.27.7
• ninja version 1.11.1
• pkg-config version 1.8.0
[✓] Android Studio (version 2022.2)
• Android Studio at /opt/android-studio
• Flutter plugin version 73.0.2
• Dart plugin version 222.4582
• Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)
[✓] VS Code (version 1.84.2)
• VS Code at /usr/share/code
• Flutter extension version 3.77.20231101
[✓] Connected device (3 available)
• sdk gphone x86 64 (mobile) • emulator-5554 • android-x64 • Android 13 (API 33) (emulator)
• Linux (desktop) • linux • linux-x64 • Fedora Linux 38 (Workstation Edition) 6.5.10-200.fc38.x86_64
• Chrome (web) • chrome • web-javascript • Google Chrome 119.0.6045.159
[✓] Network resources
• All expected network resources are available.
• No issues found!
Activity
lukehutch commentedon Nov 25, 2023
flutter clean, uninstalling and reinstalling the Flutter VS Code extension, restarting VS Code -- nothing seems to solve this.DanTup commentedon Nov 26, 2023
@lukehutch if you run the Open DevTools command and then choose to Open in Browser, do you see the same thing or does it only occur when it's embedded inside VS Code?
I see you're currently on beta 3.17 - are you able to see whether it occurs on current stable 3.16 (if not, that narrows things down a little).
@kenzieschmoll I don't suppose you've seen anything like this before?
[-]Flutter Widget Inspector is broken[/-][+]Flutter Widget Inspector does not render correctly, mostly a blank page[/+]lukehutch commentedon Nov 26, 2023
@DanTup It's also broken on 3.16. However it does work in the Web browser, even with 3.17 (I didn't know using it in a browser was an option! Now I have a way to use this again..)
lukehutch commentedon Nov 26, 2023
I do have a massive widget tree, so on the web browser view, it takes about 30 seconds to display anything. But waiting even longer than that on VS Code, nothing is shown (or occasionally, a partial render is shown, something like in the screenshot -- it varies).
In other words, maybe there is a memory or time limit that is being hit?
DanTup commentedon Nov 27, 2023
Can you reproduce this on any public projects that I'd be able to do some testing with?
lukehutch commentedon Nov 27, 2023
I can reproduce this with this small reproducer project that I made for this bug: flutter/flutter#136642 (comment)
However, I doubt that the issue has anything to do with any particular Flutter project. The issue is probably due to something being corrupted in a config file or an installed package.
Is there any form of debugging I can enable to get you some more info?
I'd be OK giving you remote access to my machine, if you need it to debug this, but hopefully you can come up with some things I can try first.
The above-linked project has a very small widget tree, so my theory in my previous comment that maybe this was happening because of the large widget tree is not actually the issue.
DanTup commentedon Nov 27, 2023
Thanks - could you confirm a few things:
code --statuswhen you have this project open might be useful too)code --disable-gpumake any difference? (close all Code windows before running this as I'm not sure if it re-uses existing processes)Also - do you have any other machines you can test the same thing on? (seeing it on another machine might increase the odds I'll be able to reproduce it, and it'll likely be easier to debug on a machine set up to run everything from source). Thanks!
DanTup commentedon Nov 27, 2023
I thought those lines were part of the inspector, but actually I don't see those lines in my inspector - it looks like they might actually be the UI guidelines from the editor?
Another thing to check - do you see any rendering issues if you open a markdown file and run the Markdown: Open Preview to Side command? I'm wondering if this is a VS Code issue more than a DevTools (or Dart-Code) issue.
lukehutch commentedon Nov 27, 2023
Sometimes a light blue bar appears at the bottom of the widget inspector view:
lukehutch commentedon Nov 27, 2023
OK, I think you hit the nail on the head... there are thousands of lines of shader compilation errors, like the following, and DevTools is brought to its knees by the amount of output:
I closed all windows and re-opened with
--disable-gpu. Now I see only a gray box in the place of the Widget Inspector:These are the new errors in the DevTools console:
No.
I do have another machine, but I'll have to set it up with Flutter etc. It has a different GPU, so I suspect there won't be a problem on that machine. I'll wait on your response to the above before I go to the effort of setting up that machine.
11 remaining items
lukehutch commentedon Dec 14, 2023
This is broken again in Code Insiders:
Can we get some better error reporting on the console when the renderer fails?
DanTup commentedon Dec 14, 2023
@lukehutch when do you see this? I just tested in Insiders and although I couldn't repro it being completely broken, I did see it flash this colour (for around a second) when I stopped my debug session, before it rendered the "Disconnected" page:
Are you seeing it when you stop a session, or as soon as you try to load?
It's difficult to answer this. If errors occur, they should be shown in the console. If there are no errors and something just isn't rendering properly because of VS Code issues (or GPU issues, etc.) then it's probably not something we can detect. If we can figure out what's going wrong here, we can look at whether we could better detect those types of issues though.
lukehutch commentedon Dec 14, 2023
It's as soon as the DevTools tab opens, and it just sits there doing nothing.
Your screen is a darker shade of gray, which might be a theme difference, or (I think more likely) you are probably looking at something different.
I actually forgot to check the JS console. I don't see the shader compilation errors there now, so maybe fixing that exposed a different issue.
This is what I see in the DevTools JS console, which is not very helpful, because the JS is minified:
How do I catch the JS exception back in the Dart source code for Widget Inspector?
DanTup commentedon Dec 14, 2023
Sorry I wasn't very clear - I see your shade of grey for a second or two before it then switches to the disconnect screen. Perhaps there's some background colour that's the shade of grey from your screenshot or something.
Can you confirm the exact version of Flutter you're on and whether opening DevTools in the browser (from VS Code) works ok? That exception in the console certainly seems suspicious.
lukehutch commentedon Dec 14, 2023
Yes, opening DevTools in the browser does work. (I forgot I could do that... thanks)
DanTup commentedon Feb 22, 2024
@lukehutch is this still happening? I just noticed this issue was open but marked as "Fixed in VS Code".
I suspect if it's still broken that it's probably an upstream issue we can't fix here though.
lukehutch commentedon Feb 22, 2024
Looks like it is fixed in the RedHat RPM release
code-1.86.2-1707854644.el8.x86_64.Thanks -- I'll close this!
DanTup commentedon Feb 22, 2024
Great, thanks for confirming :)