Flutter: DevTools Usage

[hhstore]

related:

• [x] #202
• [x] #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

使用方法:

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

基于 Cli(命令行)启动:

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

• [x] install: 二选一

  
  # by dart:
  pub global activate devtools

by flutter:

flutter pub global activate devtools

- [x] 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.

![image](https://user-images.githubusercontent.com/3252130/97407702-05baf900-1936-11eb-9c95-ab4c4e542978.png)

- [x] run a app: 启动一个 app 分析. 

cd path/to/flutter/app flutter run

- [x] 打开 chrome 浏览器: 访问 devtool 调试页面. 

### 基于 IDE/编辑器: 

- [x] Android Studio: https://flutter.cn/docs/development/tools/devtools/android-studio
- [x] 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