DoneJS StealJS jQuery++ FuncUnit DocumentJS
5.33.3
6.0.0 4.3.0 3.14.1 2.3.35
  • About
  • Guides
  • API Docs
  • Community
  • Contributing
  • Bitovi
    • Bitovi.com
    • Blog
    • Design
    • Development
    • Training
    • Open Source
    • About
    • Contact Us
  • About
  • Guides
  • API Docs
    • Observables
      • can-bind
      • can-compute
      • can-debug
      • can-define
      • can-define/list/list
      • can-define/map/map
      • can-define-backup
      • can-define-stream
      • can-define-stream-kefir
      • can-event-queue
      • can-kefir
      • can-list
      • can-map
      • can-map-compat
      • can-map-define
      • can-observable-array
      • can-observable-object
      • can-observation
      • can-observation-recorder
      • can-observe
      • can-simple-map
      • can-simple-observable
      • can-stream
      • can-stream-kefir
      • can-value
    • Views
      • can-attribute-observable
      • can-component
      • can-stache
        • Tags
          • {{expression}}
          • {{{expression}}}
          • {{#expression}}
          • {{/expression}}
          • {{else}}
          • {{<partialName}}
          • {{!expression}}
          • {{-expression-}}
        • Helpers
          • and
          • console
          • debugger
          • domData
          • eq
          • for(of)
          • portal
          • if
          • joinBase
          • let
          • not
          • or
          • switch
          • case
          • default
        • Expressions
          • Bracket Expression
          • Call Expression
          • Hash Expression
          • KeyLookup Expression
          • Literal Expression
        • Methods
          • addBindings
          • addConverter
          • addHelper
          • addLiveHelper
          • from
          • safeString
        • Key Operators
          • ~compute
          • ./current
          • ../parent
          • scope
          • scope/key
          • this
          • key
        • Pages
          • Expressions
          • Helpers
        • Types
          • getterSetter
          • helper
          • helperOptions
          • sectionRenderer
          • simpleHelper
          • view
        • Deprecated
          • Helper Expression
          • scope.vars
          • {{data name}}
          • {{#each(expression)}}
          • {{#is(expressions)}}
          • {{#unless(expression)}}
          • {{#with(expression)}}
          • registerConverter
          • registerHelper
          • registerPartial
          • Legacy Scope Behavior
          • {{^expression}}
          • {{>key}}
      • can-stache-bindings
      • can-stache-converters
      • can-stache-element
      • can-stache-route-helpers
      • can-view-autorender
      • can-view-callbacks
      • can-view-import
      • can-view-live
      • can-view-model
      • can-view-nodelist
      • can-view-parser
      • can-view-scope
      • can-view-target
      • steal-stache
    • Data Modeling
      • can-connect
      • can-connect-feathers
      • can-connect-ndjson
      • can-connect-tag
      • can-fixture
      • can-fixture-socket
      • can-local-store
      • can-memory-store
      • can-ndjson-stream
      • can-query-logic
      • can-realtime-rest-model
      • can-rest-model
      • can-set-legacy
      • can-super-model
    • Routing
      • can-deparam
      • can-param
      • can-route
      • can-route-hash
      • can-route-mock
      • can-route-pushstate
    • JS Utilities
      • can-assign
      • can-define-lazy-value
      • can-diff
      • can-globals
      • can-join-uris
      • can-key
      • can-key-tree
      • can-make-map
      • can-parse-uri
      • can-queues
      • can-string
      • can-string-to-any
      • can-zone-storage
    • DOM Utilities
      • can-ajax
      • can-attribute-encoder
      • can-child-nodes
      • can-control
      • can-dom-data
      • can-dom-events
      • can-dom-mutate
      • can-event-dom-enter
      • can-event-dom-radiochange
      • can-fragment
    • Data Validation
      • can-define-validate-validatejs
      • can-type
      • can-validate
      • can-validate-interface
      • can-validate-legacy
      • can-validate-validatejs
    • Typed Data
      • can-cid
      • can-construct
      • can-construct-super
      • can-data-types
      • can-namespace
      • can-reflect
      • can-reflect-dependencies
      • can-reflect-promise
      • can-types
    • Polyfills
      • can-symbol
      • can-vdom
    • Core
    • Infrastructure
      • can-global
      • can-test-helpers
    • Ecosystem
    • Legacy
  • Community
  • Contributing
  • GitHub
  • Twitter
  • Chat
  • Forum
  • News
Bitovi

debugger

  • Edit on GitHub

In development, breaks at the given point in the template to inspect the current scope in the console.

{{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 {Component} from "can";

Component.extend({
  tag: "my-demo",
  view: `
    {{ let value=false }}
    {{# if(value) }}
      {{ debugger }}
    {{/ if }}
    <button on:click="value = true">Show</button>
  `
});
</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 {Component} from "can";

Component.extend({
  tag: "my-demo",
  view: `
    {{ let value=false }}
    {{ debugger(value) }}
    <button on:click="value = true">Set to true</button>
  `
});
</script>

Parameters

  1. CONDITION {KeyLookup Expression|Call Expression}:

    an EXPRESSION that if evaluates to a truthy value triggers the debugger.

{{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 {Component} from "can";

Component.extend({
  tag: "my-demo",
  view: `
    {{ let value=false }}
    {{ debugger(value, 2) }}
    <button on:click="value = 2">Set to 2</button>
  `
});
</script>

Parameters

  1. LEFT {KeyLookup Expression|Call Expression}:

    an EXPRESSION which compares with RIGHT which if equal triggers the debugger.

  2. RIGHT {KeyLookup Expression|Call Expression}:

    an EXPRESSION which compares with LEFT which if equal triggers the debugger.

Use

The debugger helper breaks at its place in the template.

During a break, in the paused inspector there is a special get(<path>) function to help inspect the current scope. For example, get("book.title") will attempt to locate book in the current scope and return its title property.

Use the helper in development and debugging. In production, the debugger never breaks and instead prints a warning.

See also

  • Debugging Guide
  • Debugging Tutorial

CanJS is part of DoneJS. Created and maintained by the core DoneJS team and Bitovi. Currently 5.33.3.

On this page

Get help

  • Chat with us
  • File an issue
  • Ask questions
  • Read latest news