【一起学Rust | Tauri2.0框架】深入浅出 Tauri 2.0 应用调试：从新手到专家的蜕变
前言
Tauri 是一款备受瞩目的跨平台桌面应用开发框架，它允许开发者使用 Web 技术栈（HTML、CSS、JavaScript）构建高性能、安全的原生应用。Tauri 2.0 的发布带来了诸多令人兴奋的新特性和改进，进一步提升了开发体验和应用性能。然而，任何应用的开发过程都离不开调试这一关键环节。对于新手而言，掌握 Tauri 应用的调试技巧至关重要，它能帮助你快速定位问题、理解代码行为、提升开发效率。
本文将带你深入探索 Tauri 2.0 应用的调试世界，从基础的调试工具介绍到高级的调试技巧，再到实战案例分析，一步步引领你成为 Tauri 应用调试高手。无论你是 Tauri 新手还是有一定经验的开发者，相信都能从中获益匪浅。
文章目录
- 前言
- 一、 调试工具：工欲善其事，必先利其器
- 1.1. Tauri Devtools
- 1.1.1. 启用 Tauri Devtools
- 1.1.2. Tauri Devtools 的主要功能
- 1.2. VS Code 调试
- 1.2.1. 安装 VS Code 扩展
- 1.2.2. 配置 VS Code 调试
- 1.2.3. 启动调试
- 1.3. 其他调试工具
- 二、 调试技巧：抽丝剥茧，定位问题
- 2.1. 日志输出
- 2.1.1. 前端日志输出
- 2.1.2. Rust 日志输出
- 2.2. 断点调试
- 2.2.1. 前端断点调试
- 2.2.2. Rust 断点调试
- 2.3. 条件断点
- 2.4. 单步执行
- 2.5. 调用栈
- 2.6. 监视表达式
- 2.7. 网络请求调试
- 2.8. 性能分析
- 三、 调试场景：实战演练，融会贯通
- 3.1. 场景一：JavaScript 错误
- 3.2. 场景二：Rust 代码 panic
- 3.3. 场景三：网络请求失败
- 3.4. 场景四：Tauri API 调用失败
- 3.5 场景五：应用性能问题
- 四、 高级调试技巧：更上一层楼
- 4.1. 远程调试
- 4.1.1. 前端远程调试
- 1. 使用Chrome DevTools远程调试
- 2. 使用CrabNebula远程调试
- 4.1.2. Rust 远程调试
- 4.2. 自定义 Tauri API 调试
- 4.3. 使用调试器扩展
- 4.4. 利用 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的性能面板，录制一段时间内的应用性能数据，然后分析这些数据，找出性能瓶颈。
示例：
- 打开 Tauri Devtools 的性能面板。
- 点击“开始录制”按钮。
- 在你的应用中执行一些操作，模拟用户的使用场景。
- 点击“停止录制”按钮。
- 分析性能数据，找出耗时较长的函数、事件等。
四、 高级调试技巧：更上一层楼
除了基本的调试技巧外，还有一些高级的调试技巧可以帮助你更深入地理解和调试 Tauri 应用。
4.1. 远程调试
远程调试允许你调试运行在另一台设备或虚拟机上的 Tauri 应用。这对于调试跨平台问题或在特定环境下复现问题非常有用。
4.1.1. 前端远程调试
1. 使用Chrome DevTools远程调试
你可以使用 Chrome DevTools 的远程调试功能连接到 Tauri 应用。
-
在 Tauri 应用启动时，设置环境变量 TAURI_REMOTE_DEBUGGING_PORT 为一个未被占用的端口号。例如：
TAURI_REMOTE_DEBUGGING_PORT=9222 tauri dev
-
在 Chrome 浏览器中打开 chrome://inspect。
-
在“Devices”选项卡中，点击“Configure…”按钮，添加你的设备 IP 地址和端口号（例如 localhost:9222）。
-
在“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 代码的远程调试。
-
在目标设备上启动 Tauri 应用，并使用 GDB 或 LLDB 附加到应用进程。
-
在你的开发机器上，使用 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 应用！
- Tauri Dev 配置： 用于调试前端代码（JavaScript、HTML、CSS）。
