背景

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…