CODEWITHSUNDEEP
svelte
devnull69
devnull69

Reputation: 16544

Debugging with svelte

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

Upvotes: 15

Views: 18891

Answers (4)

KyleMit
KyleMit

Reputation: 29977

I'll also recommend the official dev tools browser extension from SvelteJS that allows you to:

  • browse components & templating logic
  • inspect props, state, and stores
  • modify state directly

Available for both

Upvotes: 1

Morphyish
Morphyish

Reputation: 4062

The {@debug} template syntax 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

Upvotes: 19

devnull69
devnull69

Reputation: 16544

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()

Upvotes: 6

Mike
Mike

Reputation: 1530

The {@debug} statement only triggers a breakpoint when the variable you debug changes. The documentation hints at that with the last paragraph, "The {@debug} tag without any arguments will insert a debugger statement that gets triggered when any state changes, as opposed to the specified variables." (see https://svelte.dev/docs#debug)

The following code stops at the breakpoint after 3 seconds.

<script>
  let name = 'world';

  setTimeout(() => {
    name = 'moon';
  }, 3000)
</script>

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

A working example can be seen at https://svelte.dev/repl/761771bd8eb9462796bba3373dfa46c7?version=3.7.1

Upvotes: 2

Related Questions