flutter Visual Studio代码中的抖动检查器

lxkprmvk  于 2023-01-02  发布在  Flutter
关注(0)|答案(9)|浏览(136)

有没有办法在模拟器中检查Flutter应用程序元素?我使用的是VS代码,而不是Android Studio,我想从运行模拟器中检查元素。

14ifxucb

14ifxucb1#

2.24.0版本开始,DevTools选项是用于调试和检查的新功能。
打开命令选项板Ctrl+Shift+P并键入:

>Dart: Open DevTools

要访问它,调试会话必须正在运行:

n8ghc7c1

n8ghc7c12#

正如Danny Tuppeny(VScode中dart插件的创建者)所说:
Flutter检查器目前在VS代码中不可用
你可以跟随这个issue获得更多的更新

    • 更新日期:**

在VS代码的新Dart代码插件中,有类似look here的内容

jqjz2hbq

jqjz2hbq3#

如需检查Flutter项目中的控件:
1-打开命令调板(Ctrl+Shift+P(在macOS上为Cmd+Shift+P))。
2-选择Flutter:检查控件命令并按下Enter。
3-点击模拟器中的任何小部件。
4-请参见小工具树。
5-祝你好运。

83qze16e

83qze16e4#

我使用快捷方式:Ctrl+Alt+D(使用Ubuntu + VSCode)。
不要忘记,应用程序必须已经在调试模式下运行,就像Evandro提到的。

sqyvllje

sqyvllje5#

在运行应用程序时,在热加载出现后,在终端上按“i”。还有一些其他功能。要找到它,在终端上按“h”。

ee7vknir

ee7vknir6#

实际上,当你在运行flutter run之后在终端中键入h时,你将得到所有这些东西;

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)

要直接在浏览器中打开DevTool,您可以键入v
结果会是这样的;
open this link

hk8txs48

hk8txs487#

更新方法:

Android Studio有一个Flutter Inspector,VS Code有一个类似的工具,称为Widget Inspector。
从Dart代码(VS代码扩展)版本2.24.0起,"Flutter:Inspect Widget'命令被DevTools替换。(在编写本文时,最新版本是3.36.0。要从命令托盘中使用〉Flutter进入Inspect Widget:打开开发工具或〉Dart:打开DevTools需要几个步骤。
使用模拟器时,在VS代码中打开Widget Inspector的一种快速方法是在调试模式下运行Flutter应用。

Click the debug (bug) button from the side menu and Select Run and Debug or press f5

Widget检查器将自动打开。

使用Flutter Widget检查器

的模拟器屏幕截图

ar7v8xwq

ar7v8xwq8#

在Evandro Pomatti的回答中,点击“选择小工具模式”按钮来切换选择的开/关:

dwthyt8l

dwthyt8l9#

关闭Widget检查器
VS代码
windows

    • Ctrl + Shift + p-〉抖动:取消小部件检查**

MacOS操作系统

    • 命令+Shift + p-〉抖动:取消小部件检查**

相关问题