Svelte 5: [svelte-code] hover and watch not working with runes

[ff-ils]

Description

When debugging with VSCode, the internal structure of runes is shown on variable hover and in watch panel.

Proposed solution

Hover and watch should show the actual value inside the rune

Alternatives

This is a quick and dirty workaround for watch

/**
 * Svelte 5 Rune Debugger
 *
 * - import this file in base layout
 * - use _(myRune) in VSCode watch to extract the current value from rune objects
 */
export function setupRuneDebugger() {
	if (typeof window === "undefined") {
		return;
	}

	window._ = (obj) => {
		if (obj === null || obj === undefined || typeof obj !== "object") {
			return obj;
		}

		try {
			// Create a safe JSON representation with circular reference detection
			const seen = new WeakSet();
			const jsonStr = JSON.stringify(obj, (key, value) => {
				// Handle circular references
				if (value !== null && typeof value === "object") {
					if (seen.has(value)) {
						return "[Circular Reference]";
					}
					seen.add(value);
				}
				return value;
			});

			// Parse and check for common rune patterns
			const parsed = JSON.parse(jsonStr);

			// Try to extract value from parsed representation
			if (parsed?.v !== undefined) {
				return parsed.v;
			}

			// Return original object if no value property found
			return obj;
		} catch (error) {
			console.warn("Rune debug extraction error:", error);
			return obj;
		}
	};
}

// Auto-initialize in browser environment
if (typeof window !== "undefined") {
	setupRuneDebugger();
}

Additional Information, eg. Screenshots

No response

[dummdidumm]

Could you provide more info on how to reproduce the original issue? The linked issue in the Svelte repo is pretty vague, too

[kerem-coemert]

As the one that has opened the issue, I can try to clarify.

• I first set a breakpoint at some line in a .svelte file.
• Once the breakpoint is hit, I navigate to the Debug Console
• In the expression input field below, I write foo and press Enter, where foo is a rune (for example a $bindable prop)
• Then rather than seeing the value of foo, (which I could in Svelte 4 before the migration), I get:

ƒ (value, mutation) {
      if (arguments.length > 0) {
        if (!runes || !mutation || legacy_parent || is_store_sub) {
          setter(mutation ? getter() : value);
        }
        return value;
      } else {
        return getter();
      }
    }

[jasonlyu123]

I am not sure anything can be done in the extension. One problem is that the extension does not provide the debugger. It's by a built-in vscode-js-debug extension. I can't find any documentation suggesting another extension can "adjust" its behaviour. Another is that the variable in the generated code is too different from the source code. It'll be pretty hard to map it back, at least in the extension.