Create an account

Very important

  • To access the important data of the forums, you must be active in each forum and especially in the leaks and database leaks section, send data and after sending the data and activity, data and important content will be opened and visible for you.
  • You will only see chat messages from people who are at or below your level.
  • More than 500,000 database leaks and millions of account leaks are waiting for you, so access and view with more activity.
  • Many important data are inactive and inaccessible for you, so open them with activity. (This will be done automatically)


Thread Rating:
  • 337 Vote(s) - 3.34 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Flutter Inspector in Visual Studio code

#1
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 .
Reply

#2
To inspect a Widget in Flutter project:

1- Open the Command Palette (<kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd> (<kbd>Cmd</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd> on macOS)).<br>
2- Select the Flutter: Inspect Widget command and press Enter.<br>
3- Tap on any widget in emulator.<br>
4- See the widget tree.<br>
5- Good luck.<br>
Reply

#3
I use the shortcut: <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>D</kbd> (using Ubuntu + VSCode).

Don't forget that the app must already be running in debug mode, like Evandro mentioned.
Reply

#4
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.
Reply

#5
Starting with version [2.24.0][1] the **DevTools** option is the new feature for debugging and inspecting.

Open the command palette <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd> and type:

>Dart: Open DevTools

To access it your debug session must be running:

[![enter image description here][2]][2]


[1]:

[To see links please register here]

[2]:
Reply

#6
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 ;

[open this link][1]


[1]:
Reply

#7
To close the widget inspector

VS Code

Windows

**Ctrl+Shift+p -> Flutter: Cancel Widget Inspection**

MacOS

**Cmd+Shift+p -> Flutter: Cancel Widget Inspection**

Reply

#8
**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

The Widget inspector will open automatically.
[![Screenshot of side menu][1]][1]


Screenshot of emulator using the Flutter Widget inspector
[![enter image description here][2]][2]


[1]:

[2]:
Reply

#9
Adding to Evandro Pomatti's answer, click the "select widget mode" button to toggle selection on/off:

[![enter image description here][1]][1]


[1]:
Reply

#10
as Danny Tuppeny (the creator of the dart plugin in VScode) [mentioned][1] :

> the Flutter Inspector is not currently available in VS Code

you can follow this [issue][2] for more updates

**UPDATE :**

In the new Dart Code plugin for VS Code there is something similar,
[look here][3]


[1]:

[To see links please register here]

[2]:

[To see links please register here]

[3]:

[To see links please register here]

Reply



Forum Jump:


Users browsing this thread:
1 Guest(s)

©0Day  2016 - 2023 | All Rights Reserved.  Made with    for the community. Connected through