How to Debug Components in Svelte
In Svelte, you have the @debug
expression, which can be used for inserting a debugger into your Svelte components:
Copied to clipboard!
{@debug}
You can also provide variables to @debug
:
Copied to clipboard!
{@debug bug}
{@debug bug, fly, mosquito}
You can also provide a comma-separated list of variables as well. This will log out the values of the specified variables, every time they change.
Note that the @debug
expression only works for variables, but not for expressions:
Copied to clipboard!
<!-- π¨ These wonβt compile -->
{@debug user.settings}
{@debug credit === 0}
{@debug !loggedIn}
{@debug items[0]}
Resources:
π More Webtips
Master the Art of Frontend
- Access 100+ interactive lessons
- Unlimited access to hundreds of tutorials
- Prepare for technical interviews