DOCSEARCHbyAlgolia
Submit Docs

Devtools for Tauri

repository·main·Indexed 19 days ago

https://github.com/crabnebula-dev/devtools

An instrumentation suite for inspecting, monitoring, and debugging Tauri applications. It provides a web-based UI to view logs, Tauri command performance, and configuration details. The suite includes the `devtools` crate for Tauri v1 and the `tauri-plugin-devtools` crate for Tauri v2, integrating with the `tracing` ecosystem to capture telemetry data via a WebSocket server.

Tokens
11.4K
Snippets
33
Records
48
Agent score
65%

What's inside devtools

  1. Understand the Devtools component architecture

    main

    Devtools is composed of several key components that work together to provide real-time debugging for Tauri apps:

    • crates/devtools-core: The core instrumentation library that captures and processes tracing data from your application.
    • crates/devtools: The user-facing Tauri plugin that integrates devtools-core into a Tauri application.
    • crates/devtools-v1: A specific Tauri plugin designed for legacy Tauri v1.x versions.
    • crates/wire: Contains the protobuf definitions that establish the message protocol between the app instrumentation and the GUI.
    • clients/web: The web-based GUI hosted at devtools.crabnebula.dev used to visualize the captured data.

  2. Devtools Features: Console, Calls, and Config Viewer

    main

    The Devtools UI provides three primary inspection capabilities:

    • Console: Displays errors, warnings, and messages produced by your application code, Tauri, or your dependencies.
    • Calls: Debugs Tauri commands by displaying arguments, return values, and a detailed performance breakdown of processing time per command.
    • Config Viewer: Provides a detailed breakdown of your Tauri configuration, including future support for warnings and tips.

  3. Understand the role of Devtools Core

    main

    Devtools Core provides the low-level interface for the Devtools for Tauri application. It is not the primary entry point for connecting a Tauri application to the Devtools UI. Instead, it serves as the underlying foundation for higher-level crates.

    To actually connect your Tauri application with the Devtools application, use one of the following crates depending on your Tauri version:

  4. How App Instrumentation works

    main

    App Instrumentation is a Rust crate that must be included in a Tauri app. It works by collecting data from the tracing ecosystem via a tracing_subscriber Layer and forwarding events to an Aggregator task.

    Key Design Principles:

    • Isolation: The Aggregator and Server run in their own OS threads using their own tokio runtime. This ensures that the instrumentation is lightweight and that a crash in the instrumentation does not crash the main application.
    • Real-time Data: The Aggregator ingests events, updates internal state, and periodically sends batches of events to connected clients via a gRPC Server.
    • Client-Initiated Streams: All data transfers are initiated by the Client. Clients can specify filters to reduce network traffic, ensuring they only receive the information they need.

  5. Understand the Web-Client data streams

    main

    The Web-Client consumes instrumentation data through five distinct stream clients:

    1. Instrumentation: Core telemetry and event data.
    2. Tauri: Data specific to the Tauri runtime.
    3. Health: Application health and status metrics.
    4. Sources: Information regarding the origin of logs/events.
    5. Meta: Metadata related to the application context.

  6. Setup Devtools for Tauri v1

    main

    To use Devtools with Tauri v1, you must use Tauri 1.5.4 or later. Install the devtools crate and register the plugin in your main.rs as early as possible in the application lifecycle.

    Warning: Disable devtools in production builds to avoid unnecessary bloat and potential security risks.

    [dependencies]
tauri = "1.5.4"
devtools = "0.3.0"
[build-dependencies]
tauri-build = "1.5.0"
    fn run() {
    let devtools = devtools::init(); // initialize the plugin as early as possible

    tauri::Builder::default()
        .plugin(devtools) // then register it with Tauri
        .run(tauri::generate_context!("./tauri.conf.json"))
        .expect("error while running tauri application");
}

  8. Setup the devtools plugin in your Tauri app

    main

    To send instrumentation data to the Web-Client, you must initialize and register the devtools plugin in your Tauri application's main function. The plugin is compatible with the tracing ecosystem, meaning standard tracing macros (like info!, warn!, etc.) will automatically send data to the devtools server.

    By default, the instrumentation server is exposed at 127.0.0.1:3033.

    fn main() {
    let devtools_plugin = devtools::init();

    tauri::Builder::default()
        .plugin(devtools_plugin)
        .setup(|_| {
            // It is compatible with the `tracing` ecosystem!
            tracing::info!("Hello World!");

            Ok(())
        })
         // ... the rest of the tauri setup code
}

  9. Run the DevTools Web-Client locally

    main

    The Web-Client is a Single-Page Application (SPA) that visualizes instrumentation data. To run it locally, install dependencies using pnpm and start the development server.

    Note: The client requires a running Tauri app with the devtools plugin enabled to display any data.

    # Install dependencies
cd web-client && pnpm install

# Start the development server
pnpm dev

  10. Access Devtools on Android Emulators

    main

    Because the Android emulator runs behind a virtual router, you must redirect host connections to the emulator's port to access the Devtools WebSocket server (default port 3033).

    Option 1: Using ADB

    abd forward tcp:3033 tcp:3033

    Option 2: Using Emulator Console

    1. Find your emulator port (usually 5554) via adb devices.
    2. Connect via telnet:
      telnet localhost 5554
auth <insert-auth-token-here> # token from $HOME/.emulator_console_auth_token
redir add tcp:3033:3033

  11. Install and set up Devtools for Tauri

    main

    To enable inspection, monitoring, and event logging for your Tauri application, follow these steps:

    1. Install the Rust crate: Add the devtools crate to your project using cargo:

      cargo add devtools

    2. Initialize in your main function: Use the devtools::init() function and register it as a Tauri plugin. It is recommended to wrap these calls in #[cfg(debug_assertions)] so that instrumentation is only active in development builds and not in production.

    3. Access the UI: Once the app runs, Devtools will print a link to the console. You can click this link, copy-paste it into your browser, or manually navigate to https://devtools.crabnebula.dev to connect to your running application.

    fn main() {
    #[cfg(debug_assertions)] // only enable instrumentation in development builds
    let devtools = devtools::init();

    let mut builder = tauri::Builder::default();

    #[cfg(debug_assertions)]
    {
        builder = builder.plugin(devtools);
    }

    builder
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}