Detailed explanation of the use of Angular's browser plug-in Batarang

This time I will bring you a detailed explanation of the use of Angular's browser plug-in Batarang. What are the precautions when using the Angular browser plug-in Batarang. Here are practical cases, let's take a look.

Angular browser plug-in Batarang introduction

For those new to Angular, it will be quite painful when they first take over Angular. Indeed, compared to JQuery, Backbone, etc., Angular has a relatively high threshold and is more difficult to debug. Today I bring you an Angular An introduction to the Chrome plug-in Batarang. Using the plug-in will help deepen your understanding of Angular.

Preparation

Install Batarang:

1. Method 1: Find Batarang in the Chrome App Store and install it.

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 with the installed Batarang plug-in and open the console, as shown below:

You will find that there is an additional AngularJS page in the console. Check "Enable" and the control can be used:

Models

Click on Models. The left side is the information of all Scopes under the application, and the right side is the model information corresponding to the Scope. Click on a scope, and all model information in the scope will be displayed on the right.

Clicking the "<" before Scope will jump to the DOM tag where the scope is located in Elements.

Performance

Performace shows the performance of the application. The left side shows the monitoring tree, and the right side shows the performance of the monitoring expression. This page can help us performance optimization.

Dependenices

Dependenices displays the dependencies between instructions and services. By selecting an instruction, you can see the services it depends on.

Options

Finally is the options page. There are three options: "show applications," "show scopes," and "show bindings." When each option is checked, the corresponding content will be highlighted on the page during debugger

help

If you have any questions, please check help

Element

In fact, what I use most is AngularJS on the right side of Element. Properties tab. When a tag is selected in the Element tag, the content on the right side of the Element page will have an additional AngularJS Properties page, which displays the properties of the selected html content scope. This function is useful for Angular Scope understanding is very useful. If you don’t understand Angular Scope very well, you can use this function more.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Nodejs uses redis to encapsulate cache method

Customized ajax cross-domain component encapsulation

Express multer implements the specific steps to upload node images

The above is the detailed content of Detailed explanation of the use of Angular's browser plug-in Batarang. For more information, please follow other related articles on the PHP Chinese website!