No nonsense extjs getting started tutorial 8 [script debugging Firefox: firebug]

Firebug is a Firefox plug-in with functions: HTML viewing and instant editing, console, and network conditions. It is a powerful debugging tool for developing JavaScript and extjs.

1. Firefox installation .:
Http://www.mozilla.org.cn

Ii. firebug:

Https://addons.mozilla.org/zh-CN/firefox/search? Q = firebug

After the download, drag the firebug to the Firefox browser to automatically install it.

For example, the preceding login.htm is used as an example.]

During development, the three most commonly used firebug functions are: viewing element composition, script debugging, and viewing client-to-service interaction.

1. view the page elements. Now let's take a look at the structure of the button.

As shown in:

 

(1) Open firebug.

(2) Click the small square in the lower left corner [next to the bug].

(3) move the cursor to the position of the submit button [that is, the object for viewing the structure].

[Default]: the left part of firebug shows the composition of this button, and the right part shows the style sheet.

2. js script debugging

(1)we mean login.htmCodeAn error occurred. Add "," at the position of row 59 in the previous lesson, as shown in line 8th of the code below.

1    //  Password Input  2               VaR Txtpassword = New  Ext. Form. textfield ({  3 Width: 140 ,  4 Allowblank: False  ,  5 Maxlength: 20 ,  6 Inputtype: 'Password' ,  7 Name: 'Password' ,  8 Fieldlabel: 'password' ,,  9 Blanktext: 'Enter the password' ,  10 Maxlengthtext: 'The password cannot exceed 20 characters' 11 });

(2) Click firebug console.

(3) refresh the page, as shown in:

The console displays the error message [file name, row number, column number, etc.]. After you click it, the client's JS file is opened and the error location is found.

In firebug, you can set breakpoints and debug them step by step. This feature is not described here.

3. during development, most of the tasks are to interact with the service end. In this regard, firebug also provides a good help debugging function, as shown in:

Click "network" -- "xhr"

We often use "Post" and "response" in development"

(1) I sent three parameters (username, password, and checkcode) to the service in the form of post in the client.

(2) Click "response" and the return value returned by the service to the client is displayed.

In this way, we can easily view the interaction between the client and the service, and determine whether the error is in the service or client.