Is there any way to inspect Flutter App elements in emulator? I am using VS code not android studio I want to inspect element from running emulator .
9 Answers
Starting with version 2.24.0 the DevTools option is the new feature for debugging and inspecting.
Open the command palette Ctrl+Shift+P and type:
>Dart: Open DevTools
To access it your debug session must be running:
To inspect a Widget in Flutter project:
1- Open the Command Palette (Ctrl+Shift+P (Cmd+Shift+P on macOS)).
2- Select the Flutter: Inspect Widget command and press Enter.
3- Tap on any widget in emulator.
4- See the widget tree.
5- Good luck.
I use the shortcut: Ctrl+Alt+D (using Ubuntu + VSCode).
Don't forget that the app must already be running in debug mode, like Evandro mentioned.
While running your app, after hot reload appears press 'i' in your terminal. There also have some other features too. To find it, press 'h' in the terminal.
Actually, when you type h
in the terminal after running flutter run
, you will get all this stuff;
Flutter run key commands.
r Hot reload. 🔥🔥🔥
R Hot restart.
h Repeat this help message.
d Detach (terminate "flutter run" but leave application running).
c Clear the screen
q Quit (terminate the application on the device).
s Save a screenshot to flutter.png.
b Toggle the platform brightness setting (dark and light mode). (debugBrightnessOverride)
w Dump widget hierarchy to the console. (debugDumpApp)
t Dump rendering tree to the console. (debugDumpRenderTree)
L Dump layer tree to the console. (debugDumpLayerTree)
S Dump accessibility tree in traversal order. (debugDumpSemantics)
U Dump accessibility tree in inverse hit test order. (debugDumpSemantics)
i Toggle widget inspector. (WidgetsApp.showWidgetInspectorOverride)
I Toggle oversized image inversion 🖼️. (debugInvertOversizedImages)
p Toggle the display of construction lines. (debugPaintSizeEnabled)
o Simulate different operating systems. (defaultTargetPlatform)
z Toggle elevation checker.
g Run source code generators.
M Write SkSL shaders to a unique file in the project directory.
v Launch DevTools.
P Toggle performance overlay. (WidgetsApp.showPerformanceOverlay)
a Toggle timeline events for all widget build methods. (debugProfileWidgetBuilds)
In order to open DevTool straight to the browser, you can then type v
.
The result will be like this ;
-
this is not true today. Please edit the answer or the most updated steps to reproduce this instruction/suggestion for the OP.– GelCommented Nov 28, 2020 at 13:21
Updated method:
Android Studio has a Flutter Inspector and VS Code has something similar called a Widget Inspector.
As of Dart Code (VS code extension) version 2.24.0, The 'Flutter: Inspect Widget' command was replaced with DevTools. (at the time of writing this, the latest version is 3.36.0. To get to the Inspect Widget from the command pallet with >Flutter: Open DevTools or >Dart: Open DevTools, requires several steps.
A quick way to open the Widget Inspector in VS code while using the emulator is to run your Flutter app in debug mode.
Click the debug (bug) button from the side menu and Select Run and Debug or press f5
Adding to Evandro Pomatti's answer, click the "select widget mode" button to toggle selection on/off:
To close the widget inspector
VS Code
Windows
Ctrl+Shift+p -> Flutter: Cancel Widget Inspection
MacOS
Cmd+Shift+p -> Flutter: Cancel Widget Inspection
-
After opening the inspector, this is the command I was looking for. Thanks Commented Oct 3, 2023 at 6:58