Back to Blog

Console Debugging in Tauri: DevTools & Terminal Logging

Sandy LaneSandy Lane

Video: Console Debugging in Tauri: DevTools & Terminal Logging by Taught by Celeste AI - AI Coding Coach

Watch full page →

Console Debugging in Tauri: DevTools & Terminal Logging

Debugging Tauri applications effectively requires using both the browser DevTools console and the Rust backend terminal logs. This guide demonstrates how to trace the full IPC flow between frontend and backend, handle errors gracefully, and leverage advanced console methods to streamline your debugging process.

Code

async function calculate(operation, a, b) {
  try {
    // Log the outgoing IPC request with an emoji for clarity
    console.log("📤 Invoking:", operation, { a, b });

    // Call the Rust backend command via Tauri's invoke API
    const result = await window.__TAURI__.invoke(operation, { a, b });

    // Log the successful response
    console.log("📥 Result:", result);

    return result;
  } catch (error) {
    // Log errors with a red X emoji
    console.error("❌ Error:", error);
    throw error;
  }
}

// Example usage:
calculate("add", 25, 17).then(console.log);
calculate("multiply", 12, 8).then(console.log);
calculate("divide", 42, 0).catch(() => {}); // Will log error for division by zero

// On the Rust backend, use println! to output logs to the terminal:
fn add(a: i32, b: i32) -> i32 {
  println!("Received add request: {} + {}", a, b);
  a + b
}

fn divide(a: i32, b: i32) -> Result {
  println!("Received divide request: {} / {}", a, b);
  if b == 0 {
    Err("cannot divide by zero".into())
  } else {
    Ok(a / b)
  }
}

Key Points

  • Open DevTools in Tauri with Option+Cmd+I (Mac) or Ctrl+Shift+I (Windows/Linux) to access frontend logs and network IPC messages.
  • Use console.log() before and after invoking backend commands to trace request and response data clearly.
  • View Rust backend output via println!() in the terminal where your Tauri app runs to monitor server-side processing.
  • Wrap invoke calls in try-catch blocks and use console.error() to handle and display errors gracefully.
  • Enhance debugging with console.table(), console.group(), and console.time() for organized and performance-aware logging.