Debugging Edit Page

Ember provides several configuration options that can help you debug problems with your application.


Log router transitions

import Application from '@ember/application';

export default Application.extend({
  // Basic logging, e.g. "Transitioned into 'post'"

  // Extremely detailed logging, highlighting every internal
  // step made while transitioning into a route, including
  // `beforeModel`, `model`, and `afterModel` hooks, and
  // information about redirects and aborted transitions

Views / Templates

Log view lookups


View all registered templates



Log generated controller


Observers / Binding

See all observers for an object, key

Ember.observersFor(comments, keyName);

Log object bindings



Turn on resolver resolution logging

This option logs all the lookups that are done to the console. Custom objects you've created yourself have a tick, and Ember generated ones don't.

It's useful for understanding which objects Ember is finding when it does a lookup and which it is generating automatically for you.

import Application from '@ember/application';

export default Application.extend({

Dealing with deprecations


Implement an Ember.onerror hook to log all errors in production

Ember.onerror = function(error) {
  Ember.$.ajax('/error-notification', {
    type: 'POST',
    data: {
      stack: error.stack,
      otherInformation: 'exception message'

Import the console

If you are using imports with Ember, be sure to import the console:

Ember = {
  imports: {
    Handlebars: Handlebars,
    jQuery: $,
    console: window.console

Errors within an RSVP.Promise

There are times when dealing with promises that it seems like any errors are being 'swallowed', and not properly raised. This makes it extremely difficult to track down where a given issue is coming from. Thankfully, RSVP has a solution for this problem built in.

You can provide an onerror function that will be called with the error details if any errors occur within your promise. This function can be anything, but a common practice is to call console.assert to dump the error to the console.

import { assert } from '@ember/debug';
import RSVP from 'rsvp';

RSVP.on('error', function(error) {
  assert(error, false);

Errors within (Backburner.js)

Backburner has support for stitching the stacktraces together so that you can track down where an erroring is being initiated from. Unfortunately, this is quite slow and is not appropriate for production or even normal development.

To enable full stacktrace mode in Backburner, and thus determine the stack of the task when it was scheduled onto the run loop, you can set: = true;

Once the DEBUG value is set to true, when you are at a breakpoint you can navigate back up the stack to the flush method in and check the errorRecordedForStack.stack value, which will be the captured stack when this job was scheduled.