DoneJS StealJS jQuery++ FuncUnit DocumentJS
6.0.1
5.33.2 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-deep-observable
      • 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-observable-bindings
      • can-stache
      • can-stache-bindings
      • can-stache-converters
      • can-stache-element
      • can-stache-route-helpers
      • can-view-autorender
      • can-view-callbacks
      • can-view-import
      • can-view-model
      • 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-define-realtime-rest-model
      • can-define-rest-model
      • 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
        • queue types
          • CompletionQueue
          • can-queues.PriorityQueue
          • can-queues.Queue
        • queues
          • notifyQueue
          • deriveQueue
          • domUIQueue
          • mutateQueue
        • methods
          • batch.start
          • batch.stop
          • enqueueByQueue
          • lastTask
          • log
          • logStack
          • runAsTask
      • 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

logStack

  • Edit on GitHub

Log the tasks that were run that resulted in the current line of code being executed.

queues.logStack()

logStack() is a very useful debugging tool for discovering why a particular piece of code was executed by CanJS. It logs to the developer console the tasks that resulted in the current line of code being executed.

It is often used in conjunction with a debugger, as a replacement for the browser's developer tool's stack.

{
    someMethodThatIDontKnowWhyItsRunning: function() {
        queues.logStack();
        debugger;
    }
}

logStack() does nothing in production.

Use

A task queue means a browser's developer console stack will not always provide an easily understandable representation of the flow of code that resulted in a statement of code being executed. logStack() and log are helpful functions that represent the actions CanJS is taken in a more sense-able representation.

To use .logStack() it's typically a good idea to reference it from the window so it can be called at any time. The easiest way to do this is to expose can-namespace as follows:

window.can = require( "can-namespace" );

Now, logStack should be available at any time with:

can.queues.logStack();

Consider the following code that derives an info value from the person observable:

const person = new observe.Object( { name: "Fran", age: 15 } );

const info = new Observation( function updateInfo() {
    return person.name + " is " + person.age;
} );

info.on( function onInfoChanged( newVal ) {
    can.queues.logStack();
    debugger;
} );

person.age = 22;

The can.queues.logStack() above would log something similar to the following:

ObserveObject{} set age to 22
NOTIFY ran task: Observation<updateInfo>.onDependencyChange ▶ { ... }
DERIVE ran task: Observation<updateInfo>.update ▶ { ... }
MUTATE ran task: onInfoChanged ▶ { ... }

.logStack() logs each task in the task queue and the reason the initial task was queued. The name of each task and the queue it ran in is logged. You'll also notice that the task object itself is logged (shown as ▶ { ... } above). That object contains references to the following:

{
    fn,      // The function that was run
    context, // The context (`this`) the function was called on
    args,    // The arguments the function was passed
    meta    // Additional information about the task
}

The following video shows using logStack:

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

On this page

Get help

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