Tauri Debug

发表于 更新于 分类于 阅读次数： 本文字数： 4.1k 阅读时长 ≈ 4 分钟

在本文中我们将详细讲解在各平台如何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