探究Flutter Engine调试

4,657 阅读1分钟

背景

  1. 探究Flutter Webpng性能问题。
  2. 学习Flutter Engine代码
  3. 尝试单步调试Flutter Engine

准备

  1. depot_tools工具包
$ git clone https://chromium.googlesource.com/chromium/tools/depot_tools.git
$ export PATH=$PATH:/path/to/depot_tools

记得长期有效用source了。

  1. Python v2.7

  2. gclient

  3. Flutter SDK 地址:github.com/flutter/flu…

获取依赖

  1. Fork github.com/flutter/eng… 为了后续修改方便,所以使用Fork 注意:配置ssh key,后面gc sync时候需要使用ssh的下载方式。

  2. 新建engine文件夹

  3. 编辑.gclient 在engine文件夹下编辑.gclient文件

$ vim .gclient

内容:

solutions = [
  {
    "managed": False,
    "name": "src/flutter",
    "url": "git@github.com:<你的名字>/engine.git",
    "custom_deps": {},
    "deps_file": "DEPS",
    "safesync_url": "",
  },
]
  1. 进入engine目录,执行 $ gclient sync 获取Flutter所有依赖。

  2. 同步Flutter Engine代码

$ cd src/flutter
$ git remote add upstream git@github.com:flutter/engine.git
$ git pull upstream master 

同步Flutte Engine版本

  1. 在engine/src/flutter 目录下面,获取当前Flutter SDK所需要的版本号。 cat $FLUTTER_SDK_PATH/bin/internal/engine.version

  2. reset Flutter Engine的commit到指定的SHA-1。 git reset --hard ${engine.version}

  3. 最后gclient同步Engine的依赖。 gclient sync --with_branch_heads --with_tags

生成工程

  • 生成ios设备用的未经编译的工程 ./flutter/tools/gn --ios --unoptimized

  • 生成ios设备用的工程,不带符号表 ./flutter/tools/gn --ios

  • 生成release工程 $ ./flutter/tools/gn --ios --runtime-mode=release

  • 生成模拟器版本工程 ./flutter/tools/gn --ios --simulator

  • 生成模拟器用的未优化版本 ./flutter/tools/gn --ios --simulator --unoptimized

  • 也可以可以指定cpu ./flutter/tools/gn --runtime-mode=release --ios --ios-cpu=arm64

编译

Flutter Engine编译是使用ninja的,在之前的deptools工具包里面有。 在engine/src目录下。

  • 编译release: $ ninja -C out/ios_release

  • 编译真机使用不带符号的debug模式: ninja -C out/ios_debug && ninja -C out/host_debug

  • 编译真机使用带符号的debug模式:ninja -C out/ios_debug_unopt && ninja -C out/host_debug_unopt

  • 编译模式器使用的debug模式:ninja -C out/ios_debug_sim_unopt && ninja -C out/host_debug_unopt

调试

调试的时候使用官方推荐的直接用lldb调试很复杂,所以我推荐大家使用Xcode直接嵌入工程方式。

  1. 把Flutte Engine里面的products.xcodeproj拖进需要调试的Demo工程目录

2. 在Genrated.xcconfig中加上 内容为

FLUTTER_ROOT=${FlutterSDK 路径}
FLUTTER_APPLICATION_PATH=${Demo工程路径}
FLUTTER_TARGET=${Demo工程路径}/lib/main.dart
FLUTTER_BUILD_DIR=build
SYMROOT=${SOURCE_ROOT}/../build/ios
FLUTTER_FRAMEWORK_DIR=${Flutter_Engine代码路径}/src/out/ios_debug_sim_unopt
FLUTTER_BUILD_NAME=1.0.0
FLUTTER_BUILD_NUMBER=1
FLUTTER_ENGINE=${Flutter_Engine代码路径}
LOCAL_ENGINE=${输出的路径(ios_debug_sim_unopt)}
ARCHS=${支持的架构(arm64)} 
  1. 最后可以单步调试。

最后

最后这样就可以直接断点到Flutter Engine里面,我这边发现Flutter对于Webpng在iOS平台的优化有限,最后我们这边的多图列表需要再深入优化。

参考

感谢

手把手教你编译Flutter engine www.jianshu.com/p/6519ed563…

Compiling the engine github.com/flutter/flu…