Introduction and use of Angular browser plug-in Batarang, angularbatarang

Introduction and use of Angular browser plug-in Batarang, angularbatarang

Introduction to Angular browser plug-in Batarang

For new Angular users, it will be quite painful to take over Angular. Indeed, compared with JQuery and Backbone, Angular has a relatively high threshold and is difficult to debug. Today, we will introduce the Angular Chrome plug-in Batarang. Using this plug-in will help you better understand Angular.

Preparations

Install Batarang:

1. Method 1: search for and install Batarang In the Chrome app store.
2. Method 2: Find the Batarang installation package on the Internet and install it directly in the Chrome browser.

Use

Open an Angular application in the browser of the installed Batarang plug-in and open the console, such:

You will find an AngularJS page in the console. Check "Enable" to use this control:

Models

Click Models. For example, all the Scope information under the application is on the left, and the model information corresponding to the Scope is on the right. Click a scope. All model information in the scope is displayed on the right.

Click <in front of Scope to jump to the DOM tag of the Scope in Elements.

Performance

The middleware Mace displays the performance of the application, the monitoring tree on the left, and the performance of the monitoring expression on the right. This page can help us with performance optimization.

Dependenices

Dependenices displays the dependency between commands and services. Select a command to view the dependent services.

Options

Finally, the options page. There are three options: "show applications," "show scopes," and "show bindings .". When you select this option, the corresponding content is highlighted on the page when you debugger.

Help

If you have any questions, see help

Element

In fact, the AngularJS Properties label on the Right of Element is the most commonly used one. When a tag is selected in the Element tag, an AngularJS Properties page is displayed on the right side of the Element page, showing the attributes of the scope of the selected html content, this function is useful for understanding Angular Scope. If you are not familiar with Angular Scope, you can use this function.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.