Ember.js Getting Started Guide--debugging assistant

Ember not only provides a Google, Firefox plugin "Ember Inspector" specifically for debugging Ember programs ( Installing plugins may require FA, If you are also a programmer I think FQ for you should not be difficult!!! ), and also provides helper for debugging .

in accordance with the customary practice, the first preparation, the separate implementation Ember CLI commands to create controllers,route, and templates:

Ember Generate controller Dev-helper

Ember Generate Route Dev-helper

1, the Log assistant{{log}}

       {{ log}} can be style= "font-size:16px ; Line-height:107%;font-family:calibri ">controller route The values that the class passes to the page are output in the form of a log directly on the browser's console. The following code is in controller

App/controllers/dev-helper.js import Ember from ' Ember '; Export Default Ember.Controller.extend ({testname: ' This is a testvalue ... '});

We can display the value of the string testname directly on the template , or we can use the {{log}} helper to output the console in log form. Of course, you can also use the {{log ' xxxx '}} to print xxxx directly on the console . The 2nd Breakpoint Helper example will show you the usage of {{log ' xxx '}} .

<!--App/templates/dev-helper.hbs directly on the page: {{testname}}{{log testname}}

After running http://localhost:4200/dev-helper, we can see the value of the string testname on the page. Open Google or Firefox's console (under the Console tab) to see the values of the characters that are also printed. More simple I will no longer ...

2, Breakpoint Helper{{Debugger}}

when you need to debug, you can add this assistant where you need to add a breakpoint on the template, and it will automatically stop at the point where the assistant is added.

{{Log ' This sentence precedes the breakpoint '}} {{Debugger}}<br>{{log ' This sentence is after the breakpoint '}}

no unexpected program will stop at a {{Debugger}} this line. The console should print " This sentence is in front of the breakpoint." Then skip the breakpoint by clicking Next, and then continue printing " This sentence is behind the breakpoint."

The result of the operation is not good, please try it yourself!!!

when you use the {{Debugger}} , and when the program stops entering the debug state, you can enter get (' key ') directly from the command line of the browser console to get the value set by the controller.

Enter get (' testname ') in the position indicated by the arrow and press ENTER to execute. will get the following result:

you can see that the values you have set in the Controller class are obtained correctly .

If you do not enter get (' testname ') in debug mode, you will be prompted with the following error.

You can also traverse the assistant {{each}} used in {{Debugger}} , click " next " or press F8 to execute a loop.

First rewrite the model callback of the route class and add the test data inside.

//  app/routes/dev-helper.js import  Ember from  ' Ember ';  export default ember.route.extend ({        model: function ()  {               return [                      { id: 1, name:  ' Chen ',  age:  25 },                      { id: 2, name:  ' ibeginner.sinaapp.com ',  age:  2 }              ];        }); 

Use the {{debugger}} helper in each helper of the template .

{{#each model as |item|}} {{Debugger}} {{/each}}

run, the browser automatically enters debug mode. At this point you can enter get (' Item.name ') in the browser console command to get the property values for this loop object. Then what time do you " next " or press F8, the program automatically goes to the next loop, and then you enter get (' item.name '), at this time the Loop object property value is obtained. Then click Next or press F8 to enter the third loop, because the route class sets the returned array with only 2 elements, and the third time there is no element. So this time it will automatically exit debug mode.

If it works, you can get the output information shown.

in the debug state you can also enter directly in the browser console command line Context Gets the context information. All classes and properties contained in this page are output.

If you are interested, you can start by looking at what's inside. This article is no longer open to see.

The above introduction is Ember provides all of the debugging assistant's use methods. It should be useful when you develop Ember applications, especially when each loop is traversed.

Ember.js Getting Started Guide--debugging assistant