Debugging with svelte

Question

I'm trying to dig into Svelte 3 (v3.7.1) and it works quite well ... with a few stumbling blocks when it comes to including external CSS (bootstrap).

But nevertheless, one thing I cannot seem to wrap my head around is debugging the svelte app in my browser

I found a post on svelte github issues that stated that I just need to include {@debug} somewhere in my code in order to make the browser break at "that point" so I can debug and inspect current state.

But: This does not work at all. Even though the {@debug} is present, there is no breaking even though I have the developer tools open.

What do I have to do in order to debug my code?

EDIT: I figured you needed to know about my setup

I use a node/express web server that serves the compiled svelte client as app.use(express.static('svelteclient/public')) from the svelte project's subfolder.

Code excerpt:

<script>

   import { onMount } from 'svelte';

   let searches = ["angular", "deno", "svelte", "stencil"];
   let tweets = {};

   let currentImage = null;
   let currentYTUrl = "";

   for(let search of searches) {
      tweets[search] = [];
   }

   let socket = io();

   let modal = null;
   let ytmodal = null;

   onMount(() => {
      modal = UIkit.modal('#mymodal');
      ytmodal = UIkit.modal('#myytmodal');
   });

...
</script>

<style>
   .uk-panel-badge .uk-badge {
      cursor: pointer;
   }
</style>

{@debug}


<div class="uk-grid" data-uk-grid-margin>
   {#each searches as search}
   <div class={'uk-width-medium-1-' + searches.length}>
      ...
   </div>
   {/each}
</div>

Chrome version is 75.0.3770.142

Answer 1

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