Flutter 85: Flutter Attach 调试 Flutter Code

简介: 0 基础学习 Flutter,小插曲之了解 Flutter Attach 在 Native 和 Flutter 端调试测试!

      在实际开发过程中,为了满足项目业务方面以及兼容历史代码等方面,经常会采取 Flutter 功能模块以 aarModule 等引入方式;而 Flutter Code 代码是与 Android / iOS Native Code 区分为两个工程的;此时若需要调试应该怎么处理呢?

Android

      小菜目前主要从事 Android 开发,日常用的最多的是 Run / Debug 跟踪运行项目,而目前 Flutter Module 作为 Native Project 的子模块,直接 Run / Debug 会把 Flutter Module 当作一个新的 Project 运行;

      此时需要通过 Flutter Attach 方式在 AndroidStudio 与设备之间建立 Socket 连接,之后便可以对 Flutter Code 进行调试;

  1. Flutter Attach 运行 Flutter Code;此时等待连接 Waiting for a connection from Flutter on Redmi K30 5G...
  2. 运行安装 Android Native apk
  3. 与设备同步连接之后便可进行断点调试,此时 hot reload 非常便捷;

      若打开了 Native app 之后 Flutter Attach 仍旧一直卡在连接设备 Waiting for a connection from Flutter on... 可以尝试杀掉 app 重新进入 app 即可;

iOS

      采用 Flutter 跨平台技术,若对原生 Android / iOS 技术都有了解会便利很多;然而小菜对于 iOS 是一窍不通,那如何在 iOS 设备上调试 Flutter Code

      小菜请教 iOS 同学,主要有两种方式:第一种是完全按照 iOS 开发流程,配置环境,更新运行 Native iOS Code,之后 Flutter Attach 调试 Flutter Code;第二种是编译一个模拟器适用的 Debug 包,直接在模拟器安装,之后再通过 Flutter Attach 进行调试;

  1. 确定已安装 Xcode 开发工具;
  2. 打开 Xcode - Simulator 安装 iOS 同学预先提供的 Debug 包;
  3. Flutter Attach 运行 Flutter Code,与 Android 相同,与设备同步连接之后便可进行断点调试;

      小菜刚装好 Xcode 之后,通过 AndroidStudio 打开 Open iOS Simulator 一直没反应,查阅资料之后发现需要预先开通 Xcode 权限;

// switch 后为 Xcode Developer 路径
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer/


      小菜测试 AndroidiOS 触发时机略有不同;Android 一般是先 Flutter Attach 之后再冷启动 appiOS 可以先运行 app 然后直接 Flutter Attach;但对我们测试影响不大;

      小菜对 Flutter 的学习和应用还处于基础阶段;如有错误,请多多指导!

来源: 阿策小和尚

目录
相关文章
|
9天前
|
开发工具 芯片 开发者
鸿蒙Flutter实战:12-使用模拟器开发调试
本文介绍了如何在 M 系列芯片的 Mac 电脑上使用模拟器进行鸿蒙 Flutter 开发和调试。主要内容包括:创建 Flutter 项目、签名、创建模拟器、运行 Flutter 项目以及常见问题的解决方法。适用于希望在鸿蒙系统上开发 Flutter 应用的开发者。
25 2
鸿蒙Flutter实战:12-使用模拟器开发调试
|
28天前
|
Web App开发 JavaScript 前端开发
鸿蒙Flutter实战:04-如何使用DevTools调试Webview
本文介绍如何在鸿蒙 Flutter 开发中调试 Webview,包括配置允许调试、找到 devtools 端口、开启端口转发、在 Chrome 中调试 Webview等。
23 0
鸿蒙Flutter实战:04-如何使用DevTools调试Webview
|
28天前
|
IDE 调度 开发工具
鸿蒙Flutter实战:08-如何调试代码
本文介绍了鸿蒙Flutter项目的开发环境搭建、配置、日志查看及调试方法。首先按照指南搭建开发环境,安装IDE插件;接着配置vscode的launch.json文件;通过IDE调试控制台或命令行查看日志;提供两种调试Flutter的方式,包括IDE直接运行和使用DevEco;最后介绍ArkTs和Webview的调试方法。
41 0
|
6月前
|
前端开发 数据处理 Android开发
【Flutter 前端技术开发专栏】Flutter 中的调试技巧与工具使用
【4月更文挑战第30天】本文探讨了Flutter开发中的调试技巧和工具,强调其在及时发现问题和提高效率上的重要性。介绍了基本的调试方法如打印日志和断点调试,以及Android Studio/VS Code的调试器和Flutter Inspector的使用。文章还涉及调试常见问题的解决、性能和内存分析等高级技巧,并通过实际案例演示调试过程。在团队协作中,有效调试能提升整体开发效率,而随着技术发展,调试工具也将持续进化。
87 0
【Flutter 前端技术开发专栏】Flutter 中的调试技巧与工具使用
|
编解码 Dart 安全
Flutter 环境搭建 与 Android 应用的调试
本文介绍 Flutter 环境搭建 与 Android 应用的调试
481 0
Flutter 环境搭建 与 Android 应用的调试
|
Android开发
OPPO手机调试Android Flutter APP时每次都要提示重新安装且不能hot reload
OPPO手机调试Android Flutter APP时每次都要提示重新安装且不能hot reload
|
Dart IDE 开发工具
Flutter如何调试应用【Dart Observatory 】以及调试模式断言
Flutter如何调试应用【Dart Observatory 】以及调试模式断言
|
Dart Android开发 iOS开发
【Flutter】Flutter 混合开发 ( Dart 代码调试 | Flutter 单独调试 | 混合模式下 Flutter 调试 )
【Flutter】Flutter 混合开发 ( Dart 代码调试 | Flutter 单独调试 | 混合模式下 Flutter 调试 )
382 0
【Flutter】Flutter 混合开发 ( Dart 代码调试 | Flutter 单独调试 | 混合模式下 Flutter 调试 )
|
Android开发
老司机带你快速上手调试Flutter项目
对于开发项目来说,调试控制工具是不可少的,开发者是一定要掌握调试工具的使用,一来是为了查看log日志,一来是为了排查错误,再一个原因是可以查看内存占用情况,以便后续性能优化。
4561 0
|
1月前
|
Android开发 iOS开发 容器
鸿蒙harmonyos next flutter混合开发之开发FFI plugin
鸿蒙harmonyos next flutter混合开发之开发FFI plugin