Ember provides a browser extension and several configuration options to help you debug your application.
Ember Inspector
The Ember Inspector is a browser extension that makes it easy to understand and debug your Ember.js application. To learn more, check out the dedicated guide.
Routing
Log router transitions
app/app.js
import Application from '@ember/application';
export default class App extends Application {
// Basic logging, e.g. "Transitioned into 'post'"
LOG_TRANSITIONS = true;
// 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
LOG_TRANSITIONS_INTERNAL = true;
}Views / Templates
Log view lookups
config/environment.js
ENV.APP.LOG_VIEW_LOOKUPS = true;Controllers
Log generated controller
config/environment.js
ENV.APP.LOG_ACTIVE_GENERATION = true;Miscellaneous
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.
app/app.js
import Application from '@ember/application';
export default class App extends Application {
LOG_RESOLVER = true;
}Dealing with deprecations
In addition to what is described in the Handling Deprecations guide, you can turn on the following settings:
config/environment.js
ENV.RAISE_ON_DEPRECATION = true;
ENV.LOG_STACKTRACE_ON_DEPRECATION = true;Implement a window error event listener to log all errors in production
app/app.js
// ...
window.addEventListener('error', function(error) {
fetch('/error-notification', {
method: 'POST',
body: JSON.stringify({
stack: error.stack,
otherInformation: 'exception message'
})
});
});