開発サーバーの起動とデバッグ

Recipe ID: env-010

Tauri アプリの開発サイクルにおける、アプリの起動、ホットリロード、デバッグ方法について解説します。

開発サーバーの起動

以下のコマンドを実行すると、開発モードでアプリが起動します。

npm run tauri dev

このコマンドは以下の手順を自動的に行います。

1. tauri.conf.jsonbeforeDevCommand を実行(フロントエンドの開発サーバー起動)。
2. Rust バックエンドのコンパイル。
3. アプリウィンドウの立ち上げ。

フロントエンドのコードを変更すると、Web ビューが自動的にリロードされます(HMR)。
Rust コードを変更すると、自動的に再コンパイルされてアプリが再起動します。

フロントエンドのデバッグ

Tauri アプリのウィンドウ内で、Web ブラウザと同様の開発者ツール(DevTools)を使用できます。

  • Windows / Linux: Ctrl + Shift + I または F12
  • macOS: Cmd + Option + I

または、右クリックメニューから「Inspect(検証)」を選択して開くことができます(プロダクションビルドではデフォルトで無効化されます)。
ここで console.log の出力確認や、DOM の検査、ネットワークリクエストの監視が可能です。

バックエンド (Rust) のデバッグ

Rust 側のログ出力には、println! マクロや log クレートを使用します。
出力内容は、npm run tauri dev を実行しているターミナルに表示されます。

// src-tauri/src/main.rs
#[tauri::command]
fn greet(name: &str) -> String {
    println!("Greeting requested for: {}", name); // ターミナルに表示される
    format!("Hello, {}!", name)
}

VS Code を使用している場合、CodeLLDB 拡張機能を使用することで、Rust コードにブレークポイントを貼ってステップ実行することも可能です。