Debugging your template is a task that you'll often use. Here are the steps to do this.
The most basic way of debugging Ember templates is to use {{log}}
and {{debugger}}
.
log-example
. Run this command in the root application
folder:$ ember g component log-example
This will create a new component template and JavaScript files.
log-example.js
file in the app/components
folder and a new property called helloText
:// app/components/log-example.js import Ember from 'ember'; export default Ember.Component.extend({ helloText: 'Hello World' });
This is a simple component with just one property.
log-example.hbs
file in the app/templates/components
directory. Add log
to it:// app/templates/components/log-example.hbs {{log 'Hello text is' helloText}}
This will display a string in the browser's console window.
application.hbs
file:// app/templates/application.hbs <h2 id="title">Welcome to Ember</h2> <br> <br> {{log-example}}
After being rendered, the text Hello text is Hello World will be displayed in the console.
{{debugger}}
. Edit the log-example.hbs
file and add it at the bottom:// app/templates/components/log-example.hbs {{log 'Hello text is' helloText}} {{debugger}} hi
The debugger is the equivalent of JavaScript's debugger keyword. It will halt the execution of code and allow the inspection of the current rendering context.
get
function to find the current value of helloText
:> get('helloText') > "Hello World"
The get
command can retrieve any value from the context. In other words, it can retrieve any value from the component or controller. This works the same if the debug statement was in a {{each}}
loop.
> context
Ember Inspector
The Ember Inspector is a plugin for Chrome and Firefox web browsers. It makes it easy to debug and understand your Ember application. When you are using the plugin, you can see all sorts of information on your application, including routes, models, templates, controllers, and components. You can download it from the Firefox or Chrome plugin store for free.