Debugging with svelte

Thank you for all your good hints

The problem was: When compiling for production, every debugger statement would be stripped from the resulting bundle.js

Solution: npm run dev instead and then immediately stop the live reload server in order to avoid weird URL compositions regarding socket.io

EDIT: Another solution:

Change rollup.config.js before running npm run build:

    plugins: [
        svelte({
            // Always enable run-time checks
            dev: true,
            ...
        }),
        ...
        // NOT use terser, otherwise debugger will be stripped!
        //production && terser()

The {@debug} is a template syntax that can be used as an alternative to console.log.

You can place it in your html code, and then open the devtools of your browser.

If your component goes through the @debug statement while the devtools are open, it will automatically pause the execution.

edit

if you have this svelte code

<script>
    let name = 'world';
</script>

{@debug name}

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

it will compile to

// more code
c: function create() {
    {
        const {  } = ctx;
        console.log({ name }); // <-- Note those 2 lines
        debugger; // <-- corresponding to the @debug statement
    }

    t0 = space();
    h1 = element("h1");
    t1 = text("Hello ");
    t2 = text(name);
    t3 = text("!");
    add_location(h1, file, 6, 0, 56);
}
// more code

It will run every time the component is rendered. Including the first time. It isn't bound to the value change if said value change doesn't trigger a new render.

If you want to bind a console log to a value change you need to use a reactive statement in your script

$: console.log(name);

or

$: value, console.log('value has been updated');

the debugger statement stop the script execution in both Chrome 76 and Firefox Quantum 68