Debugging and Developer Tools

Debugging and Developer Tools

Building an application is often 20% writing code and 80% figuring out why it doesn’t work. In the unique “sandwich” architecture of Tauri, debugging requires a dual approach: one set of tools for the web frontend and another for the Rust backend. This chapter equips you with the detective kit needed to solve mysteries in your code.

Frontend Troubleshooting: The Web Inspector

Since the visual layer of your Tauri app is essentially a web page running inside a system WebView, you can use the tools you already know and love from web development.

When running your application in development mode (tauri dev), the Web Inspector is enabled by default. You can open it just like you would in a browser:

• Windows/Linux: Right-click anywhere in your app window and select Inspect. Alternatively, press Ctrl + Shift + I (or F12).
• macOS: Right-click and select Inspect Element. If this option isn’t visible, you may need to enable the “Develop” menu in Safari’s settings, as Tauri uses WebKit on macOS.

Inside the Inspector, you have access to the Console (for JavaScript errors), the Network tab (to see asset loading), and the Elements tab (to debug CSS layout issues).

Backend Logic: println!, Logging, and Tracing

Debugging the Rust side requires a different approach. The WebView console won’t show Rust errors automatically. The simplest way to see what’s happening in your Core Process is using standard output.

When you run tauri dev, your terminal window acts as the standard output. You can use macros like println! or eprintln! to send messages there.

#[tauri::command]
fn greet(name: &str) -> String {
    // This message appears in your terminal running 'tauri dev'
    println!("Frontend sent name: {}", name);
    format!("Hello, {}!", name)
}

For production-grade applications, simple print statements aren’t enough. We recommend using the log crate or the tracing crate combined with the Tauri Log Plugin. This allows you to configure log levels (Info, Debug, Error) and even forward Rust logs to the frontend console or a file.

Debugging Rust with a Native Debugger

Sometimes you need to pause execution and inspect memory variables. You can attach standard Rust debuggers to the Tauri process.

• VS Code: Use the ‘CodeLLDB’ extension. You can configure a .vscode/launch.json to attach to the application binary generated in target/debug/.
• JetBrains / RustRover: Excellent built-in support for attaching debuggers to Cargo run configurations.

Mobile Debugging Techniques

Debugging on mobile devices adds a layer of complexity, but modern tooling bridges the gap effectively.

Android Debugging:

• Enable USB Debugging on your Android device settings.
• Connect the device to your computer via USB.
• Open the Google Chrome browser on your computer and navigate to chrome://inspect.
• Check the “Discover USB devices” box. You will see your Tauri application listed under Remote Targets. Click Inspect to open a full DevTools window connected to your phone.

iOS Debugging:

• Connect your iOS device to your Mac.
• Open Safari on your Mac.
• In the menu bar, go to Develop > [Your Device Name] > [Your App]. This opens the WebKit Web Inspector for the running app.

Note: Ensure your application is built with the debug flag (default in tauri android dev / tauri ios dev) so the WebView is inspectable.