⚡

TauriWebView调试器 debug-tauri

Tauri WebView调试器是一款专门用于自动化调试Tauri桌面应用程序WebView组件的工具集。它通过集成官方插件实现进程监控、自动截图、控制台日志收集和运行时状态分析，帮助开发者快速定位UI问题、运行时错误和WebView相关故障。主要功能包括：自动化调试工作流、跨平台截图捕获、前后端日志集成、WebView状态快照和结构化调试报告生成。适用于Tauri应用开发、桌面应用调试、WebView问题排查和跨平台应用测试场景。 关键词：Tauri调试，WebView调试，桌面应用调试，自动化测试，日志收集，截图工具，跨平台开发，Rust前端，Tauri插件，故障排查

前端开发 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/{包标识符}/debug.log
  • Linux: ~/.local/share/{包标识符}/logs/debug.log
  • Windows: {LOCALAPPDATA}\{包标识符}\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 包含合并的文档（将被弃用）