【一起学Rust | Tauri2.0框架】深入浅出 Tauri 2.0 应用调试：从新手到专家的蜕变

前言

Tauri 是一款备受瞩目的跨平台桌面应用开发框架，它允许开发者使用 Web 技术栈（HTML、CSS、JavaScript）构建高性能、安全的原生应用。Tauri 2.0 的发布带来了诸多令人兴奋的新特性和改进，进一步提升了开发体验和应用性能。然而，任何应用的开发过程都离不开调试这一关键环节。对于新手而言，掌握 Tauri 应用的调试技巧至关重要，它能帮助你快速定位问题、理解代码行为、提升开发效率。

本文将带你深入探索 Tauri 2.0 应用的调试世界，从基础的调试工具介绍到高级的调试技巧，再到实战案例分析，一步步引领你成为 Tauri 应用调试高手。无论你是 Tauri 新手还是有一定经验的开发者，相信都能从中获益匪浅。

一、 调试工具：工欲善其事，必先利其器

在 Tauri 应用的调试过程中，选择合适的调试工具至关重要。Tauri 官方推荐并集成了多种强大的调试工具，可以满足不同场景下的调试需求。

1.1. Tauri Devtools

Tauri Devtools 是 Tauri 框架内置的调试工具，它基于 Chrome DevTools，为 Tauri 应用提供了与 Web 应用类似的调试体验。你可以使用它来检查 DOM 结构、样式、网络请求、JavaScript 代码执行等。

1.1.1. 启用 Tauri Devtools

在 Tauri 项目的 tauri.conf.json 配置文件中，确保 build.devPath 或 build.distDir 字段已正确配置。在程序的入口点你可以自由的启用或者关闭Devtools。

tauri::Builder::default()
  .setup(|app| {
    #[cfg(debug_assertions)] // 仅在调试构建时包含此代码
    {
      let window = app.get_webview_window("main").unwrap();
      window.open_devtools();
      window.close_devtools();
    }
    Ok(())
  });

在开发模式下运行 Tauri 应用（tauri dev），Tauri Devtools 会自动启动。你可以通过以下方式打开 Devtools：

• 在应用窗口中右键单击，选择“检查元素”（Inspect Element）或“开发者工具”（Developer Tools）。
• 使用快捷键：
  • Windows/Linux：Ctrl + Shift + I
  • macOS：Cmd + Option + I

1.1.2. Tauri Devtools 的主要功能

Tauri Devtools 提供了与 Chrome DevTools 类似的功能，包括：

• Elements（元素）面板： 检查和修改 HTML DOM 结构、CSS 样式。
• Console（控制台）面板： 查看 JavaScript 控制台输出、执行 JavaScript 代码、调试 JavaScript 代码。
• Sources（源代码）面板： 查看和调试 JavaScript 源代码、设置断点、单步执行代码。
• Network（网络）面板： 查看网络请求、分析网络性能。
• Performance（性能）面板： 分析应用性能、查找性能瓶颈。
• Application（应用）面板： 查看应用资源、存储数据、Service Workers 等。

1.2. VS Code 调试

Visual Studio Code（VS Code）是一款广受欢迎的代码编辑器，它提供了强大的调试功能，可以与 Tauri 应用无缝集成。

1.2.1. 安装 VS Code 扩展

为了在 VS Code 中调试 Tauri 应用，你需要安装以下扩展：

• Rust (rls) 或 rust-analyzer：提供 Rust 语言支持。
• JavaScript Debugger：提供 JavaScript 调试支持。

1.2.2. 配置 VS Code 调试

首先安装 vscode-lldb 扩展。(你直接在vscode的插件商城安装就可以了，非常简单)

在 Tauri 项目的根目录下创建一个 .vscode 文件夹，并在其中创建一个 launch.json 文件，用于配置调试器。（并且写入以下内容）

{
  // 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，并写入以下内容（根据你的实际配置修改）

// .vscode/tasks.json
{
  // 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"]
    }
  ]
}

配置说明：

• Tauri Dev 配置： 用于调试前端代码（JavaScript、HTML、CSS）。
  • type：调试器类型，这里使用 node。
  • request：调试请求类型，launch 表示启动一个新的进程。
  • runtimeExecutable：运行时的可执行文件，这里使用 npm。
  • runtimeArgs：运行时参数，这里使用 run tauri dev 启动 Tauri 开发模式。
  • port：调试端口，默认为 9229。
  • preLaunchTask：预启动任务，可以在启动调试器之前执行一些任务，例如构建前端代码。
• Tauri Rust 配置： 用于调试 Rust 代码。
  • type：调试器类型，lldb（macOS/Linux）或 gdb（Linux）。
  • request：调试请求类型，launch 表示启动一个新的进程。
  • program：要调试的程序，这里是 Tauri 应用的可执行文件路径。
  • args：程序参数。
  • cwd：工作目录。
  • preLaunchTask：预启动任务，可以在启动调试器之前执行一些任务，例如构建 Rust 代码。

内容比较多，如果你感兴趣可以去官网看看，这里参考的官网
https://v2.tauri.app/develop/debug/vscode/

1.2.3. 启动调试

在 VS Code 中打开 Tauri 项目，按下 F5 键或点击调试面板中的“启动调试”按钮，选择相应的调试配置（Tauri Dev 或 Tauri Rust），即可启动调试。

1.3. 其他调试工具

除了 Tauri Devtools 和 VS Code 调试，还有一些其他的调试工具可以用于 Tauri 应用的调试：

• Chrome DevTools (远程调试)： 如果你更习惯使用 Chrome DevTools，可以通过远程调试的方式连接到 Tauri 应用。
• CrabNebula（远程调试）: 是Tauri官方最新推出的远程调试工具，可以看作是是Chrome DevTools的替代品，就现在官方的推荐力度来说，这个应该是Tauri的亲儿子，体验肯定是比Chrome DevTools要更好。
• Safari Web Inspector (macOS)： 如果你在 macOS 上开发 Tauri 应用，可以使用 Safari Web Inspector 进行调试。
• GDB/LLDB (Rust 调试)： 如果你需要更底层的 Rust 代码调试，可以使用 GDB 或 LLDB 调试器。

二、 调试技巧：抽丝剥茧，定位问题

掌握了调试工具的使用方法后，还需要掌握一些调试技巧，才能更高效地定位和解决问题。

2.1. 日志输出

在代码中添加日志输出是最简单、最常用的调试技巧之一。通过在关键位置输出变量值、函数调用信息等，可以帮助你了解代码的执行流程和状态。

在前端中，你可以跟以往一样使用console.log来输出你的日志来调试，或者在devtools中切换到source选项，打上断电即可开启断点调试。

在rust后端中，调试会相对容易一点，rust本身就提供了相当多的调试工具，比如dbg!宏，或者rust的工具本身就支持断点调试，你甚至可以使用println!宏来输出调试你的应用程序。或者tauri也是提供了日志插件可以使用，也是十分的方便。

2.1.1. 前端日志输出

在前端代码中，你可以使用 console.log()、console.info()、console.warn()、console.error() 等方法输出日志信息到 Tauri Devtools 的控制台。

console.log("This is a log message.");
console.info("This is an info message.");
console.warn("This is a warning message.");
console.error("This is an error message.");

2.1.2. Rust 日志输出

在 Rust 代码中，你可以使用 log crate 提供的宏来输出日志信息。

use log::{debug, info, warn, error};

fn main() {
    debug!("This is a debug message.");
    info!("This is an info message.");
    warn!("This is a warning message.");
    error!("This is an error message.");
}

为了使日志输出生效，你需要在 Cargo.toml 文件中添加 log crate 的依赖，并选择一个日志后端（例如 env_logger）。

[dependencies]
log = "0.4"
env_logger = "0.9"

然后，在你的 Rust 代码中初始化日志后端。

use log::info;
use env_logger;

fn main() {
    env_logger::init(); // 初始化日志后端
    info!("Starting the application...");
}

你可以通过设置环境变量 RUST_LOG 来控制日志输出级别。例如，RUST_LOG=info 表示只输出 info 级别及以上的日志。

2.2. 断点调试

断点调试是一种更强大的调试技巧，它允许你在代码执行到特定位置时暂停，然后你可以查看变量值、单步执行代码、检查调用栈等。

2.2.1. 前端断点调试

在 Tauri Devtools 或 VS Code 中，你可以在 JavaScript 代码的行号旁边点击，设置断点。当代码执行到断点时，调试器会暂停，你可以使用调试工具提供的功能进行调试。

2.2.2. Rust 断点调试

在 VS Code 中，你可以在 Rust 代码的行号旁边点击，设置断点。当代码执行到断点时，调试器会暂停，你可以使用调试工具提供的功能进行调试。

2.3. 条件断点

条件断点是一种特殊的断点，它只在满足特定条件时才会触发。这对于调试循环、条件语句等非常有用。

在 Tauri Devtools 或 VS Code 中，你可以在设置断点后，右键单击断点，选择“编辑断点”（Edit Breakpoint），然后输入一个条件表达式。只有当条件表达式的值为 true 时，断点才会被触发。

2.4. 单步执行

单步执行是一种逐行执行代码的调试技巧，它可以帮助你更详细地了解代码的执行过程。

在 Tauri Devtools 或 VS Code 中，你可以使用以下按钮或快捷键进行单步执行：

• Step Over（跳过）： 执行当前行，如果当前行是一个函数调用，则跳过该函数，直接执行下一行。
• Step Into（进入）： 执行当前行，如果当前行是一个函数调用，则进入该函数内部，逐行执行。
• Step Out（跳出）： 执行当前函数剩余的代码，并返回到调用该函数的位置。

2.5. 调用栈

调用栈显示了当前代码执行的路径，即哪些函数依次调用了当前函数。通过查看调用栈，你可以了解函数的调用关系，以及代码执行的上下文。

在 Tauri Devtools 或 VS Code 中，你可以查看调用栈面板，了解当前代码的调用关系。

2.6. 监视表达式

监视表达式允许你实时监视变量或表达式的值。当变量或表达式的值发生变化时，调试器会自动更新显示。

在 Tauri Devtools 或 VS Code 中，你可以添加监视表达式，实时查看变量或表达式的值。

2.7. 网络请求调试

对于涉及网络请求的 Tauri 应用，网络请求调试非常重要。你可以使用 Tauri Devtools 或 VS Code 的网络面板查看网络请求的详细信息，包括请求头、响应头、请求体、响应体等。

2.8. 性能分析

性能分析可以帮助你找出 Tauri 应用的性能瓶颈，例如 CPU 占用过高、内存泄漏等。你可以使用 Tauri Devtools 或 VS Code 的性能面板进行性能分析。

三、 调试场景：实战演练，融会贯通

掌握了调试工具和技巧后，让我们通过一些实际的调试场景来巩固所学知识。

3.1. 场景一：JavaScript 错误

当你的 Tauri 应用出现 JavaScript 错误时，Tauri Devtools 的控制台会显示错误信息，包括错误类型、错误消息、错误堆栈等。你可以根据这些信息定位错误发生的位置和原因。

示例：

function divide(a, b) {
  return a / b;
}

console.log(divide(10, 0)); // 除以 0 会导致错误

在 Tauri Devtools 的控制台中，你会看到以下错误信息：

Uncaught TypeError: Cannot divide by zero
    at divide (index.js:2)
    at index.js:5

根据错误信息，你可以知道错误发生在 divide 函数的第 2 行，原因是除以了 0。

3.2. 场景二：Rust 代码 panic

当你的 Tauri 应用的 Rust 代码发生 panic 时，应用会崩溃，并在终端或日志中显示 panic 信息。你可以根据 panic 信息定位错误发生的位置和原因。

示例：

fn main() {
    let v = vec![1, 2, 3];
    println!("{}", v[10]); // 访问越界会导致 panic
}

在终端或日志中，你会看到以下 panic 信息：

thread 'main' panicked at 'index out of bounds: the len is 3 but the index is 10', src/main.rs:3:20
note: run with `RUST_BACKTRACE=1` environment variable to display a backtrace

根据 panic 信息，你可以知道错误发生在 src/main.rs 文件的第 3 行，原因是访问了越界的索引。

3.3. 场景三：网络请求失败

当你的 Tauri 应用发起的网络请求失败时，Tauri Devtools 的网络面板会显示请求失败的信息，包括状态码、错误消息等。你可以根据这些信息分析请求失败的原因。

示例：

fetch("https://api.example.com/data")
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.error("Error:", error));

如果请求失败，你会在 Tauri Devtools 的网络面板中看到请求的状态码为非 2xx，并且在控制台中看到错误消息。

3.4. 场景四：Tauri API 调用失败

当你的 Tauri 应用调用 Tauri API 失败时，Tauri API 会返回一个错误对象。你可以通过检查错误对象来了解调用失败的原因。

示例：

import { invoke } from "@tauri-apps/api/tauri";

invoke("my_custom_command", { param: "value" })
  .then((result) => console.log(result))
  .catch((error) => console.error("Error:", error));

如果 my_custom_command 调用失败，你会在控制台中看到错误消息。

3.5 场景五：应用性能问题

当你的Tauri应用响应缓慢或者出现卡顿时，你可以通过Tauri Devtools的性能面板，录制一段时间内的应用性能数据，然后分析这些数据，找出性能瓶颈。

示例：

1. 打开 Tauri Devtools 的性能面板。
2. 点击“开始录制”按钮。
3. 在你的应用中执行一些操作，模拟用户的使用场景。
4. 点击“停止录制”按钮。
5. 分析性能数据，找出耗时较长的函数、事件等。

四、 高级调试技巧：更上一层楼

除了基本的调试技巧外，还有一些高级的调试技巧可以帮助你更深入地理解和调试 Tauri 应用。

4.1. 远程调试

远程调试允许你调试运行在另一台设备或虚拟机上的 Tauri 应用。这对于调试跨平台问题或在特定环境下复现问题非常有用。

4.1.1. 前端远程调试

1. 使用Chrome DevTools远程调试

你可以使用 Chrome DevTools 的远程调试功能连接到 Tauri 应用。

1. 在 Tauri 应用启动时，设置环境变量 TAURI_REMOTE_DEBUGGING_PORT 为一个未被占用的端口号。例如：

   TAURI_REMOTE_DEBUGGING_PORT=9222 tauri dev
   

2. 在 Chrome 浏览器中打开 chrome://inspect。

3. 在“Devices”选项卡中，点击“Configure…”按钮，添加你的设备 IP 地址和端口号（例如 localhost:9222）。

4. 在“Remote Target”列表中，你应该能看到你的 Tauri 应用，点击“inspect”即可开始调试。

2. 使用CrabNebula远程调试

作为与 Tauri 项目合作的一部分，CrabNebula 为 Tauri 提供了一个免费的 DevTools 应用程序。此应用程序允许你通过捕获 Tauri 应用程序的嵌入式资源、Tauri 配置文件、日志和跨度，并提供一个 Web 前端来实时无缝地可视化数据，从而对你的 Tauri 应用程序进行检测。

使用 CrabNebula DevTools，你可以检查应用程序的日志事件（包括来自依赖项的日志），跟踪命令调用的性能和 Tauri API 的总体使用情况，并具有用于 Tauri 事件和命令的特殊接口，包括有效负载、响应、内部日志和执行跨度。

首先安装依赖

cargo add tauri-plugin-devtools@2.0.0

然后在函数初始化的地方启用这个插件

fn main() {
    // 应该在应用程序执行的尽可能早的阶段调用此函数。

    #[cfg(debug_assertions)] // 仅在开发版本中启用检测
    let devtools = tauri_plugin_devtools::init();

    let mut builder = tauri::Builder::default();

    #[cfg(debug_assertions)] // 仅在开发版本中启用检测
    {
        builder = builder.plugin(devtools);
    }

    builder
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

然后像往常一样运行你的应用程序，如果一切设置正确，devtools 将打印以下消息：

4.1.2. Rust 远程调试

你可以使用 GDB 或 LLDB 进行 Rust 代码的远程调试。

1. 在目标设备上启动 Tauri 应用，并使用 GDB 或 LLDB 附加到应用进程。

2. 在你的开发机器上，使用 GDB 或 LLDB 连接到目标设备上的调试器。

4.2. 自定义 Tauri API 调试

如果你在 Tauri 应用中使用了自定义的 Tauri API，你可以通过在 Rust 代码中添加日志输出或断点来调试 API 的实现。

这部分调试是拥有充分的自由度的，你可以利用你学到的各种方法来debug你的程序，包括rust自带的调试，如dbg!宏，输出宏println!以及rust编译器本身就会输出存在问题的地方，甚至断点调试查看内存，都是可以的。

4.3. 使用调试器扩展

VS Code 有许多调试器扩展可以增强你的调试体验，例如：

• CodeLLDB：提供更强大的 LLDB 调试功能。
• Debugger for Chrome：提供更强大的 Chrome DevTools 调试功能。

4.4. 利用 Tauri 社区资源

Tauri 社区非常活跃，你可以通过以下方式获取帮助和交流经验：

• Tauri 官方文档： https://tauri.app/
• Tauri GitHub 仓库： https://github.com/tauri-apps/tauri
• Tauri Discord 服务器： https://discord.com/invite/tauri
• Stack Overflow： 搜索 Tauri 相关的问题。

总结

本文详细介绍了 Tauri 2.0 应用的调试方法和技巧，涵盖了调试工具、基本调试技巧、实战场景分析以及高级调试技巧。通过学习本文，你应该能够：

• 熟练使用 Tauri Devtools 和 VS Code 进行 Tauri 应用的调试。
• 掌握日志输出、断点调试、条件断点、单步执行、调用栈、监视表达式等基本调试技巧。
• 能够分析常见的 Tauri 应用问题，例如 JavaScript 错误、Rust 代码 panic、网络请求失败、Tauri API 调用失败等。
• 了解远程调试、自定义 Tauri API 调试等高级调试技巧。
• 利用 Tauri 社区资源获取帮助和交流经验。

调试是软件开发过程中不可或缺的一部分，掌握 Tauri 应用的调试技巧将大大提高你的开发效率和应用质量。希望本文能帮助你成为 Tauri 应用调试高手，构建出更稳定、更可靠的 Tauri 应用！