This chapter covers:
- Using the
@debugtag
- 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.
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.