JavaScript debugging Tool: Firebug use detailed (Turn) __java

JavaScript debugging, is the development of Web applications, especially AJAX application is very important, the current debugging of JavaScript a lot of tools, I prefer to use is firebug. Firebug is a powerful web development tool developed by Joe Hewitt that integrates with Firefox to edit, debug, and monitor any page's CSS, HTML, and JavaScript in real time.

This article is mainly for beginners to introduce the basic functions of firebug and how to use Firebug. Because I have a limited level and ability, in the article may be a lot of mistakes and omissions, I hope we can understand and correct.

1, installation

Firebug is integrated with Firefox, so we first have to install things in the Firefox browser. After the browser is installed, open the browser, select the "Tools" menu on the menu bar, select "Add-on Software", and click on the "Get Extensions" link in the lower right corner of the pop-up window. Enter "Firebug" in the Search input box of the open page. After the search results come out click on the Firbug link (Figure 1-1 red circle) into the Firebug download installation page.

Figure 1-1

Click the install now (Figure 1-2) button in the page.

Figure 1-2

Wait 3 seconds in the pop-up window (Figure 1-3) and click the Install Now button.

Figure 1-3

Wait for the installation to complete and click the "Restart Firefox" button in the window (Figure 1-4) to restart Firefox.

Figure 1-4

When Firefox is restarted we can find a gray circular icon () on the far right of the status bar, which means that the Firebug is already installed. The gray icon indicates that Firebug does not turn on the editing, debugging, and monitoring functions of the current Web site. The green () indicates that Firebug has turned on the ability to edit, debug, and monitor the current Web site. The red icon () indicates that the current Web site has been turned on for editing, debugging, and monitoring, and that there are errors on the current page, indicating that there are 5 errors in the current icon.

2. Open or Close Firebug

Click on the Firebug icon or press F12 to find that the page window is divided into two parts, the top half is the browsing page, and the bottom half is the Firebug control window (Figure 2-1). If you don't like this, you can press CTRL+F12 or click the up arrow button in the upper-right corner of the previous operation to pop up a new window as a Firebug control window.

Figure 2-1

As we can see from figure 2-1, as we turn on the editing, debugging, and monitoring capabilities of Firebug, there are currently only two available links: "Enable Firebug" and "Enable Firebug for this web site". If you want to edit, debug and test all the websites, you can click "Enable Firebug" to open Firebug, then no matter browsing any website, Firebug are active, can be edited, debugged and tested at any time. However, the general habit of us is only the development of their own web site for editing, debugging and testing, so we only click "Enable Firebug for this web site" to open the Firebug on the line.

After opening the Firebug window (Figure 2-2), we can see that the window has two main areas, one is the functional area, the other is the information area. Select the different labels in the second row of the Ribbon, the display of the information area will be different, options will be different, the search box search method will also be different.

Figure 2-2

To close the Firebug control window, click the Close icon at the far right of the ribbon or press the F12 key. If you want to turn off the editing, debugging, and monitoring features of Firebug, you need to click the leftmost bug icon in the Ribbon, open the main menu, select Disable Firebug or Disable Firebug for xxxxx.

3, Firebug main Menu

Click on the left-most bug icon on the Ribbon to open the main menu (Figure 3-1), and see table 1 for its main functional description.

Figure 3-1

Menu options	Description
Disable Firebug	Turn off/Turn on Firebug for editing, debugging, and testing of all Web pages
Disable Firebug for xxxxx	Turn off/Turn on the editing, commissioning and detection functions of Firebug on XXXXX website
Allowed Sites	Set up Web sites that allow editing, debugging, and testing
Text Size:increase text Size	Increase the font size of the information area display text
Text Size:decrease text Size