探究Flutter Engine除錯

KoonChaoSo發表於2020-01-16
Flutter除錯

背景

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了。

2.Python v2.7

3.gclient

獲取依賴

  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. 獲取當前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

編譯

Flutter Engine編譯是使用ninja的，在之前的deptools工具包裡面有。

  • 編譯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工程目錄

探究Flutter Engine除錯
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…

相關文章