Flutter: DevTools Usage

[hhstore]

related:

• Flutter: Index #202
• Flutter: Day0 - Intro #207

[hhstore]

flutter devtool 用法:

brief:

• 官方: 调试开发工具.
• 超赞. 很强大.
• https://github.com/flutter/devtools
• https://flutter.dev/docs/development/tools/devtools
• https://flutter.dev/docs/development/tools/devtools/android-studio
• CN docs: https://flutter.cn/docs/development/tools/devtools/overview

ref:

• https://juejin.im/post/6844903934591500295

使用方法:

• 命令行启动方式, 要掌握.
• IDE 也是 ok 的. 后面会给一个示例.

基于 Cli(命令行)启动:

• https://flutter.cn/docs/development/tools/devtools/cli

• install: 二选一

# by dart:
pub global activate devtools

# by flutter:
flutter pub global activate devtools

• run tool: 二选一, 启动本地 web server 服务来运行开发者工具

# by dart:
pub global run devtools  

# by flutter:
flutter pub global run devtools  

# Serving DevTools at http://127.0.0.1:9100

当前页面效果: 需要输入一个 app 的具体参数, 然后 connect.

• run a app: 启动一个 app 分析.

cd path/to/flutter/app
flutter run

• 打开 chrome 浏览器: 访问 devtool 调试页面.

基于 IDE/编辑器:

• Android Studio: https://flutter.cn/docs/development/tools/devtools/android-studio
• VS Code: https://flutter.cn/docs/development/tools/devtools/vscode

[hhstore]

使用示例:

项目:

• https://github.com/better-dart/flutter_shop
• 示例项目

devtools 分析效果:

• 启动Android模拟器+devtools+浏览器分析页面.
• 开启Debug Paint, 页面网格分析布局细节.

[hhstore]

1

[hhstore]

1

[hhstore]

1