⚡

TauriWebView调试器Skill debug-tauri

Tauri WebView 调试器是一个自动化调试工具，专为 Tauri 桌面应用开发设计。它集成了官方插件，提供进程监控、自动截图、控制台日志收集和 WebView 状态分析功能。适用于开发者快速定位 WebView 渲染问题、UI 错误、运行时异常和性能瓶颈。关键词：Tauri 调试、WebView 问题排查、桌面应用开发、自动化测试、日志收集、截图工具、前端调试、Rust 桌面应用。

前端开发 0 次安装 0 次浏览 更新于 2/28/2026

名称: debug-tauri 描述: 使用官方插件（tauri-plugin-log + screenshots）自动化Tauri WebView调试，包含进程验证、自动截图、控制台日志收集和状态分析。适用于调试Tauri应用、调查WebView问题、分析运行时错误或排查UI问题。

Tauri WebView 调试器

使用 tauri-plugin-debug-tools 并集成官方插件的Tauri应用程序自动化调试工作流。

前提条件

  • tauri-plugin-debug-tools 已安装并注册
  • tauri-plugin-log (v2.0+): 用于自动收集控制台日志的官方日志插件
  • tauri-plugin-screenshots (v2.0+): 跨平台截图捕获插件
  • 已启用调试权限: debug-tools:default, log:default, screenshots:default
  • 前端日志器已通过 attachConsole() 初始化（推荐用于自动日志转发）

快速开始

运行 TAURI_APP_NAME=<应用二进制名称> scripts/capture.sh 以验证进程并捕获截图。

如果未找到进程，请启动您的开发服务器（例如 tauri dev）并重试。

调试工作流

复制此清单以跟踪进度：

调试进度:
- [ ] 步骤 1: 验证进程状态
- [ ] 步骤 2: 捕获截图
- [ ] 步骤 3: 收集控制台日志
- [ ] 步骤 4: 捕获 WebView 状态
- [ ] 步骤 5: 分析发现
- [ ] 步骤 6: 生成调试报告
- [ ] 步骤 7: 提出修复方案

步骤 1: 验证进程状态

运行: TAURI_APP_NAME=<您的应用> scripts/capture.sh

此命令检查应用是否正在运行并捕获初始截图。

步骤 2: 捕获截图

通过插件 API（推荐）:

import { captureMainWindow } from "tauri-plugin-debug-tools/screenshotHelper";
const imagePath = await captureMainWindow();

传统方法: capture.sh 脚本（macOS screencapture）。详情请见 SCREENSHOTS.md。

步骤 3: 收集控制台日志

控制台日志器（前端 - 推荐）:

consoleLogger 自动收集前端日志和错误到环形缓冲区，并将其刷新到临时文件。

// 在应用入口点导入以初始化自动收集
import "tauri-plugin-debug-tools/consoleLogger";

// 使用 debugTools 进行显式日志记录
import { debugTools } from "tauri-plugin-debug-tools/consoleLogger";
debugTools.log("应用已启动");
debugTools.error("出现错误");

查找 consoleLogger 日志文件:

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

// 获取实际的日志文件路径
const logPath = await invoke('plugin:debug-tools|reset_debug_logs');
console.log('控制台日志存储在:', logPath);

平台特定的 consoleLogger 位置:

  • macOS: /tmp/tauri_console_logs_[应用名称]_[进程ID].jsonl
  • Linux: /tmp/tauri_console_logs_[应用名称]_[进程ID].jsonl
  • Windows: %TEMP%\tauri_console_logs_[应用名称]_[进程ID].jsonl

其中 [应用名称] 是应用程序名称，[进程ID] 是进程ID。

后端日志（tauri-plugin-log）:

import { logger } from "tauri-plugin-debug-tools/logAdapter";

// 在应用启动时初始化一次
const detach = await logger.initialize();

// 日志自动转发到平台特定位置
logger.info("应用已启动");
logger.error("出现错误");

后端日志位置:

  • macOS: ~/Library/Logs/{bundle_id}/debug.log
  • Linux: ~/.local/share/{bundle_id}/logs/debug.log
  • Windows: {LOCALAPPDATA}\{bundle_id}\logs\debug.log

替代方案: 使用 debugBridge API。所有方法请见 IPC_COMMANDS.md。

步骤 4: 捕获 WebView 状态

import { captureWebViewState } from "tauri-plugin-debug-tools/debugBridge";
const state = await captureWebViewState();

返回: { url, title, user_agent, viewport }

步骤 5: 分析发现

  • 视觉: 检查截图中的UI问题、错误、布局问题
  • 日志: 审查错误、警告、模式
  • 状态: 验证 URL、视口、用户代理
  • 性能: 检查内存泄漏、高CPU使用率

步骤 6: 生成调试报告

使用 REPORT_TEMPLATE.md 中的模板。

步骤 7: 提出修复方案

基于收集到的证据：

  • 确定根本原因
  • 建议具体的代码更改
  • 提供实施步骤

参考资料

IPC 命令: IPC_COMMANDS.md - 控制台日志、WebView 状态、调试命令 截图: SCREENSHOTS.md - 捕获方法及故障排除 故障排除: TROUBLESHOOTING.md - 常见错误及解决方案 报告模板: REPORT_TEMPLATE.md - 结构化调试报告格式

传统参考: REFERENCE.md 包含合并的文档（将被弃用）