# 使用原生语言调试器
> 如何将原生调试器连接到你正在运行的 Flutter 应用。
:::note
This guide presumes you understand general debugging,
have installed Flutter and git, and have familiarity
with the Dart language as well as one of the following
languages: Java, Kotlin, Swift, or Objective-C.
本指南假定你理解一般调试知识，
已安装 Flutter 和 Git，并熟悉
Dart 语言以及以下语言之一：
Java、Kotlin、Swift 或 Objective-C。
:::
If you write Flutter apps only with Dart code,
you can debug your code using your IDE's debugger.
The Flutter team recommends VS Code.
如果你仅用 Dart 代码编写 Flutter 应用，
可以使用 IDE 的调试器调试代码。
Flutter 团队推荐使用 VS Code。
If you write a platform-specific plugin or
use platform-specific libraries, you can debug
that portion of your code with a native debugger.
如果你编写平台特定插件或
使用平台特定库，可以使用原生调试器
调试那部分代码。
- To debug iOS or macOS code written in Swift or Objective-C,
you can use Xcode.
要调试用 Swift 或 Objective-C 编写的 iOS 或 macOS 代码，
可以使用 Xcode。
- To debug Android code written in Java or Kotlin,
you can use Android Studio.
要调试用 Java 或 Kotlin 编写的 Android 代码，
可以使用 Android Studio。
- To debug Windows code written in C++, you can use Visual Studio.
要调试用 C++ 编写的 Windows 代码，
可以使用 Visual Studio。
This guide shows you how you can connect _two_
debuggers to your Dart app, one for Dart, and one for the native code.
本指南说明如何将 **两个**
调试器连接到你的 Dart 应用：一个用于 Dart，一个用于原生代码。
## Debug Dart code
## 调试 Dart 代码
This guide describes how to use VS Code to debug your Flutter app.
You can also use your preferred IDE with the
Flutter and Dart plugins installed and configured.
本指南介绍如何使用 VS Code 调试 Flutter 应用。
你也可以使用已安装并配置
Flutter 和 Dart 插件的首选 IDE。
## Debug Dart code using VS Code
## 使用 VS Code 调试 Dart 代码
The following procedure explains how to use the Dart debugger
with the default sample Flutter app.
The featured components in VS Code work and appear when
debugging your own Flutter project as well.
以下步骤说明如何将 Dart 调试器
与默认示例 Flutter 应用配合使用。
在调试你自己的 Flutter 项目时，
VS Code 中展示的这些组件同样可用并会出现。
1. Create a basic Flutter app.
创建一个基本的 Flutter 应用。
```console
$ flutter create my_app
```
```console
Creating project my_app...
Resolving dependencies in my_app...
Got dependencies in my_app.
Wrote 129 files.
All done!
You can find general documentation for Flutter at: https://docs.flutter.dev/
Detailed API documentation is available at: https://api.flutter.dev/
If you prefer video documentation, consider: https://www.youtube.com/c/flutterdev
In order to run your application, type:
$ cd my_app
$ flutter run
Your application code is in my_app/lib/main.dart.
```
```console
$ cd my_app
```
1. Open the `lib\main.dart` file in the Flutter app using
VS Code.
使用 VS Code 打开 Flutter 应用中的 `lib\main.dart` 文件。
1. Click the bug icon
().
This opens the following panes in VS Code:
点击 bug 图标
（）。
这会在 VS Code 中打开以下窗格：
- **Debug**
- **Debug Console**
- **Widget Inspector**
The first time you run the debugger takes the longest.
首次运行调试器耗时最长。
1. Test the debugger.
测试调试器。
a. In `main.dart`, click on this line:
在 `main.dart` 中，点击这一行：
```dart
_counter++;
```
b. Press Shift + F9.
This adds a breakpoint where the
`_counter` variable increments.
按 Shift + F9。
这会在 `_counter` 变量递增处添加断点。
c. In the app, click the **+** button
to increment the counter. The app pauses.
在应用中，点击 **+** 按钮
以增加计数器。应用会暂停。
d. At this point, VS Code displays:
此时，VS Code 会显示：
- In the **Editor Groups**:
在 **Editor Groups** 中：
- The highlighted breakpoint in `main.dart`
`main.dart` 中高亮的断点
- The widget hierarchy for the Flutter app
in the **Widget Tree** of the **Widget Inspector**
**Widget Inspector** 的 **Widget Tree** 中
Flutter 应用的 widget 层级
- In the **side bar**:
在 **侧边栏** 中：
- The state of the app in the **Call Stack** section
**Call Stack** 部分中的应用状态
- The value of the `this` local variable in the **Variables** section
**Variables** 部分中 `this` 局部变量的值
- In the **panel**:
在 **面板** 中：
- The log of the Flutter app in the **Debug console**
**Debug console** 中的 Flutter 应用日志
### VS Code Flutter debugger
### VS Code Flutter 调试器
The Flutter plugin for VS Code adds a number of components
to the VS Code user interface.
VS Code 的 Flutter 插件会向
VS Code 用户界面添加多个组件。
#### Changes to VS Code interface
#### VS Code 界面的变化
When launched, the Flutter debugger adds debugging tools to the
VS Code interface.
启动后，Flutter 调试器会向
VS Code 界面添加调试工具。
The following screenshot and table explain the purpose of each tool.
以下截图和表格说明每个工具的用途。
| Highlight Color in Screenshot截图中的高亮颜色 | Bar, Panel, or Tab栏、面板或标签页 | Contents内容 |
| ----------------------------------------------------------- | ------------------------------------------------ | ---------------------------------------------------------------------------- |
| **Yellow** | Variables | List of current values of variables in the Flutter app |
| **黄色** | Variables | Flutter 应用中变量的当前值列表 |
| | Watch | List of items you chose to track in the Flutter app |
| | Watch | 你在 Flutter 应用中选择跟踪的项列表 |
| | Call Stack | Stack of active subroutines in the Flutter app |
| | Call Stack | Flutter 应用中活动子例程的栈 |
| | Breakpoints | List of exceptions and set breakpoints that you set |
| | Breakpoints | 你设置的异常与断点列表 |
| **Green** | `` | Files that you are editing |
| **绿色** | `` | 你正在编辑的文件 |
| **Pink** | Widget Inspector | Hierarchy of widgets in the running Flutter app |
| **粉色** | Widget Inspector | 正在运行的 Flutter 应用中的 widget 层级 |
| **Blue** | Layout Explorer | Visual of how Flutter placed the widget you selected in the Widget Inspector |
| **蓝色** | Layout Explorer | Flutter 如何在 Widget Inspector 中放置你所选 widget 的可视化 |
| | Widget Details Tree | List of properties of the widget selected in the Widget Inspector |
| | Widget Details Tree | Widget Inspector 中所选 widget 的属性列表 |
| **Orange** | Problems | List of issues the Dart analyzer found in the current Dart file |
| **橙色** | Problems | Dart 分析器在当前 Dart 文件中发现的问题列表 |
| | Output | Response that the Flutter app returns when building an app |
| | Output | 构建应用时 Flutter 应用返回的响应 |
| | Debug Console | Logs or error messages that the Flutter app generates while debugging |
| | Debug Console | 调试时 Flutter 应用生成的日志或错误消息 |
| | Terminal | System shell prompt contained in VS Code |
| | Terminal | VS Code 中包含的系统 shell 提示符 |
{:.table .table-striped}
To change where the panel (in **orange**) appears in VS Code,
go to **View** > **Appearance** > **Panel Position**.
要更改面板（**橙色**）在 VS Code 中的位置，
请前往 **View** > **Appearance** > **Panel Position**。
#### VS Code Flutter debugging toolbar
#### VS Code Flutter 调试工具栏
The toolbar allows you to debug using any debugger.
You can step in, out, and over Dart statements, hot reload, or resume the app.
工具栏让你使用任何调试器进行调试。
你可以单步进入、跳出和跳过 Dart 语句，热重载或恢复应用。
| Icon图标 | Action操作 | Default keyboard shortcut默认键盘快捷键 |
| ----------------------------------------------------- | ------------------------ | ----------------------------------------------------- |
| 
| Start or Resume | F5 |
| 
| 启动或恢复 | F5 |
| 
| Pause | F6 |
| 
| 暂停 | F6 |
| 
| Step Over | F10 |
| 
| 单步跳过 | F10 |
| 
| Step Into | F11 |
| 
| 单步进入 | F11 |
| 
| Step Out | Shift + F11 |
| 
| 单步跳出 | Shift + F11 |
| 
| Hot Reload | Ctrl + F5 |
| 
| 热重载 | Ctrl + F5 |
| 
| Hot Restart | Shift + Special + F5 |
| 
| 热重启 | Shift + Special + F5 |
| 
| Stop | Shift + F5 |
| 
| 停止 | Shift + F5 |
| 
| Open Widget Inspector | |
| 
| 打开 Widget Inspector | |
{:.table .table-striped}
## Update test Flutter app
## 更新测试用 Flutter 应用
For the remainder of this guide, you need to update the
test Flutter app. This update adds native code to debug.
在本指南的其余部分，你需要更新
测试用 Flutter 应用。此更新会添加用于调试的原生代码。
1. Open the `lib/main.dart` file using your preferred IDE.
使用你首选的 IDE 打开 `lib/main.dart` 文件。
1. Replace the contents of `main.dart` with the following code.
将 `main.dart` 的内容替换为以下代码。
Expand to see Flutter code for this example展开以查看此示例的 Flutter 代码
```dart title="lib/main.dart"
// Copyright 2023 The Flutter Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'URL Launcher',
theme: ThemeData(
colorSchemeSeed: Colors.purple,
brightness: Brightness.light,
),
home: const MyHomePage(title: 'URL Launcher'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
State createState() => _MyHomePageState();
}
class _MyHomePageState extends State {
Future? _launched;
Future _launchInBrowser(Uri url) async {
if (!await launchUrl(
url,
mode: LaunchMode.externalApplication,
)) {
throw Exception('Could not launch $url');
}
}
Future _launchInWebView(Uri url) async {
if (!await launchUrl(
url,
mode: LaunchMode.inAppWebView,
)) {
throw Exception('Could not launch $url');
}
}
Widget _launchStatus(BuildContext context, AsyncSnapshot snapshot) {
if (snapshot.hasError) {
return Text('Error: ${snapshot.error}');
} else {
return const Text('');
}
}
@override
Widget build(BuildContext context) {
final Uri toLaunch = Uri(
scheme: 'https',
host: 'docs.flutter.dev',
path: 'testing/native-debugging');
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsets.all(16),
child: Text(toLaunch.toString()),
),
FilledButton(
onPressed: () => setState(() {
_launched = _launchInBrowser(toLaunch);
}),
child: const Text('Launch in browser'),
),
const Padding(padding: EdgeInsets.all(16)),
FilledButton(
onPressed: () => setState(() {
_launched = _launchInWebView(toLaunch);
}),
child: const Text('Launch in app'),
),
const Padding(padding: EdgeInsets.all(16.0)),
FutureBuilder(future: _launched, builder: _launchStatus),
],
),
),
);
}
}
```
1. To add the `url_launcher` package as a dependency,
run `flutter pub add`:
要将 `url_launcher` package 添加为依赖，
请运行 `flutter pub add`：
```console
$ flutter pub add url_launcher
```
```console
Resolving dependencies...
collection 1.17.1 (1.17.2 available)
+ flutter_web_plugins 0.0.0 from sdk flutter
matcher 0.12.15 (0.12.16 available)
material_color_utilities 0.2.0 (0.8.0 available)
+ plugin_platform_interface 2.1.4
source_span 1.9.1 (1.10.0 available)
stream_channel 2.1.1 (2.1.2 available)
test_api 0.5.1 (0.6.1 available)
+ url_launcher 6.1.11
+ url_launcher_android 6.0.36
+ url_launcher_ios 6.1.4
+ url_launcher_linux 3.0.5
+ url_launcher_macos 3.0.5
+ url_launcher_platform_interface 2.1.3
+ url_launcher_web 2.0.17
+ url_launcher_windows 3.0.6
Changed 10 dependencies!
```
1. To check what changed with the codebase:
要检查代码库有哪些变更：
{: type="a"}
1. In Linux or macOS, run this `find` command.
在 Linux 或 macOS 上，运行此 `find` 命令。
```console
$ find ./ -mmin -120
```
```console
./ios/Flutter/Debug.xcconfig
./ios/Flutter/Release.xcconfig
./linux/flutter/generated_plugin_registrant.cc
./linux/flutter/generated_plugins.cmake
./macos/Flutter/Flutter-Debug.xcconfig
./macos/Flutter/Flutter-Release.xcconfig
./macos/Flutter/GeneratedPluginRegistrant.swift
./pubspec.lock
./pubspec.yaml
./windows/flutter/generated_plugin_registrant.cc
./windows/flutter/generated_plugins.cmake
```
1. In Windows, run this command in the command prompt.
在 Windows 上，在命令提示符中运行此命令。
```ps
Get-ChildItem C:\dev\example\ -Rescurse | Where-Object {$_.LastWriteTime -gt (Get-Date).AddDays(-1)}
```
```ps
C:\dev\example\ios\Flutter\
Mode LastWriteTime Length Name
---- ------------- ------ ----
8/1/2025 9:15 AM Debug.xcconfig
8/1/2025 9:15 AM Release.xcconfig
C:\dev\example\linux\flutter\
Mode LastWriteTime Length Name
---- ------------- ------ ----
8/1/2025 9:15 AM generated_plugin_registrant.cc
8/1/2025 9:15 AM generated_plugins.cmake
C:\dev\example\macos\Flutter\
Mode LastWriteTime Length Name
---- ------------- ------ ----
8/1/2025 9:15 AM Flutter-Debug.xcconfig
8/1/2025 9:15 AM Flutter-Release.xcconfig
8/1/2025 9:15 AM GeneratedPluginRegistrant.swift
C:\dev\example\
Mode LastWriteTime Length Name
---- ------------- ------ ----
8/1/2025 9:15 AM pubspec.lock
8/1/2025 9:15 AM pubspec.yaml
C:\dev\example\windows\flutter\
Mode LastWriteTime Length Name
---- ------------- ------ ----
8/1/2025 9:15 AM generated_plugin_registrant.cc
8/1/2025 9:15 AM generated_plugins.cmake
```
Installing `url_launcher` added config files and code files
for all target platforms in the Flutter app directory.
安装 `url_launcher` 会在 Flutter 应用目录中为
所有目标平台添加配置文件和代码文件。
## Debug Dart and native language code at the same time
## 同时调试 Dart 与原生语言代码
This section explains how to debug the Dart code in your Flutter app
and any native code with its regular debugger.
This capability allows you to leverage Flutter's hot reload
when editing native code.
本节说明如何调试 Flutter 应用中的 Dart 代码，
并使用其常规调试器调试任何原生代码。
此能力让你在编辑原生代码时
仍可利用 Flutter 的热重载。
### Debug Dart and Android code using Android Studio
### 使用 Android Studio 调试 Dart 与 Android 代码
To debug native Android code, you need a Flutter app that contains
Android code. In this section, you learn how to connect
the Dart, Java, and Kotlin debuggers to your app.
You don't need VS Code to debug both Dart and Android code.
This guide includes the VS Code instructions to be consistent
with the Xcode and Visual Studio guides.
要调试原生 Android 代码，你需要包含
Android 代码的 Flutter 应用。在本节中，你将学习如何将
Dart、Java 和 Kotlin 调试器连接到你的应用。
调试 Dart 与 Android 代码不一定需要 VS Code。
本指南包含 VS Code 说明，以与
Xcode 和 Visual Studio 指南保持一致。
These section uses the same example Flutter `url_launcher` app created
in [Update test Flutter app](#update-test-flutter-app).
本节使用在 [更新测试用 Flutter 应用](#update-test-flutter-app) 中创建的
相同示例 Flutter `url_launcher` 应用。
#### Build the Android version of the Flutter app in the Terminal
#### 在终端中构建 Flutter app 的 Android 版本
To generate the needed Android platform dependencies,
run the `flutter build` command.
要生成所需的 Android 平台依赖，请运行 `flutter build` 命令。
```console
flutter build appbundle --debug
```
```console
Running Gradle task 'bundleDebug'... 27.1s
✓ Built build/app/outputs/bundle/debug/app-debug.aab.
```
#### Start debugging with VS Code first {:#from-vscode-to-android-studio}
#### 先从 VS Code 开始调试 {:#from-vscode-to-android-studio}
If you use VS Code to debug most of your code, start with this section.
若你主要用 VS Code 调试代码，请从本节开始。
1. To open the Flutter app directory, go to
**File** >
**Open Folder...** and choose the `my_app` directory.
要打开 Flutter app 目录，请前往
**File** >
**Open Folder...**，选择 `my_app` 目录。
1. Open the `lib/main.dart` file.
打开 `lib/main.dart` 文件。
1. If you can build an app for more than one device,
you must select the device first.
若可为多种设备构建 app，须先选择设备。
Go to
**View** >
**Command Palette...**
前往
**View** >
**Command Palette...**
You can also press Ctrl / Cmd +
Shift + P.
也可按 Ctrl / Cmd + Shift + P。
1. Type `flutter select`.
输入 `flutter select`。
1. Click the **Flutter: Select Device** command.
点击 **Flutter: Select Device** 命令。
1. Choose your target device.
选择目标设备。
1. Click the debug icon
().
This opens the **Debug** pane and launches the app.
Wait for the app to launch on the device and for the debug pane to
indicate **Connected**.
The debugger takes longer to launch the first time.
Subsequent launches start faster.
点击调试图标
()。
这会打开 **Debug** 窗格并启动 app。
等待 app 在设备上启动，且调试窗格显示 **Connected**。
首次启动调试器耗时更长，之后启动会更快。
This Flutter app contains two buttons:
此 Flutter app 包含两个按钮：
- **Launch in browser**: This button opens this page in the
default browser of your device.
**Launch in browser**：此按钮会在设备的默认浏览器中打开本页。
- **Launch in app**: This button opens this page within your app.
This button only works for iOS or Android. Desktop apps launch a browser.
**Launch in app**：此按钮会在 app 内打开本页。
仅适用于 iOS 或 Android。桌面 app 会启动浏览器。
#### Attach to the Flutter process in Android Studio
#### 在 Android Studio 中附加到 Flutter 进程
1. Click the **Attach debugger to Android process** button.
()
点击 **Attach debugger to Android process**（将调试器附加到 Android 进程）按钮。
()
:::tip
If this button doesn't appear in the **Projects** menu bar, verify that
you opened Flutter _application_ project but _not a Flutter plugin_.
若 **Projects** 菜单栏中没有此按钮，请确认你打开的是 Flutter **application** 项目，
而 **不是 Flutter plugin**。
:::
1. The **process** dialog displays one entry for each connected device.
Select **show all processes** to display available processes for each
device.
**process** 对话框会为每个已连接设备显示一项。
选择 **show all processes**（显示所有进程）可显示各设备上的可用进程。
1. Choose the process to which you want to attach.
For this guide, select the `com.example.my_app` process
using the **Emulator Pixel_5_API_33**.
选择要附加的进程。
本指南请选择 **Emulator Pixel_5_API_33** 上的 `com.example.my_app` 进程。
1. Locate the tab for **Android Debugger** in the **Debug** pane.
在 **Debug** 窗格中找到 **Android Debugger** 标签页。
1. In the **Project** pane, expand
**my_app_android** >
**android** >
**app** >
**src** >
**main** >
**java** >
**io.flutter plugins**.
在 **Project** 窗格中展开
**my_app_android** >
**android** >
**app** >
**src** >
**main** >
**java** >
**io.flutter plugins**。
1. Double click **GeneratedProjectRegistrant** to open the
Java code in the **Edit** pane.
双击 **GeneratedProjectRegistrant**，在 **Edit** 窗格中打开 Java 代码。
At the end of this procedure, both the Dart and Android debuggers interact
with the same process.
Use either, or both, to set breakpoints, examine stack, resume execution
and the like. In other words, debug!
完成此流程后，Dart 与 Android 调试器都会与同一进程交互。
你可以使用其中任一或两者来设置断点、查看堆栈、恢复执行等。换句话说，开始调试吧！
#### Start debugging with Android Studio first {:#from-android-studio}
#### 先从 Android Studio 开始调试 {:#from-android-studio}
If you use Android Studio to debug most of your code, start with this section.
若你主要用 Android Studio 调试代码，请从本节开始。
1. To open the Flutter app directory, go to
**File** >
**Open...** and choose the `my_app` directory.
要打开 Flutter app 目录，请前往
**File** >
**Open...**，选择 `my_app` 目录。
1. Open the `lib/main.dart` file.
打开 `lib/main.dart` 文件。
1. Choose a virtual Android device.
Go to the toolbar, open the leftmost dropdown menu, and click on
**Open Android Emulator: \**.
选择虚拟 Android 设备。
在工具栏打开最左侧下拉菜单，点击 **Open Android Emulator: \**。
You can choose any installed emulator that's doesn't include `arm64`.
你可以选择任何已安装且名称中不包含 `arm64` 的模拟器。
1. From that same menu, select the virtual Android device.
在同一菜单中选择该虚拟 Android 设备。
1. From the toolbar, click **Run 'main.dart'**.
在工具栏点击 **Run 'main.dart'**。
You can also press Ctrl + Shift + R.
也可按 Ctrl + Shift + R。
After the app displays in the emulator, continue to the next step.
app 在模拟器中显示后，继续下一步。
1. Click the **Attach debugger to Android process** button.
()
点击 **Attach debugger to Android process**（将调试器附加到 Android 进程）按钮。
()
:::tip
If this button doesn't appear in the **Projects** menu bar, verify that
you opened Flutter _application_ project but _not a Flutter plugin_.
若 **Projects** 菜单栏中没有此按钮，请确认你打开的是 Flutter **application** 项目，
而 **不是 Flutter plugin**。
:::
1. The **process** dialog displays one entry for each connected device.
Select **show all processes** to display available processes for each
device.
**process** 对话框会为每个已连接设备显示一项。
选择 **show all processes**（显示所有进程）可显示各设备上的可用进程。
1. Choose the process to which you want to attach.
For this guide, select the `com.example.my_app` process
using the **Emulator Pixel_5_API_33**.
选择要附加的进程。
本指南请选择 **Emulator Pixel_5_API_33** 上的 `com.example.my_app` 进程。
1. Locate the tab for **Android Debugger** in the **Debug** pane.
在 **Debug** 窗格中找到 **Android Debugger** 标签页。
1. In the **Project** pane, expand
**my_app_android** >
**android** >
**app** >
**src** >
**main** >
**java** >
**io.flutter plugins**.
在 **Project** 窗格中展开
**my_app_android** >
**android** >
**app** >
**src** >
**main** >
**java** >
**io.flutter plugins**。
1. Double click **GeneratedProjectRegistrant** to open the
Java code in the **Edit** pane.
双击 **GeneratedProjectRegistrant**，在 **Edit** 窗格中打开 Java 代码。
At the end of this procedure, both the Dart and Android debuggers interact
with the same process.
Use either, or both, to set breakpoints, examine stack, resume execution
and the like. In other words, debug!
完成此流程后，Dart 与 Android 调试器都会与同一进程交互。
你可以使用其中任一或两者来设置断点、查看堆栈、恢复执行等。换句话说，开始调试吧！
### Debug Dart and iOS code using Xcode
### 使用 Xcode 调试 Dart 与 iOS 代码
To debug iOS code, you need a Flutter app that contains iOS code.
In this section, you learn to connect two debuggers to your app:
Flutter via VS Code and Xcode. You need to run both VS Code and Xcode.
要调试 iOS 代码，你需要包含 iOS 代码的 Flutter 应用。
在本节中，你将学习将两个调试器连接到你的应用：
通过 VS Code 的 Flutter 与 Xcode。你需要同时运行 VS Code 和 Xcode。
These section uses the same example Flutter `url_launcher` app created
in [Update test Flutter app](#update-test-flutter-app).
本节使用在 [更新测试用 Flutter 应用](#update-test-flutter-app) 中创建的
相同示例 Flutter `url_launcher` 应用。
#### Build the iOS version of the Flutter app in the Terminal
#### 在终端中构建 Flutter app 的 iOS 版本
To generate the needed iOS platform dependencies,
run the `flutter build` command.
要生成所需的 iOS 平台依赖，请运行 `flutter build` 命令。
```console
$ flutter build ios --config-only --no-codesign --debug
```
```console
Warning: Building for device with codesigning disabled. You will have to manually codesign before deploying to device.
Building com.example.myApp for device (ios)...
```
#### Start debugging with VS Code first {:#vscode-ios}
#### 先从 VS Code 开始调试 {:#vscode-ios}
If you use VS Code to debug most of your code, start with this section.
若你主要用 VS Code 调试代码，请从本节开始。
##### Start the Dart debugger in VS Code
##### 在 VS Code 中启动 Dart 调试器
1. To open the Flutter app directory, go to
**File** >
**Open Folder...** and choose the `my_app` directory.
要打开 Flutter app 目录，请前往
**File** >
**Open Folder...**，选择 `my_app` 目录。
1. Open the `lib/main.dart` file.
打开 `lib/main.dart` 文件。
1. If you can build an app for more than one device,
you must select the device first.
若可为多种设备构建 app，须先选择设备。
Go to
**View** >
**Command Palette...**
前往
**View** >
**Command Palette...**
You can also press Ctrl / Cmd +
Shift + P.
也可按 Ctrl / Cmd + Shift + P。
1. Type `flutter select`.
输入 `flutter select`。
1. Click the **Flutter: Select Device** command.
点击 **Flutter: Select Device** 命令。
1. Choose your target device.
选择目标设备。
1. Click the debug icon
().
This opens the **Debug** pane and launches the app.
Wait for the app to launch on the device and for the debug pane to
indicate **Connected**.
The debugger takes longer to launch the first time.
Subsequent launches start faster.
点击调试图标
()。
这会打开 **Debug** 窗格并启动 app。
等待 app 在设备上启动，且调试窗格显示 **Connected**。
首次启动调试器耗时更长，之后启动会更快。
This Flutter app contains two buttons:
此 Flutter app 包含两个按钮：
- **Launch in browser**: This button opens this page in the
default browser of your device.
**Launch in browser**：此按钮会在设备的默认浏览器中打开本页。
- **Launch in app**: This button opens this page within your app.
This button only works for iOS or Android. Desktop apps launch a browser.
**Launch in app**：此按钮会在 app 内打开本页。
仅适用于 iOS 或 Android。桌面 app 会启动浏览器。
##### Attach to the Flutter process in Xcode
##### 在 Xcode 中附加到 Flutter 进程
To attach to the Flutter app in Xcode:
要在 Xcode 中附加到 Flutter app：
1. Go to **Debug** > **Attach to Process**.
前往 **Debug** > **Attach to Process**。
1. Select **Runner**. It should be at the top of the
**Attach to Process** menu under the **Likely Targets** heading.
选择 **Runner**。
它应位于 **Attach to Process** 菜单 **Likely Targets** 标题下的顶部。
#### Start debugging with Xcode first {:#xcode-ios}
#### 先从 Xcode 开始调试 {:#xcode-ios}
If you use Xcode to debug most of your code, start with this section.
若你主要用 Xcode 调试代码，请从本节开始。
##### Start the Xcode debugger
##### 启动 Xcode 调试器
1. Open `ios/Runner.xcworkspace` from your Flutter app directory.
从 Flutter app 目录打开 `ios/Runner.xcworkspace`。
1. Select the correct device using the **Scheme** menu in the toolbar.
使用工具栏中的 **Scheme** 菜单选择正确的设备。
If you have no preference, choose **iPhone Pro 14**.
若无偏好，请选择 **iPhone Pro 14**。
1. Run this Runner as a normal app in Xcode.
在 Xcode 中将此 Runner 作为普通 app 运行。
When the run completes, the **Debug** area at the bottom of Xcode displays
a message with the Dart VM service URI. It resembles the following response:
运行完成后，Xcode 底部的 **Debug** 区域会显示包含 Dart VM 服务 URI 的消息，
类似以下输出：
```console
2023-07-12 14:55:39.966191-0500 Runner[58361:53017145]
flutter: The Dart VM service is listening on
http://127.0.0.1:50642/00wEOvfyff8=/
```
1. Copy the Dart VM service URI.
复制 Dart VM 服务 URI。
##### Attach to the Dart VM in VS Code
##### 在 VS Code 中附加到 Dart VM
1. To open the command palette, go to
**View** >
**Command Palette...**
要打开命令面板，请前往
**View** >
**Command Palette...**
You can also press Cmd + Shift + P.
也可按 Cmd + Shift + P。
1. Type `debug`.
输入 `debug`。
1. Click the **Debug: Attach to Flutter on Device** command.
点击 **Debug: Attach to Flutter on Device** 命令。
1. In the **Paste an VM Service URI** box, paste the URI you copied
from Xcode and press Enter.
在 **Paste an VM Service URI** 框中粘贴从 Xcode 复制的 URI，
然后按 Enter。
### Debug Dart and macOS code using Xcode
### 使用 Xcode 调试 Dart 与 macOS 代码
To debug macOS code, you need a Flutter app that contains macOS code.
In this section, you learn to connect two debuggers to your app:
Flutter via VS Code and Xcode. You need to run both VS Code and Xcode.
要调试 macOS 代码，你需要包含 macOS 代码的 Flutter 应用。
在本节中，你将学习将两个调试器连接到你的应用：
通过 VS Code 的 Flutter 与 Xcode。你需要同时运行 VS Code 和 Xcode。
These section uses the same example Flutter `url_launcher` app created
in [Update test Flutter app](#update-test-flutter-app).
本节使用在 [更新测试用 Flutter 应用](#update-test-flutter-app) 中创建的
相同示例 Flutter `url_launcher` 应用。
#### Build the macOS version of the Flutter app in the Terminal
#### 在终端中构建 Flutter app 的 macOS 版本
To generate the needed macOS platform dependencies,
run the `flutter build` command.
要生成所需的 macOS 平台依赖，请运行 `flutter build` 命令。
```console
flutter build macos --debug
```
```console
Building macOS application...
```
#### Start debugging with VS Code first {:#vscode-macos}
#### 先从 VS Code 开始调试 {:#vscode-macos}
##### Start the debugger in VS Code
##### 在 VS Code 中启动调试器
1. To open the Flutter app directory, go to
**File** >
**Open Folder...** and choose the `my_app` directory.
要打开 Flutter app 目录，请前往
**File** >
**Open Folder...**，选择 `my_app` 目录。
1. Open the `lib/main.dart` file.
打开 `lib/main.dart` 文件。
1. If you can build an app for more than one device,
you must select the device first.
若可为多种设备构建 app，须先选择设备。
Go to
**View** >
**Command Palette...**
前往
**View** >
**Command Palette...**
You can also press Ctrl / Cmd +
Shift + P.
也可按 Ctrl / Cmd + Shift + P。
1. Type `flutter select`.
输入 `flutter select`。
1. Click the **Flutter: Select Device** command.
点击 **Flutter: Select Device** 命令。
1. Choose your target device.
选择目标设备。
1. Click the debug icon
().
This opens the **Debug** pane and launches the app.
Wait for the app to launch on the device and for the debug pane to
indicate **Connected**.
The debugger takes longer to launch the first time.
Subsequent launches start faster.
点击调试图标
()。
这会打开 **Debug** 窗格并启动 app。
等待 app 在设备上启动，且调试窗格显示 **Connected**。
首次启动调试器耗时更长，之后启动会更快。
This Flutter app contains two buttons:
此 Flutter app 包含两个按钮：
- **Launch in browser**: This button opens this page in the
default browser of your device.
**Launch in browser**：此按钮会在设备的默认浏览器中打开本页。
- **Launch in app**: This button opens this page within your app.
This button only works for iOS or Android. Desktop apps launch a browser.
**Launch in app**：此按钮会在 app 内打开本页。
仅适用于 iOS 或 Android。桌面 app 会启动浏览器。
##### Attach to the Flutter process in Xcode
##### 在 Xcode 中附加到 Flutter 进程
1. To attach to the Flutter app, go to
**Debug** >
**Attach to Process** >
**Runner**.
要附加到 Flutter app，请前往
**Debug** >
**Attach to Process** >
**Runner**。
**Runner** should be at the top of the **Attach to Process** menu
under the **Likely Targets** heading.
**Runner** 应位于 **Attach to Process** 菜单
**Likely Targets** 标题下的顶部。
#### Start debugging with Xcode first {:#xcode-macos}
#### 先从 Xcode 开始调试 {:#xcode-macos}
##### Start the debugger in Xcode
##### 在 Xcode 中启动调试器
1. Open `macos/Runner.xcworkspace` from your Flutter app directory.
从 Flutter app 目录打开 `macos/Runner.xcworkspace`。
1. Run this Runner as a normal app in Xcode.
在 Xcode 中将此 Runner 作为普通 app 运行。
When the run completes, the **Debug** area at the bottom of Xcode displays
a message with the Dart VM service URI. It resembles the following response:
运行完成后，Xcode 底部的 **Debug** 区域会显示包含 Dart VM 服务 URI 的消息，
类似以下输出：
```console
2023-07-12 14:55:39.966191-0500 Runner[58361:53017145]
flutter: The Dart VM service is listening on
http://127.0.0.1:50642/00wEOvfyff8=/
```
1. Copy the Dart VM service URI.
复制 Dart VM 服务 URI。
##### Attach to the Dart VM in VS Code
##### 在 VS Code 中附加到 Dart VM
1. To open the command palette, go to **View** > **Command Palette...**
要打开命令面板，请前往 **View** > **Command Palette...**
You can also press Cmd + Shift + P.
也可按 Cmd + Shift + P。
1. Type `debug`.
输入 `debug`。
1. Click the **Debug: Attach to Flutter on Device** command.
点击 **Debug: Attach to Flutter on Device** 命令。
1. In the **Paste an VM Service URI** box, paste the URI you copied
from Xcode and press Enter.
在 **Paste an VM Service URI** 框中粘贴从 Xcode 复制的 URI，
然后按 Enter。
### Debug Dart and C++ code using Visual Studio
### 使用 Visual Studio 调试 Dart 与 C++ 代码
To debug C++ code, you need a Flutter app that contains C++ code.
In this section, you learn to connect two debuggers to your app:
Flutter via VS Code and Visual Studio.
You need to run both VS Code and Visual Studio.
要调试 C++ 代码，你需要包含 C++ 代码的 Flutter 应用。
在本节中，你将学习将两个调试器连接到你的应用：
通过 VS Code 的 Flutter 与 Visual Studio。
你需要同时运行 VS Code 和 Visual Studio。
These section uses the same example Flutter `url_launcher` app created
in [Update test Flutter app](#update-test-flutter-app).
本节使用在 [更新测试用 Flutter 应用](#update-test-flutter-app) 中创建的
相同示例 Flutter `url_launcher` 应用。
#### Build the Windows version of the Flutter app in PowerShell or the Command Prompt
#### 在 PowerShell 或命令提示符中构建 Flutter app 的 Windows 版本
To generate the needed Windows platform dependencies,
run the `flutter build` command.
要生成所需的 Windows 平台依赖，请运行 `flutter build` 命令。
```console
C:\> flutter build windows --debug
```
```console
Building Windows application... 31.4s
√ Built build\windows\runner\Debug\my_app.exe.
```
#### Start debugging with VS Code first {:#vscode-windows}
#### 先从 VS Code 开始调试 {:#vscode-windows}
If you use VS Code to debug most of your code, start with this section.
若你主要用 VS Code 调试代码，请从本节开始。
##### Start the debugger in VS Code
##### 在 VS Code 中启动调试器
1. To open the Flutter app directory, go to
**File** >
**Open Folder...** and choose the `my_app` directory.
要打开 Flutter app 目录，请前往
**File** >
**Open Folder...**，选择 `my_app` 目录。
1. Open the `lib/main.dart` file.
打开 `lib/main.dart` 文件。
1. If you can build an app for more than one device,
you must select the device first.
若可为多种设备构建 app，须先选择设备。
Go to
**View** >
**Command Palette...**
前往
**View** >
**Command Palette...**
You can also press Ctrl / Cmd +
Shift + P.
也可按 Ctrl / Cmd + Shift + P。
1. Type `flutter select`.
输入 `flutter select`。
1. Click the **Flutter: Select Device** command.
点击 **Flutter: Select Device** 命令。
1. Choose your target device.
选择目标设备。
1. Click the debug icon
().
This opens the **Debug** pane and launches the app.
Wait for the app to launch on the device and for the debug pane to
indicate **Connected**.
The debugger takes longer to launch the first time.
Subsequent launches start faster.
点击调试图标
()。
这会打开 **Debug** 窗格并启动 app。
等待 app 在设备上启动，且调试窗格显示 **Connected**。
首次启动调试器耗时更长，之后启动会更快。
This Flutter app contains two buttons:
此 Flutter app 包含两个按钮：
- **Launch in browser**: This button opens this page in the
default browser of your device.
**Launch in browser**：此按钮会在设备的默认浏览器中打开本页。
- **Launch in app**: This button opens this page within your app.
This button only works for iOS or Android. Desktop apps launch a browser.
**Launch in app**：此按钮会在 app 内打开本页。
仅适用于 iOS 或 Android。桌面 app 会启动浏览器。
##### Attach to the Flutter process in Visual Studio
##### 在 Visual Studio 中附加到 Flutter 进程
1. To open the project solution file, go to
**File** >
**Open** >
**Project/Solution…**
要打开项目解决方案文件，请前往
**File** >
**Open** >
**Project/Solution…**
You can also press Ctrl + Shift + O.
也可按 Ctrl + Shift + O。
1. Choose the `build/windows/my_app.sln` file in your Flutter app directory.
在 Flutter app 目录中选择 `build/windows/my_app.sln` 文件。
1. Go to **Debug** > **Attach to Process**.
前往 **Debug** > **Attach to Process**。
You can also press Ctrl + Alt + P.
也可按 Ctrl + Alt + P。
1. From the **Attach to Process** dialog box, choose `my_app.exe`.
在 **Attach to Process** 对话框中选择 `my_app.exe`。
Visual Studio starts monitoring the Flutter app.
Visual Studio 开始监视 Flutter app。
#### Start debugging with Visual Studio first
#### 先从 Visual Studio 开始调试
If you use Visual Studio to debug most of your code, start with this section.
若你主要用 Visual Studio 调试代码，请从本节开始。
##### Start the local Windows debugger
##### 启动本地 Windows 调试器
1. To open the project solution file, go to
**File** >
**Open** >
**Project/Solution…**
要打开项目解决方案文件，请前往
**File** >
**Open** >
**Project/Solution…**
You can also press Ctrl + Shift + O.
也可按 Ctrl + Shift + O。
1. Choose the `build/windows/my_app.sln` file in your Flutter app directory.
在 Flutter app 目录中选择 `build/windows/my_app.sln` 文件。
1. Set `my_app` as the startup project.
In the **Solution Explorer**, right-click on `my_app` and select
**Set as Startup Project**.
将 `my_app` 设为启动项目。
在 **Solution Explorer** 中右键点击 `my_app`，选择 **Set as Startup Project**。
1. Click **Local Windows Debugger** to start debugging.
点击 **Local Windows Debugger** 开始调试。
You can also press F5.
也可按 F5。
When the Flutter app has started, a console window displays
a message with the Dart VM service URI. It resembles the following response:
Flutter app 启动后，控制台窗口会显示包含 Dart VM 服务 URI 的消息，
类似以下输出：
```console
flutter: The Dart VM service is listening on http://127.0.0.1:62080/KPHEj2qPD1E=/
```
1. Copy the Dart VM service URI.
复制 Dart VM 服务 URI。
##### Attach to the Dart VM in VS Code
##### 在 VS Code 中附加到 Dart VM
1. To open the command palette, go to
**View** >
**Command Palette...**
要打开命令面板，请前往
**View** >
**Command Palette...**
You can also press Cmd + Shift + P.
也可按 Cmd + Shift + P。
1. Type `debug`.
输入 `debug`。
1. Click the **Debug: Attach to Flutter on Device** command.
点击 **Debug: Attach to Flutter on Device** 命令。
1. In the **Paste an VM Service URI** box, paste the URI you copied
from Visual Studio and press Enter.
在 **Paste an VM Service URI** 框中粘贴从 Visual Studio 复制的 URI，
然后按 Enter。
## Resources
## 资源
Check out the following resources on debugging Flutter, iOS, Android,
macOS and Windows:
请查阅以下关于调试 Flutter、iOS、Android、
macOS 和 Windows 的资源：
### Flutter
- [Debugging Flutter apps][]
[调试 Flutter 应用][Debugging Flutter apps]
- [Flutter inspector][] and the [DevTools][] docs
[Flutter inspector][] 与 [DevTools][] 文档
- [Performance profiling][]
[性能分析][Performance profiling]
[Debugging Flutter apps]: /testing/debugging
[Performance profiling]: /perf/ui-performance
### Android
You can find the following debugging resources on
[developer.android.com][].
你可以在 [developer.android.com][] 上找到以下调试资源。
- [Debug your app][]
[调试你的应用][Debug your app]
- [Android Debug Bridge (adb)][]
[Android Debug Bridge (adb)][Android Debug Bridge (adb)]
### iOS and macOS
### iOS 与 macOS
You can find the following debugging resources on
[developer.apple.com][].
你可以在 [developer.apple.com][] 上找到以下调试资源。
- [Debugging][]
[调试][Debugging]
- [Instruments Help][]
[Instruments 帮助][Instruments Help]
### Windows
You can find debugging resources on [Microsoft Learn][].
你可以在 [Microsoft Learn][] 上找到调试资源。
- [Visual Studio Debugger][]
[Visual Studio 调试器][Visual Studio Debugger]
- [Learn to debug C++ code using Visual Studio][]
[学习使用 Visual Studio 调试 C++ 代码][Learn to debug C++ code using Visual Studio]
[Android Debug Bridge (adb)]: https://developer.android.google.cn/studio/command-line/adb
[Debug your app]: https://developer.android.google.cn/studio/debug
[Debugging]: https://developer.apple.com/support/debugging/
[developer.android.com]: https://developer.android.google.cn
[developer.apple.com]: https://developer.apple.com
[DevTools]: /tools/devtools
[Flutter inspector]: /tools/devtools/inspector
[Instruments Help]: https://help.apple.com/instruments/mac/current/
[Microsoft Learn]: https://learn.microsoft.com/visualstudio/
[Visual Studio Debugger]: https://learn.microsoft.com/visualstudio/debugger/?view=vs-2022
[Learn to debug C++ code using Visual Studio]: https://learn.microsoft.com/visualstudio/debugger/getting-started-with-the-debugger-cpp?view=vs-2022