【Svelte 5】devtoolが無いなら$inspectを使えばいいじゃない

Svelteには最新のV5に対応した開発者ツールがまだ存在せず、諦めてVueで開発を進めていたのですが、
先日某所でSvelte有識者の方に「なんか値を追跡できるいい方法ないですかね」と質問したところ、こんな返答が帰ってきました。

「$inspectを使えばstate追跡できるよ」

マジで！？と思って調べてみました。

Runesの新機能はStateとpropsぐらいしか使っていませんでしたがこれは便利、
$inspect()で渡した変数(state含む)を監視し、変更がある度にconsole.logに出力してくれるそうです。
しかも開発者モード限定で動作するので本番リリース向けに削除する必要もなし。

これは便利だと思い早速試してみました。

Tauriで試してみた。

サクッとTauriのデフォルト画面で試してみました。
文字列を入力してGreetボタンを押すと値がrustに送られる奴です。

Tauri

<script lang="ts">
  import { invoke } from "@tauri-apps/api/core";

  let name = $state("");
  let greetMsg = $state("");

  async function greet(event: Event) {
    event.preventDefault();
    // Learn more about Tauri commands at https://tauri.app/develop/calling-rust/
    greetMsg = await invoke("greet", { name });
  }
</script>
<form class="row" onsubmit={greet}>
    <input id="greet-input" placeholder="Enter a name..." bind:value={name} />
    <button type="submit">Greet</button>
</form>

ボタンを押すとnameの入力値がrust側に渡されてからgreetMsgに帰ってきます。
今回はnameを$inspectで監視してみます。

Tauri

<script lang="ts">
  let name = $state("");
  let greetMsg = $state("");

  $inspect(name);
</script>

「test」と入力してみる。

コンソールの出力はこんな感じでした。

vueのv-modelの標準の振る舞いと同じで1文字1文字入力する度にイベントが発火されているんですね。
それを全部検出してくれてます。すごい！

Svelteで大規模開発も全然いけそうな気がしてきた。

Devtool無いのがかなり抵抗感あったけどここまで簡単に値の追跡が出来るならなんとかなりそうです。