Flutter - 搭建引擎调试环境（iOS）

已于 2023-05-22 22:18:32 修改
阅读量3k 收藏 1
点赞数 1
分类专栏： 开发记录 Flutter 文章标签： flutter ios flutter engine
于 2023-05-13 23:57:06 首次发布
本文为博主原创文章，未经博主允许不得转载。
本文链接：https://blog.csdn.net/crasowas/article/details/130379070
版权
文章详细介绍了如何在macOS上搭建Flutter引擎的开发环境，包括安装Python和depot_tools，获取并配置Flutter引擎源码，指定引擎版本，以及使用Xcode进行调试。过程中涉及编译、构建和设置本地引擎的步骤，适合需要调试Flutter引擎的开发者参考。
摘要由CSDN通过智能技术生成

文章目录

前言

刚开始学Flutter开发时搭建过，没有记录。现在有需要时又忘了，果然好记性不如烂笔头。

注意，调试环境搭建会占用较大硬盘空间。粗略统计，Flutter引擎项目（包含依赖的第三方库）约20GB，host_debug_unopt构建编译后约16GB，ios_debug_xxx构建编译后约5GB。所以如果想搭建成功，至少需要准备41GB的剩余硬盘空间。

开发环境

  • macOS: 13.3.1
  • Flutter: 3.7.12
  • Xcode: 14.3

安装依赖环境

1. python3

后续很多工具依赖python环境，如果执行python3命令失败，那么需要先安装python3。可以通过官网下载安装或brew命令安装：

brew install python

安装过程可能会遇到这样的问题：

Error: python@3.11: the bottle needs the Apple Command Line Tools to be installed.
  You can install them, if desired, with:
    xcode-select --install

执行xcode-select --install命令安装Xcode命令行工具解决。

2. depot_tools

depot_tools是Chromium的源码管理工具，后续获取源码和构建编译都需要用到。

安装流程：

  1. 切换到想要存放的路径执行clone命令（需要代理）
git clone https://chromium.googlesource.com/chromium/tools/depot_tools.git
  1. 配置环境变量

在~/.bashrc或~/.zshrc文件中加上：

export PATH=[存放的路径]/depot_tools:$PATH

参考文档：

获取引擎项目

按Flutter的文档应先fork项目，不过那是针对贡献者的流程，如果你只是调试，可以跳过这一流程。

1. 创建engine空目录

切换到想要存放Flutter引擎源码的位置新建engine目录：

mkdir engine

2. 创建.gclient文件并配置

切换到engine目录下执行：

touch .gclient

配置.gclient文件：

solutions = [{
	"managed": False,
	"name": "src/flutter",
	"url": "git@github.com:<your_name_here>/engine.git",
	"custom_deps": {},
	"deps_file": "DEPS",
	"safesync_url": "",
}, ]

<your_name_here>请按需替换，如果没有fork引擎项目，可以替换为flutter，如果有fork，可以替换为自己的Github账户名。

如果想了解这些配置的作用，参考官方文档：gclient file。

3. 指定引擎版本

前面的配置获取的是最新的Flutter引擎源码，但是Flutter引擎的调试离不开Flutter框架，如果版本不匹配可能会遇到一些问题，所以最好指定Flutter引擎版本为当前Flutter框架所需要的版本。那么这个版本怎么指定呢？

Flutter引擎版本其实就是commit id，可以在Flutter SDK目录/bin/internal/engine.version文件中获得。例如我当前电脑的Flutter版本是3.7.12，engine.version文件位于/opt/homebrew/Caskroom/flutter/3.7.12/flutter/bin/internal/目录，引擎版本是：

1a65d409c7a1438a34d21b60bf30a6fd5db59314

既然Flutter引擎版本是commit id，那么就可以通过修改前面的配置指定版本。修改后：

solutions = [{
	"managed": False,
	"name": "src/flutter",
	"url": "git@github.com:<your_name_here>/engine.git@1a65d409c7a1438a34d21b60bf30a6fd5db59314",
	"custom_deps": {},
	"deps_file": "DEPS",
	"safesync_url": "",
}, ]

4. 同步引擎源码

在engine目录下执行（需要代理）：

gclient sync

项目有点大，大概需要下载10GB，其中很大一部分是在下载依赖的第三方库，后续编译也相当耗时。

同步成功后，engine目录下会有一个src目录，如果在这个路径下执行git log，会发现commit id好像有点不对：

commit 8747bce41d0dc6d9dc45c4d1b46d2100bb9ee688 (HEAD)
Author: Jenn Magder <magder@google.com>
Date:   Wed Nov 30 14:05:32 2022 -0800

    Sort macOS SDK paths to keep order stable between runs (#652)
...

别急，真正的引擎项目在src目录下的flutter目录。src目录中的项目是这个buildroot，用于搭建Flutter引擎的构建环境。

5. 切换引擎版本

如果后续需要切换其他版本，请按以下步骤操作：

  1. 切换到engine/src/flutter目录路径下
  2. 指定新版本的commit id
git reset --hard [commit id]
  1. 同步新版本的引擎源码
gclient sync -D --with_branch_heads --with_tags

参考文档：

搭建调试环境

1. 构建编译

注意，以下所有命令都在engine/src目录路径下运行。

1.1 生成构建所需文件

1.1.1 主机端
flutter/tools/gn --unoptimized

生成的文件存放于engine/src/out/host_debug_unopt目录。

1.1.2 iOS端
  • 真机调试
flutter/tools/gn --ios --unoptimized

生成的文件存放于engine/src/out/ios_debug_unopt目录。

  • 模拟器调试
flutter/tools/gn --ios --simulator --unoptimized
# 如果是M系列芯片电脑，建议加上--simulator-cpu=arm64参数，用于支持arm64架构的模拟器
flutter/tools/gn --ios --simulator --simulator-cpu=arm64 --unoptimized

生成的文件存放于engine/src/out/ios_debug_sim_unopt或engine/src/out/ios_debug_sim_unopt_arm64目录。

如果是M系列芯片电脑，没有加上--simulator-cpu=arm64参数，后续Xcode模拟器调试可能会遇到没有iOS设备可选择的情况：

screenshot1

解决方法：按这个步骤[Xcode菜单栏] -> [Product] -> [Destination] -> [Destination Architectures] -> [Show Both]操作，显示全部iOS模拟器。

以上只生成了Debug模式相关的文件用于后续调试，如果需要更多模式（Profile/Release等），可以参考文档Flutter’s modes或通过flutter/tools/gn -h命令了解更多用法。

1.2 完成构建编译

  • 真机调试
ninja -C out/ios_debug_unopt && ninja -C out/host_debug_unopt
  • 模拟器调试
ninja -C out/ios_debug_sim_unopt && ninja -C out/host_debug_unopt
# 如果前面使用了--simulator-cpu=arm64参数
ninja -C out/ios_debug_sim_unopt_arm64 && ninja -C out/host_debug_unopt

首次构建编译比较耗时，CPU会满载（电脑买来这么久一直没转过的风扇终于了有表现的机会😂）。后面调试过程中，如果修改了源码需要重新执行构建编译命令。如果文件有增删，需要重新执行前面生成构建所需文件的命令。

参考文档：

2. Xcode调试

准备一个用于调试的Flutter项目，以下命令都在该项目目录路径下执行。

2.1 设置本地引擎

官方文档Debugging iOS builds with Xcode是通过flutter build命令设置：

flutter build ios --local-engine ios_debug_unopt --config-only

这种方式对于模拟器调试不是那么好用，所以我选择flutter run命令，设置项目本地引擎后还会运行一遍项目，在后续用Xcode调试时还能提前避免一些问题。

flutter run --local-engine=ios_debug_xxx --local-engine-src-path=/xxx/engine/src -d xxx
  • --local-engine：设置本地引擎名称，例如真机调试为ios_debug_unopt，模拟器调试为ios_debug_sim_unopt或ios_debug_sim_unopt_arm64
  • --local-engine-src-path：设置本地引擎源路径，engine/src目录所在的绝对路径
  • -d：指定要运行的设备名称，例如模拟器iPhone\ 8（名称有空格时需要转义或加单/双引号）

如果Flutter项目的入口文件路径不是默认的，需要追加-t xxx参数；如果有使用多环境配置，那可能需要追加--flavor xxx参数。

设置成功后，Flutter项目下的ios/Flutter/Generated.xcconfig文件会增加以下设置：

FLUTTER_ENGINE=/xxx/engine/src
LOCAL_ENGINE=ios_debug_xxx

2.2 导入引擎项目

  1. 检查Xcode项目是否存在工作空间

如果用于调试的Flutter项目不存在ios/Runner.xcworkspace文件，可以先随意依赖一个Flutter插件库，然后执行前面的flutter run ...命令快速创建工作空间。注意，不能用Android Studio直接运行Flutter项目，否则项目本地引擎设置会被重置。

  1. 导入引擎项目到工作空间（任选一种方式）
  • 简单拖拽

用Xcode打开用于调试的Flutter项目（打开ios/Runner.xcworkspace文件），将ios_debug_xxx目录下的flutter_engine.xcodeproj文件拖到Xcode的左侧项目导航区：

screenshot2

  • 修改配置

选中ios/Runner.xcworkspace文件，右键显示包内容即可找到contents.xcworkspacedata配置文件。打开后增加一条FileRef配置：

<?xml version="1.0" encoding="UTF-8"?>
<Workspace version = "1.0">
   ...
   <FileRef
      location = "group:/xxx/engine/src/out/ios_debug_xxx/flutter_engine.xcodeproj">
   </FileRef>
</Workspace>

以上两种方式本质是一样的。到此，准备工作都做完了，可以开始调试啦🎉！

2.3 测试调试功能

先找个地方打断点，从AppDelegate.swift文件的FlutterAppDelegate可以来到引擎项目，在这打断点肯定会进到调试：

screenshot3

使用Xcode运行项目一切正常，成功进入调试：

screenshot4

如果调试过程中发现变量列表显示不全，可以将左下角的筛选项Auto改为All：

screenshot5

最后

如果这篇文章对你有所帮助，请不要吝啬你的点赞👍加星🌟，谢谢～

crasowas
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
Flutter中对IOS项目进行真机调试、项目打包、提交审核
越陌度阡
02-13 9809
1. 真机调试 1. 准备工作 (1). 拥有苹果开发者账号个人（每年99美元）、公司（每年99美元）、企业（每年299美元）账号均可； (2). 能上网的苹果电脑 MacOS（苹果虚拟机也可以）、Xcode开发工具、IOS 设备（手机或平板）； 2. 配置调试设备 (1). 手机连接电脑，打开 iTunes 软件，点击序列号字母处，获取 iPhone 手机的 UDID； 下图为点击后的效果： (2). 打开苹果开发者账号，配置调试用的iPhone手机的UDID； 在设备管理中.
Flutter在Mac上搭建IOS开发环境
越陌度阡
12-13 2120
1. 准备工作 1. 升级 Macos 系统为最新系统； 2.安装最新的 Xcode； 3.电脑上面需要安装 brew，地址https://brew.sh/。 在命令窗口执行以下代码完成安装： /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" 2. 配置Flutter 1.下载 Flutter SDK； https://flutter.....
Flutter开发之iOS真机调试（六）
热门推荐
沐雨07的专栏
06-17 1万+
一、首先你要有个开发者账号。 二、真机数据线直连Mac 电脑，并保持解锁状态。 三、选择真机设备运行工程。 VS Code 终端执行 lxx-Mac-mini:uuuu suning$ flutter run More than one device connected; please specify a device with the '-d <deviceId>' flag, or...
iOS混编Flutter，接入详细步骤，attach连接以及debug断点调试
最新发布
极客洪成的博客
07-12 1219
iOS混编Flutter，接入详细步骤，attach连接以及debug断点调试
flutter IOS真机调试
zoeou的博客
07-11 4146
报错: cannot be registered to your development team because it is not available, 报错: Code signing is required for product type 'Application' in SDK 'iOS 13.4' 信任appleID ipone 设置->通用->设备管理->对应的账号-> 信任
iOS开发 超详细Flutter开发环境搭建
weixin_40847622的博客
11-25 3599
针对iOS flutter开发环境配置，针对flutter小白的一篇文章
Flutter开发环境搭建和调试，大牛深入讲解
m0_61408635的博客
09-03 562
Flutter开发工具很多，有很多支持Flutter开发的IDE。比如Android Studio、Visual Studio Code、InteIIiJ IDEA、Atom、Komodo等。这里将使用Visual Studio Code作为主要开发工具，因为Visual Studio Code占用内存和CPU比较低，非常的流畅，体验也比较的好。模拟器的话，这里推荐使用Android官方的模拟器，也就是Android Studio SDK里带的模拟器。不过，这里的模拟器我们使用单独启动的，无需从Androi
Flutter 开发之flutter环境搭建
BianHuanShiZhe的专栏
02-08 899
搭建开发环境 Flutter开发环境的搭建比较烦琐，任何一个步骤失败都会导致最终环境搭建不能完成。Flutter支持三种环境：Windows、MacOS和Linux。这里我们主要讲解Windows及MacOS的环境搭建。 1.2.1　Windows环境搭建 1.使用镜像 首先解决网络问题。环境搭建过程中需要下载很多资源文件，当某个资源未及时更新时，就可能报各种错误。在国内访问Flutter...
Flutter在windows下的环境搭建
02-15
### Flutter在Windows下的环境搭建详解 #### 一、配置JDK环境 为了在Windows环境下搭建Flutter开发环境，首先需要配置Java Development Kit (JDK)。这是因为Android应用开发依赖于Java环境。 **1、下载安装JDK** ...
Flutter学习记录——28.Flutter 调试及 Android 和 iOS 打包
赈川
12-09 4306
文章目录1.Flutter的调试1.1 VS Code 的断点调试1.2 debugger()1.3 debugDumpApp()1.4 debugDumpRenderTree()1.5 debugDumpLayerTree()1.6 debugDumpSemanticsTree()1.7 可视化调试1.8 动画的调试1.9 性能的调试1.10 应用启动时间的查看1.11 代码、方法执行时间查看1...
Flutter开发之iOS真机调试
ioszhanghui的博客
11-12 3919
Flutter进行真机调试的条件 1.Xcode Account账户中登录的有开发者账号 2.真机连接Mac电脑，并处于解锁状态 3.选择对应的开发者账号 和调试设备ID 在VS Code 中，执行 flutter run 学习博客：https://blog.csdn.net/shifang07/article/details/92578931 ...
仅需 7 步，让你的 iOS 原生项目拥有 Flutter 热重载极速调试
iOS_开发
12-12 377
????????关注后回复“进群”，拉你进程序员交流群????????作者：JackLee666来源：稀土掘金链接：https://juejin.cn/post/70369978391629660241. M...
Flutter开发之——IOS启动Flutter
我的博客
07-21 1143
一 概述 本文介绍从原生iOS启动Flutter的几种方式 直接启动(不配置缓存 FlutterEngine和路由)Flutter 使用缓存FlutterEngine启动Flutter 使用路由方式启动Flutter 二 直接启动(不配置缓存 FlutterEngine和路由)Flutter 2.1 代码(ViewController) import UIKit import Flutter class ViewController: UIViewController { override
flutter无线真机调试 安卓 IOS
weixin_48235660的博客
09-15 1754
flutter无线真机调试 VScode Xcode flutter无线真机调试 安卓 IOS
Flutter无法在ios真机上调试解决
Afterwards_的专栏
02-02 2240
不用清缓存,借助xcode快速搞定
Flutter混合开发(二)：iOS项目集成Flutter模块详细指南
2401_84132272的博客
04-10 1132
flutter以前的版本是需要添加build phase以构建Dart代码，但是最新的版本已经不需要添加了，可以自动构建。调用Flutter moduleFlutter为我们提供了两种调用方式：FlutterViewController和FlutterEngine，FlutterEngine在使用的时候会有一些问题，将在下文进行说明。
flutter项目运行到IOS手机
LSLSD的博客
07-22 3624
1.通过Android studio可以看到创建ios模拟器的选项，但是点击创建会报错，原因是因为我没按照xcode 2.安装xcode，因为我mac版本是10.14，所以安装了xcode10.1，然后我flutter版本比较新，他最低支持的xcode版本是11，所以我又把flutter sdk插件降低了版本号。 3.flutte版本降低后， 运行flutter doctor，报错cocoapods没安装 直接照着提示运行了sudo gem install cocoapods / pod setup
第 3-5 课：Flutter 调试及 Android 和 iOS 打包
持续学习中
09-22 635
在使用不同的开发语言进行开发时，一般都会用到调试、断点调试功能。例如 Web、Android 等等都是支持调试和断点调试的，Flutter 也不例外，支持调试和单元测试功能，还有性能、布局分析器等等。那么这节课就给大家讲解下 Flutter 的调试和测试等功能的使用，配合一些实例进行讲解。同时也会为大家讲解下 Flutter 开发后的最后一个部分：应用的打包（Android 和 iOS 打包）。本...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值