Tauri Debug

在本文中我们将详细讲解在各平台如何debug tauri项目。

Tauri 程序是使用 Tauri 工具包构建的桌面应用程序。Tauri 是一个开源的应用构建工具包,可用将使用 Web 技术(HTML、CSS 和 JavaScript)构建程序包装成桌面应用程序。

1. 了解Tauri项目结构

在进行Tauri Debug之前, 我需要了解一个Tauri项目的典型结构。

在我的博客使用Tauri和Angular创建桌面应用程序中详细解剖了一个典型的应用程序结构如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
your_project_name # 项目名称
├── node_modules # 前端依赖
├── README.md # 项目介绍文件
├── angular.json # Angular工程配置文件
├── package-lock.json # 前端依赖的精确描述信息
├── package.json # 前端项目清单
├── src # 前端程序源
│ ├── app # Angular 类, 模板, 样式, 组件等
│ ├── assets # 图片等静态资源
│ ├── index.html # 项目主界面
│ ├── main.ts # Angular应用入口文件
│ └── styles.scss # css样式文件
├── src-tauri
│ ├── Cargo.lock # 包含了依赖的精确描述信息,类似于 yarn.lock 或 package-lock.json
│ ├── Cargo.toml # Tauri (Rust) 项目清单
│ ├── build.rs # Tauri 构建应用
│ ├── icons # 应用程序图标
│ ├── src # Tauri App 程序源,例如系统菜单,托盘,插件配置等
│ ├── target # 构建的产物会被放入此文件夹中,target 目录的结构取决于是否使用 --target 标志为特定的平台构建
│ └── tauri.conf.json # 自定义 Tauri 应用程序的配置文件,例如应用程序窗口尺寸,应用名称,权限等
├── tsconfig.app.json # Angular要用到的typescript 配置文件
└── tsconfig.json # typescript 配置文件

从以上结构我们可以看出,一个典型Tauri项目一般分为两部分:

  1. src

第一部分是位于src下的前端代码,包括HTML,样式文件和js或ts脚本,其允许在webview中,其作用是用来展现应用视图,以及与用户进行交互;

  1. src-tauri

第二部分是位于src-tauri部分, 这部分代码主要是使用Rust编写,最终也运行在终端上,如桌面端和移动端。

其有多种作用,首先其相当前端应用的壳,将前端程序包装成特定平台的应用程序,并负责与前端平台例如(Windows, Linux, Macos, Android, iOS)进行交互。

其二, 它也可用与前端应用程序进行交互,以增强前端应用程序的功能。由于前端应用只允许运行在webview上,其功能受到很大限制, 而src-tauri编译出来的应用程序运行在操作系统上和native应用具有相同的权限,具有更强的与系统交互的能力。

其三, src-tauri部分也可以直接与后端程序进行交互。

而debug这两部分代码的方式是不同的。多数情况下我们debug前端程序我们需要借助devtool工具;而debug src-tauri我们需要借助Rust相关debug工具。

2. 前端debug

2.1. 开发阶段debug

在开发过程中,我们可以使用debug选项启动项目。关于tauri命令详解, 可以参考我的文档Tauri cli详解

1
2
3

npm run tauri dev

系统将会打开应用程序,在应用程序界面右键菜单,选择检查(inspect)打开Devtools进行debug, 后续操作跟浏览器上debug几乎一样,这里就不详细展开来讲了。

2.2. 测试环境debug

有时我们的应用发布到测试环境例如QA环境,或者UAT环境后依然会出错,此时如何进行debug呢?

如果在打包时带上debug选项,生成的应用程序是支持debug的。

1
2
3

npm run tauri build -- --debug

将应用在测试环境安装并打开, 在右键菜单中会存在检查(inspect), 点击检查菜单即可打开Devtools程序进行debug。

3. src-tauri debug

创建一个.vscode/launch.json文件,并将以下json内容粘贴到其中:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "lldb",
"request": "launch",
"name": "Tauri Development Debug",
"cargo": {
"args": [
"build",
"--manifest-path=./src-tauri/Cargo.toml",
"--no-default-features"
]
},
// task for the `beforeDevCommand` if used, must be configured in `.vscode/tasks.json`
"preLaunchTask": "ui:dev"
},
{
"type": "lldb",
"request": "launch",
"name": "Tauri Production Debug",
"cargo": {
"args": ["build", "--release", "--manifest-path=./src-tauri/Cargo.toml"]
},
// task for the `beforeBuildCommand` if used, must be configured in `.vscode/tasks.json`
"preLaunchTask": "ui:build"
}
]
}

这启动脚本直接使用cargo来构建Rust应用程序,并在开发和生产模式中加载它。
请注意,它不使用Tauri CLI,因此不执行独占CLI功能。beforeDevCommand和beforeBuildCommand脚本必须事先执行,或者在preLaunchTask字段中配置为任务。下面是一个示例.vscode/tasks.json文件,它有两个任务,一个用于生成开发服务器的beforeDevCommand,另一个用于beforeBuildCommand:

.vscode/tasks.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [
{
"label": "ui:dev",
"type": "shell",
// `dev` keeps running in the background
// ideally you should also configure a `problemMatcher`
// see https://code.visualstudio.com/docs/editor/tasks#_can-a-background-task-be-used-as-a-prelaunchtask-in-launchjson
"isBackground": true,
// change this to your `beforeDevCommand`:
"command": "yarn",
"args": ["dev"]
},
{
"label": "ui:build",
"type": "shell",
// change this to your `beforeBuildCommand`:
"command": "yarn",
"args": ["build"]
}
]
}

现在,您可以在src-tauri/src/main.rs或任何其他Rust文件中设置断点,并按F5键开始调试

4. 参考文档

Application Debugging

作者

鹏叔

发布于

2023-12-18

更新于

2024-07-10

许可协议

评论