How to Debug Components in Svelte

How to Debug Components in Svelte

Ferenc Almasi β€’ Last updated 2020 September 12 β€’ Read time 1 min read
  • twitter
  • facebook

In Svelte, you have the @debug expression, which can be used for inserting a debugger into your Svelte components:

Copied to clipboard!
{@debug}
Debug.svelte

You can also provide variables to @debug:

Copied to clipboard!
{@debug bug}
{@debug bug, fly, mosquito}
Debug.svelte

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]}
Debug.svelte
How to Debug Svelte Components
If you would like to see more Webtips, follow @flowforfrank

Looking into Svelte 3

Resources:

  • twitter
  • facebook
Did you find this page helpful?
πŸ“š More Webtips
Frontend Course Dashboard
Master the Art of Frontend
  • check Access 100+ interactive lessons
  • check Unlimited access to hundreds of tutorials
  • check Prepare for technical interviews
Become a Pro

Courses

Recommended

This site uses cookies We use cookies to understand visitors and create a better experience for you. By clicking on "Accept", you accept its use. To find out more, please see our privacy policy.