aiskillstore Tauri WebView Debugger
Automated debugging workflow for Tauri applications using tauri-plugin-debug-tools with official plugin integration.
Prerequisites
- tauri-plugin-debug-tools installed and registered
- tauri-plugin-log (v2.0+): Official logging plugin for automatic console collection
- tauri-plugin-screenshots (v2.0+): Cross-platform screenshot capture
- Debug permissions enabled:
debug-tools:default,log:default,screenshots:default - Frontend logger initialized via
attachConsole()(recommended for automatic log forwarding)
Quick Start
Run TAURI_APP_NAME=<app-binary-name> scripts/capture.sh to verify process and capture screenshot.
If process not found, start your dev server (e.g., tauri dev) and retry.
Debug Workflow
Copy this checklist to track progress:
Debug Progress:
- [ ] Step 1: Verify process status
- [ ] Step 2: Capture screenshot
- [ ] Step 3: Collect console logs
- [ ] Step 4: Capture WebView state
- [ ] Step 5: Analyze findings
- [ ] Step 6: Generate debug report
- [ ] Step 7: Propose fixes
Step 1: Verify Process Status
Run: TAURI_APP_NAME=<your-app> scripts/capture.sh
This checks if the app is running and captures an initial screenshot.
Step 2: Capture Screenshot
Via Plugin API (Recommended):
import { captureMainWindow } from "tauri-plugin-debug-tools/screenshotHelper";
const imagePath = await captureMainWindow();
Legacy: capture.sh script (macOS screencapture). See SCREENSHOTS.md for details.
Step 3: Collect Console Logs
Console Logger (Frontend - Recommended):
The consoleLogger automatically collects frontend logs and errors in a ring buffer and flushes them to a temp file.
// Import at app entry point to initialize automatic collection
import "tauri-plugin-debug-tools/consoleLogger";
// Use debugTools for explicit logging
import { debugTools } from "tauri-plugin-debug-tools/consoleLogger";
debugTools.log("App started");
debugTools.error("Something went wrong");
Finding consoleLogger Log Files:
import { invoke } from '@tauri-apps/api/core';
// Get actual log file path
const logPath = await invoke('plugin:debug-tools|reset_debug_logs');
console.log('Console logs stored at:', logPath);
Platform-specific consoleLogger locations:
- macOS:
/tmp/tauri_console_logs_[app_name]_[pid].jsonl - Linux:
/tmp/tauri_console_logs_[app_name]_[pid].jsonl - Windows:
%TEMP%\tauri_console_logs_[app_name]_[pid].jsonl
Where [app_name] is the application name and [pid] is the process ID.
Backend Logs (tauri-plugin-log):
import { logger } from "tauri-plugin-debug-tools/logAdapter";
// Initialize once at app startup
const detach = await logger.initialize();
// Logs auto-forwarded to platform-specific location
logger.info("App started");
logger.error("Something went wrong");
Backend log locations:
- macOS:
~/Library/Logs/{bundle_id}/debug.log - Linux:
~/.local/share/{bundle_id}/logs/debug.log - Windows:
{LOCALAPPDATA}\{bundle_id}\logs\debug.log
Alternative: Use debugBridge API. See IPC_COMMANDS.md for all methods.
Step 4: Capture WebView State
import { captureWebViewState } from "tauri-plugin-debug-tools/debugBridge";
const state = await captureWebViewState();
Returns: { url, title, user_agent, viewport }
Step 5: Analyze Findings
- Visual: Check screenshot for UI issues, errors, layout problems
- Logs: Review errors, warnings, patterns
- State: Verify URL, viewport, user agent
- Performance: Check for memory leaks, high CPU usage
Step 6: Generate Debug Report
Use template in REPORT_TEMPLATE.md.
Step 7: Propose Fixes
Based on collected evidence:
- Identify root cause
- Suggest specific code changes
- Provide implementation steps
References
IPC Commands: IPC_COMMANDS.md - Console logs, WebView state, debug commands Screenshots: SCREENSHOTS.md - Capture methods and troubleshooting Troubleshooting: TROUBLESHOOTING.md - Common errors and solutions Report Template: REPORT_TEMPLATE.md - Structured debug report format
Legacy reference: REFERENCE.md contains combined documentation (will be deprecated)