Debugging: Decouple debug logging from breakpoints

[ghost]

Is your feature request related to a problem? Please describe.

Currently, using {@debug} statements to watch variables is an exercise in frustration when using Svelte to create apps (as opposed to developing Svelte itself) due to the debugger statements injected along with the console output unconditionally.

While it is neat that the language includes breakpoints in generated code and super useful for tracking down framework bugs, it really should be decoupled from the act of simply logging variables.

Describe the solution you'd like

Add a directive, say, {@watch}, that only logs the value of vars when they change. The {@debug} directive can stay as it is to prevent unintended consequences of changing the behavior.

Describe alternatives you've considered

An alternative would be to expose the dev flag or have entire blocks of conditionally compiled code available to users; however, these alternatives really go against the grain of less boilerplate code in applications.

How important is this feature to you?

I personally stay away from the debug directive because of the unconditional breakpoints and end up having to console.log() all the time so it would be a big help in a production environment.

Additional context

The idea was prompted by a user asking for help regarding framework supported debugging for components. Being able to get started quickly and ramp up to being productive is a real big sell for Svelte. A major aspect of being able to do that is to iterate quickly and debug your code.

[oliversturm]

Bump. I think this would be a very valuable feature that should not be hard to add, seeing how it basically exists already.

Looking at the tutorial, the current situation is almost comical. The first sentence there states:

Occasionally, it's useful to inspect a piece of data as it flows through your app.

Well, exactly! Now, when I hear "inspect a piece of data as it flows through your app", I don't envision a constant stop/start approach like @debug facilitates - and in those cases where I would mainly be interested in the feature (such as debugging event based data interaction between components) the debugger actually interrupts the flow when it hits the breakpoint, rendering the whole feature useless.

[dummdidumm]

Wondering if we really need to do anything anymore here, given that in Svelte 5 runes mode we have $inspect which serves the requested purpose. I think calling {@debug } on a variable that is only available inside the template and you want it to only log, not debug, is such an edge case that it doesn't warrant a new tag.