前言
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
- Windows/Linux:
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 zeroat 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 应用!