{{debugger}}

Breaks any time that part of the page renders.

The following will hit the debugger when you click the Show button:

<my-demo></my-demo>
<script type="module">
import {StacheElement} from "can";

class MyDemo extends StacheElement {
  static view = `
    {{ let value=false }}
    {{# if(value) }}
      {{ debugger }}
    {{/ if }}
    <button on:click="value = true">Show</button>
  `;
}

customElements.define("my-demo", MyDemo);
</script>

The can-view-scope can be used to look up values. scope.log() prints the scope. scope.get(key) reads a key value.

{{debugger(CONDITION)}}

The one argument debugger breaks any time the helper evaluates and the argument evaluates to a truthy value.

<my-demo></my-demo>
<script type="module">
import {StacheElement} from "can";

class MyDemo extends StacheElement {
  static view = `
    {{ let value=false }}
    {{ debugger(value) }}
    <button on:click="value = true">Set to true</button>
  `;
}

customElements.define("my-demo", MyDemo);
</script>

{{debugger(LEFT, RIGHT)}}

The two argument debugger breaks any time the helper evaluates and the two evaluated arguments are equal to each other.

<my-demo></my-demo>
<script type="module">
import {StacheElement} from "can";

class MyDemo extends StacheElement {
  static view = `
    {{ let value=false }}
    {{ debugger(value, 2) }}
    <button on:click="value = 2">Set to 2</button>
  `;
}

customElements.define("my-demo", MyDemo);
</script>