First class support for Svelte 5's $inspect() method

[kaleabmelkie]

In Svelte 5, we can't do $: console.log(...) anymore (invalid syntax). This used to work with Console Ninja before Svelte 5. It has changed to the $inspect rune now.

This means that console.log now needs to be chained with $inspect(...).with. For example:

<script>
  let count = $state(0)

  $inspect(count).with((_type, count) => {
    console.log(count);
  });
</script>

<button type="button" onclick={() => count++}>
  {count}
</button>

Ideally, would like to be able to use $inspect(...) without having to nest console.log inside the with function.

Docs: https://svelte.dev/docs/svelte/$inspect

[smcenlly]

You mentioned that you can't use console.log anymore. Can you please provide us with an example of where it's not working for you anymore? I guess we're missing something?

We created a sample repo and used console.log and it's working for us:

1. npx sv create my-svelte-app
2. Open my-svelte-app in VS Code
3. Start with npm run dev
4. Add console.log to the Counter.svelte modulo function

Our svelte depdendencies are:

{
  "devDependencies": {
    "@sveltejs/adapter-auto": "^3.0.0",
    "@sveltejs/kit": "^2.9.0",
    "@sveltejs/vite-plugin-svelte": "^5.0.0",
    "svelte": "^5.0.0",
    "svelte-check": "^4.0.0"
  }
}

[kaleabmelkie]

I meant for the logs that update when a state changes (not inside functions).

Example (Counter.svelte):

<script>
  let count = $state(0)

  // this gets logged on terminal initially and when `count` changes
  $inspect(count) // [want CN log here]

  // this was possible in svelte 4 & below (not anymore)
  $: console.log(count) // [CN output was here, but this errors in svelte 5]
</script>

<button type="button" onclick={() => count++}>
  {count}
</button>

In Svelte 5, the $inspect "rune" is the preferred way to log values.

This function is defined here in Svelte source code: https://github.com/sveltejs/svelte/blob/main/packages/svelte/src/internal/client/dev/inspect.js

[smcenlly]

Thanks for the sample.

For now, you may work around the limitation by using the .with function on $inspect. This will work for you:

<script>
  let count = $state(0)

  $inspect(count).with((_type, count) => {
    console.log(count);
  });
</script>

<button type="button" onclick={() => count++}>
  {count}
</button>

---

We’ll keep this issue open as a feature request. To help us prioritize it, please like the original issue comment. This helps us gauge interest and understand demand for the feature.

[kaleabmelkie]

We’ll keep this issue open as a feature request. To help us prioritize it, please like the original issue comment. This helps us gauge interest and understand demand for the feature.

Seems like about a few more people want this too 😄