{@debug foo}

[Rich-Harris]

Whenever @arackaf wants to talk about the perceived superiority of the React programming model, he asks if your template language can use debugger statements to pause rendering:

And the answer in Svelte's case is 'well, no... because you're not writing code that executes top-to-bottom — it's a different mental model'. The absence of a render() function is a feature, and one of the reasons Svelte is so much faster and more memory-efficient.

Of course, you can trigger the debugger when particular values change easily enough. Here's one approach:

<label>
  enter your name
  <input bind:value=name>
</label>

{debug(name)}

<h1>Hello {name}!</h1>

<script>
  export default {
    helpers: {
      debug(value) {
        debugger;
        return '';
      }
    }
  };
</script>

Using this approach you can also see that Svelte efficiently avoids updating parts of a component that are unchanged.

Including the helper is a slight nuisance though, if you want to just quickly track something down. What if we introduced a {@debug ...} tag? The above example would become this:

<label>
  enter your name
  <input bind:value=name>
</label>

{@debug name}

<h1>Hello {name}!</h1>

It could take multiple arguments ({@debug foo, bar, baz}), and it would probably only get emitted when dev: true. The compiler could turn it into this:

if (changed.foo || changed.bar || changed.baz) {
  const { foo, bar, baz } = ctx;
  debugger;
}

Thoughts?

[GarrettGeorge]

What if it was also a directive where you can do :

<label>
  enter your name
  <input bind:value=name>
</label>

<h1 debug:name>Hello {name}!</h1>

This would allow you to specify the debug in reference to a particular element. This would allow for someone to do <h1 debug:this>Hello {name}!</h1> or debug: something else in order to debug on every update of that specific h1 element. Maybe you're trying to debug by simply seeing when the particular h1 is updated.

[GarrettGeorge]

Discussion from discord found that the directive approach wasn't necessary. Compiled code would go in the same place either way.

[GarrettGeorge]

I'd like a way to do "debug all changes" which would mean the debugger is triggered on block creation and on every update.

This is very doable via block.builders.create.addLine and block.builders.update.addLine.

In order to prevent a large number of unnecessary debugger triggers on the main_fragment I would like to believe it would be appropriate to throw an error when parser.current().start is null.

It would be used like this:

{#each cats as cat}
  {@debug}
  <li><a target="_blank" href={cat.video}>{cat.name}</a></li>
{/each}

Benefits would be like the example in react where you want to call debugger "every rerender" which in the case of Svelte is much different but could be replicated in the form of "update me everytime I create or update".

First problem, doing a readExpression on {@debug} fails because it's expecting something that isn't }.

One solution is to have the "debug all" be something like {@debug _ } where a special character or string is a special case in which we know "this person wants to debug all".

The other solution is to have a regex check /\s*}/.test(parser.template[parser.index]) which when Truthy a _ or other special character/string is injected into parser.template.

I prefer solution 2 because it means we can use {@debug} but I'm unsure how proper injecting text into parser.template is.

[Rich-Harris]

This was released in 2.10 so can be closed now — thanks @GarrettGeorge!

[netaisllc]

FWIW in regard to enabling the behavior of @debug...

• when using Rollup to bundle ,dev: true is a property of the plugin rollup-plugin-svelte.
• When using Webpack to bundle, dev:true is a property of of the asset loader svelte-loader.