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)