explain how debug tag without args fires on all state changes

pull/2782/head
Rich Harris 5 years ago
parent 8c9da2fa85
commit 51be7cf8e3

@ -1266,7 +1266,7 @@ The `<svelte:options>` element provides a place to specify per-component compile
### @debug ### @debug
```sv ```sv
{@debug variable} {@debug}
``` ```
```sv ```sv
{@debug var1, var2, ..., varN} {@debug var1, var2, ..., varN}
@ -1274,7 +1274,9 @@ The `<svelte:options>` element provides a place to specify per-component compile
--- ---
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. The `{@debug ...}` tag offers an alternative to `console.log(...)`. It logs the values of specific variables whenever they change, and pauses code execution if you have devtools open.
It accepts a comma-separated list of variable names (not arbitrary expressions).
```html ```html
<script> <script>
@ -1291,16 +1293,18 @@ The `{@debug ...}` tag offers an alternative to `console.log(...)`. It allows yo
--- ---
`{@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. `{@debug ...}` accepts a comma-separated list of variable names (not arbitrary expressions).
```sv ```html
# Compiles <!-- Compiles -->
{@debug user} {@debug user}
{@debug user1, user2, user3} {@debug user1, user2, user3}
# WON'T compile <!-- WON'T compile -->
{@debug user.firstname} {@debug user.firstname}
{@debug myArray[0]} {@debug myArray[0]}
{@debug !isReady} {@debug !isReady}
{@debug typeof user === 'object'} {@debug typeof user === 'object'}
``` ```
The `{@debug}` tag without any arguments will insert a `debugger` statement that gets triggered when *any* state changes, as opposed to the specified variables.
Loading…
Cancel
Save