開発者ツールをプログラムから開く

WebView の開発者ツール（Web Inspector / DevTools）を Rust のコードから開閉する方法を紹介します。「起動と同時に DevTools を開いておきたい」「サポート用の隠しコマンドで出したい」「本番ビルドでも使いたい」といった場面で必要になります。JavaScript 側に DevTools を開く API はなく、Rust の WebviewWindow にある open_devtools() / close_devtools() / is_devtools_open() を invoke 経由で呼ぶ構成になります。

前提条件

これらのメソッドは #[cfg(any(debug_assertions, feature = "devtools"))] で囲まれており、デバッグビルドでは設定なしで使えます。リリースビルドでも使うには src-tauri/Cargo.toml で Tauri の devtools feature を有効にします。

[dependencies]
tauri = { version = "2", features = ["devtools"] }

必要なときだけ有効にしたい場合は、自分のクレートに feature を定義して Tauri 側へ転送します。npm run tauri build -- --features devtools で「DevTools 入りリリースビルド」を作れ、コードも #[cfg(feature = "devtools")] で分岐できます。

[features]
devtools = ["tauri/devtools"]

ショートカットキー（後述）は core:webview:allow-internal-toggle-devtools 権限で動いており、core:default に含まれるため追加設定は不要です。

1. フロントエンドから実装する (TypeScript)

後述の Rust コマンドを invoke で呼びます。ここでは「Ctrl+Shift+D を 1.5 秒以内に 3 回押したらトグル」という隠しコマンドにしています。

// src/devtools.ts
import { invoke } from '@tauri-apps/api/core';

let presses: number[] = [];

document.addEventListener('keydown', async (e) => {
  if (!(e.ctrlKey || e.metaKey) || !e.shiftKey || e.key.toLowerCase() !== 'd') return;
  e.preventDefault();
  const now = Date.now();
  presses = [...presses.filter((t) => now - t < 1500), now];
  if (presses.length < 3) return;
  presses = [];
  const open = await invoke<boolean>('toggle_devtools');
  console.log('devtools open:', open);
});

何も実装しなくても、Tauri は既定で Windows / Linux: Ctrl+Shift+I、macOS: Cmd+Option+I で DevTools を開閉でき、右クリックメニューの「検証」（Inspect Element）からも開けます。この既定動作は Tauri が注入する内部スクリプトが internal_toggle_devtools コマンドを呼ぶ形で実現されています。

2. バックエンドから実装する (Rust)

// src-tauri/src/lib.rs
use tauri::Manager;

/// DevTools を開閉し、開閉後の状態を返す
#[tauri::command]
fn toggle_devtools(window: tauri::WebviewWindow) -> bool {
    #[cfg(any(debug_assertions, feature = "devtools"))]
    {
        if window.is_devtools_open() {
            window.close_devtools();
            false
        } else {
            window.open_devtools();
            true
        }
    }
    #[cfg(not(any(debug_assertions, feature = "devtools")))]
    {
        let _ = window;
        false
    }
}

#[cfg_attr(mobile, tauri::mobile_entry_point)]
pub fn run() {
    tauri::Builder::default()
        .invoke_handler(tauri::generate_handler![toggle_devtools])
        .setup(|app| {
            #[cfg(debug_assertions)] // 開発中は起動と同時に開く
            if let Some(window) = app.get_webview_window("main") {
                window.open_devtools();
            }
            Ok(())
        })
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

#[cfg(...)] の条件を Tauri 側と同じ any(debug_assertions, feature = "devtools") にそろえるのがポイントです。debug_assertions だけにすると、devtools feature 付きのリリースビルドでコマンドが空振りします。

DevTools を開けなくする設定

逆にデバッグビルドでもユーザーに触らせたくない場合は、ウィンドウ設定の devtools を false にします（既定は true。Rust なら WebviewWindowBuilder の .devtools(false)）。ショートカットと右クリックの「検証」が無効になるので、open_devtools() と組み合わせて「隠しコマンドからだけ開ける」構成にできます。

{ "app": { "windows": [ { "label": "main", "devtools": false } ] } }

動作確認

1. npm run tauri dev で起動すると、setup の処理で DevTools が開いた状態になります。
2. アプリにフォーカスを当てて Ctrl+Shift+D（macOS は Cmd+Shift+D）を 3 回押すと DevTools が閉じ、繰り返すと開きます。コンソールには devtools open: true / false が交互に出ます。
3. 通常の npm run tauri build では Ctrl+Shift+I も「検証」も反応しません。devtools feature を付けてビルドし直すと、リリースビルドでも開けるようになります。

よくあるエラーと対処法

no method named open_devtools found という趣旨のコンパイルエラー

リリースビルドで devtools feature を有効にしないまま、#[cfg] で囲わずに呼んでいます。本レシピのように囲うか、Cargo.toml の features に "devtools" を追加してください。

--features devtools を付けたのに効かない

tauri build --features devtools は自分のクレートの feature を指定するものです。[features] devtools = ["tauri/devtools"] の転送定義がないと Tauri 側の feature は有効になりません。

toggle_devtools を呼んでも何も起きない

#[cfg] の条件が満たされず空の分岐が実行されています。--release なしのビルドか、feature が有効かを確認してください。invoke_handler への登録漏れなら Command toggle_devtools not found という趣旨のエラーが出ます。

Windows で is_devtools_open() が常に false

docs.rs に「Windows: Unsupported」と明記されています。close_devtools() も同様なので、Windows では「開く」専用として使い、閉じる操作はユーザーに任せる設計にしてください。

OS ごとの違いと注意点

• Windows (WebView2): Microsoft Edge DevTools が開きます。open_devtools() は動作しますが、close_devtools() と is_devtools_open() は未対応です。
• macOS (WKWebView): Safari の Web Inspector が開きます。macOS 10.15 以降で動作し、非公開 API を使うため App Store 配布のアプリでは使えません。App Store 版のデバッグは、Mac の Safari で「開発」メニュー → Mac 名 → アプリ名 を選ぶ Safari Web Inspector 方式を使います（「開発」メニューは Safari の設定 → 詳細 で有効化）。
• Linux (webkit2gtk): WebKit の Web Inspector が開き、初期状態ではウィンドウ内にドッキング表示されることがあります。
• リリースビルドに devtools feature を付けると、ユーザーが Ctrl+Shift+I で DOM や invoke 呼び出しを自由に覗けます。配布版では devtools: false と隠しコマンドの併用など、開ける経路を意識的に絞ってください。

関連レシピ

• 開発サーバーの起動とデバッグ
• 右クリック・テキスト選択・ドラッグを無効化して Web っぽさを消す
• Log プラグインでログファイルを出力する
• 本番用にアプリをビルドする