11 Debugging

 

This chapter covers

  • Using the @debug tag
  • Using reactive statements for debugging
  • Using Svelte Devtools

There are three popular ways to debug issues in Svelte applications. The most basic approach to debugging is to add @debug tags that pause execution and output variable values.

Another approach is to use reactive statements to output the values of JavaScript expressions any time variables they use change. Both of these use features built into Svelte.

A final approach covered here is to use a browser extension called Svelte Devtools to view the component hierarchy. After selecting a component, its props and state can be viewed and modified.

Note

Like in all web applications, the debugger statement can be added in JavaScript code to pause execution when the statement is reached if DevTools is open.

11.1 The @debug tag

The @debug tag pauses execution (breaks) when given top-level variables change, and it outputs those variables’ values in the browser’s DevTools console. It is only honored if DevTools is open. The browser debugger can then be used to examine the code and other variables that are in scope.

Note

Both debugger and the @debug tag can be used when running apps in the REPL, but they only pause execution if DevTools is open.

11.2 Reactive statements

11.3 Svelte Devtools

Summary