JavaScript debugging Tool: Firebug use detailed (Turn) __java

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.