You open Flutter Inspector or another DevTools view, but the sidebar shows an empty grey panel. Your Flutter app may still run normally, yet the tools you need for inspecting widgets, checking performance, or reading diagnostics never appear.
A Flutter DevTools blank grey panel does not identify one specific fault. The embedded IDE view may fail to render, the DevTools server may be unavailable, or the tool may be trying to connect to an old debugging session. Each situation needs a different fix.
This guide covers practical troubleshooting for VS Code and Android Studio, explains how to open Flutter DevTools in a browser, and shows alternatives that help you keep working while you investigate.
What does a blank Flutter DevTools panel mean?
DevTools is a collection of development tools that connects to a running Dart or Flutter application. An IDE can display it inside an editor tab or sidebar, while the same tools can also run in a browser.
First confirm where the grey screen appears. A grey area inside your application is a different problem from an empty DevTools panel inside your IDE. Application rendering errors, layout mistakes and missing assets require app-level debugging; changing the DevTools sidebar location will not repair them.
Public Dart-Code issue reports document blank embedded DevTools views, including a report involving multiple open tool panels. Those reports establish that this symptom has occurred, but they do not prove that every blank panel has the same cause or that one extension version fixes every case.
Quick diagnosis: identify which part is failing
| What you observe | What to investigate | Useful next step |
|---|---|---|
| Sidebar is blank; browser DevTools works | Embedded view, panel location or IDE extension behavior | Use a browser or editor tab, then reload the IDE window. |
| Browser and sidebar cannot load DevTools | Server process, URL, SDK selection or network access | Start DevTools from the terminal and use its newly printed URL. |
| DevTools loads but says disconnected | App stopped, stale VM service URL or inaccessible service | Start a fresh debugging session and reconnect. |
| Entire VS Code window is blank | Editor renderer or graphics problem | Follow VS Code's blank-window diagnostics. |
| Only one project is affected | Workspace settings, selected SDK or launch configuration | Compare with a small working Flutter project. |
These observations narrow the investigation; they are not definitive diagnoses. Record the result of each comparison before changing more settings.
1. Check the project and debugging session
In VS Code, open the Flutter project folder containing pubspec.yaml. Ensure the Dart and Flutter extensions are installed and enabled for that workspace. Select an available device, then start debugging with Run > Start Debugging or F5.
Open the Command Palette and search for Open DevTools. Available commands depend on your extensions and whether a debugging session is active. If commands are missing, resolve project detection and extension activation before troubleshooting a panel that cannot be launched properly.
Use debug mode for ordinary widget inspection. Release mode disables debugging services, so an app running successfully in release mode does not mean Inspector can attach to it. Profile mode is useful for performance analysis, but its capabilities differ from debug mode.
flutter devices
flutter runChoose the intended device if Flutter asks. Keep the running process alive while using the tools.
2. Open Flutter DevTools in a browser
The browser is both a useful workaround and a diagnostic test. Flutter's official command-line workflow supports launching DevTools separately from the IDE.
- Run your app with
flutter run, or start an IDE debug session. - Look for the DevTools URL printed for the current run.
- Open that complete URL in Chrome.
- Check whether the interface renders and whether it connects to your app.
If you need to start the DevTools server yourself, open a second terminal and run:
dart devtoolsOpen the server URL that this command prints. If asked to connect to an application, provide the Dart VM service URL from the running app. The DevTools server address and the VM service address serve different purposes; do not interchange them.
Use fresh URLs after restarting the application. VM service URLs can contain a session-specific security token, and a link from yesterday's run may no longer work. Ports also vary, so copy the actual output instead of assuming a fixed localhost port.
3. Change the DevTools location in VS Code
If browser DevTools works, changing the embedded location may get you past a sidebar-specific failure. Current Dart-Code settings provide dart.devToolsLocation with locations including sidebar, beside, active and external.
Use an external browser
Open VS Code's settings JSON and merge these entries into your existing configuration:
{
"dart.devToolsLocation": {
"inspector": "external",
"default": "external"
}
}Use an editor tab beside your code
{
"dart.devToolsLocation": {
"inspector": "beside",
"default": "beside"
}
}Choose one example. Do not replace unrelated settings or paste a second outer JSON object into an existing file. Check whether workspace or remote settings override your user settings.
Older articles may recommend dart.embedDevTools or an experimental sidebar flag. Extension settings have changed, so use the settings recognized by your installed Dart extension. If VS Code marks an option as unknown, inspect the extension's Settings page and version before copying more configuration.
4. Close extra panels and reload the IDE
Close unused DevTools tabs and sidebars, then reopen a single Inspector view. This is particularly useful if the problem starts only after opening several panels, although it is not a guaranteed fix.
In VS Code, save your work and run Developer: Reload Window from the Command Palette. Start a new debugging session if necessary, then reopen DevTools. Reloading may end the session or reset tool state, so capture useful diagnostics first.
If a restart helps only temporarily, note the sequence that brings the blank view back. A reproducible pattern is more useful for a bug report than repeated restarts without observations.
5. Compare Flutter, Dart and extension versions
The DevTools version bundled with your Dart SDK matters. Your terminal can use one SDK while the IDE selects another, especially when several Flutter installations or a version manager are present.
flutter --version
dart --version
flutter doctor -vCompare these results with the SDK selected by your IDE. Check the Dart and Flutter extension versions as well. For projects using FVM or another version manager, use the project's intended SDK and its documented commands.
Update an outdated IDE extension when appropriate, then retest. If the issue began immediately after an update, record the versions and inspect the relevant issue tracker. A temporary rollback can help confirm a regression, but it should follow evidence rather than become the default troubleshooting step.
Avoid blindly upgrading a production project's pinned Flutter SDK. Likewise, avoid old tutorials that install DevTools globally without considering the DevTools bundled with the selected SDK.
6. Check extension conflicts and rendering errors
Temporarily disable unrelated extensions or compare behavior in a clean VS Code profile with the required Dart and Flutter extensions installed. Change one variable at a time. Disabling every extension also removes Flutter integration, making the comparison misleading.
For a persistent blank embedded view, inspect Developer: Toggle Developer Tools for relevant console errors and capture Dart extension logs. Errors can help distinguish failed resource loading, server startup problems and rendering failures.
When is disabling GPU acceleration relevant?
VS Code's official FAQ recommends a GPU diagnostic for a blank editor window. If the whole editor is affected or you have evidence of graphics-related renderer errors, save your work, close VS Code, and test:
code --disable-gpuThis is not a universal fix for a blank Flutter sidebar. If it changes nothing, return to normal startup. Do not add security-disabling flags or delete broad cache folders as a routine first step.
7. Troubleshoot blank DevTools in Android Studio
Confirm the Flutter plugin is installed and enabled, and that Android Studio recognizes the Flutter project and SDK. Run the app on a device or simulator, then use the Open DevTools action in the Run view. Its exact placement can vary by IDE and plugin version.
If the embedded view remains blank, open the current DevTools link in Chrome. Browser success suggests investigating the IDE integration; browser failure suggests checking the server and debugging connection.
Compare plugin versions and the IDE-selected SDK, restart the IDE after saving work, and collect relevant IDE or plugin logs if the issue persists. The VS Code JSON settings above do not configure Android Studio.
8. Check remote development and forwarded ports
With Remote SSH, containers or WSL, a localhost address may refer to the remote environment rather than your computer. A browser running locally must be able to reach both the DevTools server and the application's VM service.
Inspect the forwarded ports in your remote development setup and use reachable forwarded URLs. A working DevTools page with a disconnected app can mean the server is forwarded but the VM service is not. Keep debug services private; exposing them publicly is not an appropriate workaround.
Alternatives while the sidebar remains broken
- Browser DevTools: Use the full tool interface independently of the embedded IDE panel.
- Editor-tab DevTools: Choose the
besidelocation when only the sidebar fails. - Another IDE: Compare VS Code and Android Studio to isolate an integration-specific problem.
- Debugger and logs: Continue using breakpoints, variable inspection and console output for immediate investigation. These help, but do not replace every Inspector or performance feature.
What to include in a useful bug report
In VS Code, run Dart: Capture Logs, reproduce the problem, and stop logging. Dart: Capture Extension Logs can collect additional extension diagnostics. Review the output before sharing it.
Include your operating system, IDE version, Dart and Flutter extension versions, SDK versions, device target, panel location and reproduction steps. State whether browser DevTools works, whether the problem affects another project, and whether it started after an update. Add a screenshot showing the panel without private project details.
Remove VM service tokens, credentials, personal paths and other sensitive information. Report an IDE-specific failure to the relevant integration tracker; report a reproducible browser DevTools failure to the Flutter DevTools tracker with supporting logs.
Frequently asked questions
Should I run flutter clean to fix a grey DevTools panel?
Usually not as the first step. flutter clean removes generated build data; it does not directly repair an IDE's embedded renderer. Consider it when evidence points to a build problem, rather than a panel that stays blank while the app works.
Why does DevTools work in Chrome but not in the sidebar?
The comparison suggests the server and basic browser interface work, while the embedded IDE path needs investigation. Change the panel location, reload the window, compare extensions and collect renderer logs.
Why is DevTools disconnected after restarting the app?
The previous VM service connection may no longer be valid. Use the new URL printed by the current debugging session and confirm the app is still running.
Can I use Flutter DevTools without the IDE sidebar?
Yes. Start it with dart devtools or open the DevTools link printed by your Flutter run session. Connect it to the current application's VM service when needed.
Is a blank panel always a Flutter framework bug?
No. The symptom can involve IDE integration, extension configuration, SDK selection, connectivity or rendering. Compare the browser and embedded view before deciding where to report it.
Official documentation and issue references
- Flutter: launch DevTools from VS Code
- Flutter: launch DevTools from Android Studio
- Flutter: launch DevTools from the command line
- Dart-Code settings and extension setting definitions
- Dart-Code SDK selection and logging instructions
- Flutter build modes
- VS Code troubleshooting FAQ and Remote SSH documentation
- Historical blank DevTools panel report #5229 and blank embedded view report #5659
