Using development helpers

Debugging your template is a task that you'll often use. Here are the steps to do this.

How to do it...

The most basic way of debugging Ember templates is to use {{log}} and {{debugger}}.

  1. Create a new Ember application. Create a new component called 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.

  2. Open the 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.

  3. Open the 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.

  4. Now we can add this new component to our 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.

  5. In this same example, let's add {{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.

  6. If we start the server and load the web page, the browser will halt on the debug statement while loading. At this point, we can open the browser's console window and use the 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.

  7. You can get the context of the view as well in the console debugger:
    > context

    Tip

    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.

How it works...

The Handlebars library has made it easy to debug your templates. They are helpers that interact with the web browser to log information to the console or stop the execution of it.

The Ember's {{debugger}} equivalent in JavaScript is the debugger. Both work very much in the same way.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset