diff --git a/site/content/docs/02-template-syntax.md b/site/content/docs/02-template-syntax.md index c6fd5c8b2d..44256b52e7 100644 --- a/site/content/docs/02-template-syntax.md +++ b/site/content/docs/02-template-syntax.md @@ -1261,3 +1261,46 @@ The `` element provides a place to specify per-component compile ```html ``` + + +### @debug + +```sv +{@debug variable} +``` +```sv +{@debug var1, var2, ..., varN} +``` + +--- + +The `{@debug ...}` tag offers an alternative to `console.log(...)`. It allows you to inspect the value of a specific variable, but additionally pauses code execution when you have devtools open. + +```html + + +{@debug user} + +

Hello {user.firstname}!

+``` + +--- + +`{@debug ...}` can also accept a comma-separated list of values, however it accepts only variable identifiers, and as such does not support inspecting of expressions. + +```sv +# Compiles +{@debug user} +{@debug user1, user2, user3} + +# WON'T compile +{@debug user.firstname} +{@debug myArray[0]} +{@debug !isReady} +{@debug typeof user === 'object'} +```