Svelte and Sapper in Action

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 ...