Utilizing the debugger in an hbs file

One of the great challenges of software development is debugging code when things don’t seem to be producing the logical results you had expected. Having recently taken a deep dive into the Ember.js framework I learned an effective technique to debug into the heart of an hbs file.

In any hbs file you can drop a debugger inside of a pair of handlebars. Similar to dropping a debugger into your javascript code, the debugger inside of the hbs file gives you access to everything the template has at its disposal.

<div>
{{debugger}}
<h2 class="name">{{model.fullName}}</h2>
<h4 class="email">{{model.emailAddress}}</h4>
<br>
{{#link-to "user.edit" model.id class="edit-user"}}
<span class="links">
<i class="fa fa-pencil"></i> Edit
</span>
{{/link-to}}
</div>

When the template is rendered it will pause and immediately give you access to ‘context’ inside of the console.

You can then dig through the context to identify what information you can access. In this example we can peek into the model. We can quickly scan through all of the model’s properties to make sure they are generating the expected information or where a computed property on the model might not be returning the expected value.

So next time you begin the process of debugging consider utilizing the above technique as another tool in your developer toolbox.