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}}
.
Create a new Ember application. Create a new component called
log-example
. Run this command in the rootapplication
folder:$ ember g component log-example
This will create a new component template and JavaScript files.
Open the
log-example.js
file in theapp/components
folder and a new property calledhelloText
:// 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.
Open the
log-example.hbs
file in theapp/templates/components
directory. Addlog
to it:// app/templates/components/log-example.hbs {{log 'Hello text is' helloText}}
This will display a string in the browser's console window.
Now we can add this new component to our
application.hbs
file:// app/templates...