JavaScript debugging Tool: Firebug use detailed (Turn) __java

(Turn: God knows the column) 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.

<!--[if!supportlists]-->1, <!--[endif]--> 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.

<!--[if!vml]--><!--[endif]-->

Figure 1-1

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

<!--[if!vml]--><!--[endif]-->

Figure 1-2

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

<!--[if!vml]--><!--[endif]-->

Figure 1-3

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

<!--[if!vml]--><!--[endif]-->

Figure 1-4

When Firefox is restarted we can find a gray circle icon on the far right of the status bar (<!--[if!vml]--><!--[endif]-->), which means that 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 (<!--[if!vml]--><!--[endif]-->) indicates that Firebug has turned on the ability to edit, debug, and monitor the current Web site. The red icon (<!--[if!vml]--><!--[endif]-->) indicates that the current Web site has been turned on for editing, debugging, and monitoring, and that there are 5 errors on the current page, which indicates that there is an error.

<!--[if!supportlists]-->2, <!--[endif]--> turned on or off 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.

<!--[if!vml]--><!--[endif]-->

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.

<!--[if!vml]--><!--[endif]-->

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.

<!--[if!supportlists]-->3, <!--[Endif]-->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.

<!--[if!vml]--><!--[endif]-->

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	Reduce the font size of the information area display text
Text Size:normal text Size	The information area is displayed in normal font
Options:always Open in New Window	Set the Firebug control window to always open in a new window
Show Preview ToolTips	Sets whether to display a preview prompt.
Shade Box Model	The current viewing status is HTML, and when the mouse moves over the HTML element label, the page displays a border in the current label display to indicate the label range. The purpose of this option is to set whether the label range is represented by a different color background.
Firebug Website.	Open the Firebug home page.
Documentation..	Open the Firebug document page.
Discussion Group	Open the Firebug discussion group.
Contribute	Open the Donation Firebug page.
Table 1

<!--[if!supportlists]-->4, <!--[endif]--> Console (console)

Click the Console tab in the second column of the Ribbon to switch to the console (Figure 4-1). The function of the console is to display various error messages (defined in options), display console debugging information embedded in the scripting code, debug the script from the command line, and perform a performance test on the script by clicking Profile. The console is divided into two areas, one is the information area, the other is the command line, and the command line position can be changed via the Options menu "larger command lines".

<!--[if!vml]--><!--[endif]-->

Figure 4-1

Options menu, see table 2.

Menu options	Description
Show JavaScript Errors	Displays script errors.
Show JavaScript warnings	Displays a script warning.
Show CSS Errors	Displays a CSS error.
Show XML Errors	Displays an XML error.
Show XMLHttpRequests	Displays xmlhttprequests.
Larger Command Line	Expand the input area by displaying the command line from the bottom of the control window to the right.
Table 2

Click the Clear button to purge control information from the console.

<!--[if!supportlists]-->5, <!--[endif]--> page source code viewing feature

Click the HTML tab in the second column of the Ribbon to switch to the Source Code view feature (Figure 5-1). Although Firefox also provides a view of the page source code, but it shows only the page file itself source code, through the script output HTML source is not seen. And Firebug is the WYSIWYG, is the final source code.

<!--[if!vml]--><!--[endif]-->

Figure 5-1

Let's look at an example where the file source code is as follows:

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD" > <title> Simple Example </title> <meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "> <style> #div1 {background:red;width:100px;height:100px;} #div2 {background:blue;width:100px;height:100px;margin:10px;padding:10px;border:5px solid black;color:white;} #div3 {background:yellow;width:50px;height:50px;margin-left:25px;} </style> <body scroll= "No" > <div id= "Div1" > Square One </div> <div id= "Div2" > Square two </div> <script> document.getElementById (' Div1 '). innerhtml+= ' <div id= ' div3 ' > Square three </div> '; </script> </body>

In the example, we add "Div3" to "Div1" through JavaScript, and you can't see the source code in Firefox "Div1" contains code "<div id=" Div3 "> Block three </div>". But we can see it in the Firebug (Figure 5-2 is the selected part).

<!--[if!vml]--><!--[endif]-->

Figure 5-2

As we can see from figure 5-1, the information area is divided into two parts, the left is the display source code, and the right side is a ribbon, where you can see the CSS definition, layout, and DOM structure in the HTML element.

As we can see from figure 5-2, the source code is displayed hierarchically at the DOM structure, and we can easily analyze the code through the hierarchical folding function. The first line in the Ribbon is also based on your selections, with clear press, parent, and root to list the levels of the current source code (figure 5-2, red), click on each section, and immediately go to that part of the source code.

<!--[if!vml]--><!--[endif]-->

Figure 5-3

When you move the mouse over the source code, a translucent box appears, indicating the area where the current mouse refers to the source code, when selected. In Figure 5-4, the mouse is pointing to "div1" and is obscured by a translucent square in the display area of "DIV1" in the page.

<!--[if!vml]--><!--[endif]-->

Figure 5-4

If you press the "Inspect" button, the function is the opposite, moving the mouse in the page, the current display area of the source code will be highlighted. In Figure 5-5, we can see that the mouse pointer is pointing to "Square two," and in the source code you can see that the "square two" source "<div id=" Div2 "> Square two </div>" has been highlighted (red part). If you click on a display area, the source code for that area is selected.

<!--[if!vml]--><!--[endif]-->

Figure 5-5

is not very convenient. Convenient is convenient, but I have a lot of source code, and some areas in the page is not convenient to specify the mouse, how to do. It doesn't matter, we still have a powerful weapon, search function. For example, we know that the ID of an HTML element is "Div2", but in the layers of source code is not easy to find, in the pages of the mouse is difficult to locate, then we will be in the functional area of the search box input "Div2", and then look at the source area, "Div2" is highlighted (Figure 5-6 Red section). In this simple example may not see very good effect, you can try to put "DIV1" first folded up, and then enter the search box "Div3", you can see "Div1" will automatically expand, and the "Div3" highlighted, if you still feel not ideal, You can find a more examples of source code to test.

<!--[if!vml]--><!--[endif]-->

Figure 5-6

In addition to selecting the source from the display area by pressing the "Inspect" button, we can also select it by clicking the HTML tag (either the start or end tag) in the source code. We try to move the mouse to the HTML tag and we find that the mouse pointer changes to the shape of the hand, which means we can click to select the source code. After selecting the source code, we can view it through the ribbon on the right, edit and debug its CSS definition and box model (CSS box model see relevant instructions, here is no longer to repeat), there is a good function is when the external editor modified the source code (not deleted the source code, just modify), After we reload the page in the browser, the selected source code will not change, we can easily observe the changes and effects of the source.

Do you often feel annoyed that you are constantly switching between the source editor and the browser for debugging a page effect. You don't have to be annoyed with Firebug. You can edit it directly in the source code, and then look at the effect. If you just modify an existing property, such as to modify the inner text of "Div2", move the mouse directly over the text, and then click the mouse pointer to "I", and you can edit it. Other existing property and property values can also be edited directly. If you want to add a property to an element, move the mouse over the element, and when the cursor changes to "I", click the right mouse button, select "New attribute ..." from the menu, and enter the name of the property you want to add in the edit box that appears.

<!--[if!vml]--><!--[endif]-->

Figure 5-7

<!--[if!vml]--><!--[endif]-->

Figure 5-8

Let's try adding an "onclick" attribute to "Div2", and the result is to change the display text of "Div2" to "click". Move the cursor to "DIV2" and click the right mouse button to select "New Attribute ..." (Figure 5-7), enter "onclick" in the edit box, and finally click the ENTER key (Figure 5-8), the Property value input box appears, enter "This.innerhtml= '" ", return to add after the next property, this test does not need, So press ESC to end our input. Let's examine the results of the changes, click the area of the page "Div2" (Figure 5-9), the display text of "DIV2" has been modified to "click", and the source code has changed. There was no discovery that "Div2" was highlighted. This is also a function of Firebug. As soon as we modify the attributes of the element through the actions in the page, Firebug instructs the current operation to modify those property values in the source code by means of a highlight. For example, if we click a link to modify SRC in an iframe, the attribute value of this src is highlighted. For example, if we click on a link to modify an image in images, its SRC attribute value will also be highlighted. We can use the "Highlight Changes" setting on the Options menu to highlight the changes. and "Expand Changes" is to set the changed source code is folded up and invisible when expanded to make it visible. and "Scroll Changes into View" is a lot of source code, the changed source is not in the visual area, will be changed source code scrolling to the visual area.

<!--[if!vml]--><!--[endif]-->

Figure 5-9

Sometimes we do not just add one or two attributes, but we need to make more changes. Quite simply, select the element you want to change, click the Edit button on the first line of the Ribbon, or move the mouse directly over the element you want to modify, right-click, and select Edit HTML ..., at which point the source code area will switch to edit state. You can change the source code of your choice arbitrarily. We try to modify the "Div2", modify the display text back to "square two", we select "Div2", then click the "Edit" button (Figure 5-10), change the display text back to "square two", and then click the "Edit" button to exit the edit state, if you want to discard the changes, You can press the ESC key to exit. Because it is what you see, so when we modify it, the page refreshes the display at the same time.

<!--[if!vml]--><!--[endif]-->

Figure 5-10

What to do if you want to modify the CSS definition for an element. Quite simply, select the element and select the "Style" tab in the right-hand window, which shows the CSS definition of the current element. Here we can add, edit, delete, and disable CSS definitions. Let's try to check the background color of "div2". Moving the mouse to the "background" line (Figure 5-11), we can see that there is a gray bar icon at the far right of this line, and you can disable this CSS property by clicking on the Forbidden icon. We click on this icon to see the effect, the page "Div2" has become a white background, and the ban icon also turned red, and the text will turn gray (figure 5-12), which indicates that the "background" has been banned. Of course, this operation can also be implemented by the right mouse button "Disable xxxxx" (xxxxx represents the currently selected CSS attribute). We click the Disable icon again to restore the "background" property. This time we're going to change the color of "background" from blue to green. We moved the mouse to the "background" property value "Blue" (Figure 5-13). How can there be a box with a blue background. This is the Firebug provides background preview function, let us very intuitive know what the current background is. If the background is a picture, the thumbnail of the background image will be displayed. To continue with our operation, click the property value and change "blue" to "green" in the edit box that appears. Well, the background has been changed to green. Now the display text is left-aligned, and I want it to be centered, which requires a "text-align" attribute in the CSS with the value "center". Click the right mouse button on the CSS, select "New property ..." In the menu, enter "TE" in the edit box, Firebug has helped us enter "Text-align" by AutoComplete (Figure 5-14), press the TAB key or enter, and in the attribute value we type "C" , Firebug again to help us automatically complete the "center" (Figure 5-15), press the TAB key or enter to complete the entry, if you do not need to continue to enter the new properties, press ESC or click the mouse to cancel the input. The text "Square Two" is now centered. What to do if you forget about a property value that has those options. It doesn't matter, when you enter the attribute value, you can select the property value we want by using the up and down arrows.

In the "Style" tab, we can choose Show computed Style on the Options menu to view the default style definition of the browser.

<!--[if!vml]--><!--[endif]-->
Figure 5-11
<!--[if!vml]--><!--[endif]-->
Figure 5-12
<!--[if!vml]--><!--[endif]-->
Figure 5-13
<!--[if!vml]--><!--[endif]-->	<!--[if!vml]--><!--[endif]-->
Figure 5-14	Figure 5-15

In page design, we sometimes have the most headaches. It's a box model. In order to adjust the margin, border, padding, and relative position of an element, we often need to spend a lot of time to modify the source code, and then refresh the page to see the effect. With Firebug, you can deal with it easily. We switch the area on the right to the "Layout" tab (Figure 5-16), and you see a box model that divides the offset, margin, border, padding, and content into five areas from the outside through different lines and colors. Each of the 4 areas has 1 values on each side, indicating the adjustment value in that direction. Let's first choose "Div2" on the left, then move the mouse to the different areas of "Layout" (Figure 5-17), and then pay attention to the page, the page at the top of a horizontal ruler, more than a vertical ruler on the left, and 4 solid lines indicate the current mouse direction of the actual location of the region, By the intersection with the ruler, you can know the offset of the area from the upper-left corner of the page display area (px), but we can also calculate the offsets by the numbers in the layout. In the diagram, we can also see that there are 3 different color areas outside the content area, and they represent the padding, border, margin position and offset from the inside to the outer color. As long as you move the mouse to a different area, the 4 solid lines in the page also change position, indicating the corresponding area of the page. We can also adjust the display effect by modifying the values in the layout. For example, we want to expand the "div2" content display area to 200x200, the mouse to move the leftmost 100, the cursor changed to "I", click the mouse, and then enter 200 in the input box, press ENTER can continue to modify the height value, enter 200, return to complete the modification. The "Div2" area of the page has been extended to 200x200, and the source code has also added "style=" width:200px; height:200px; "" (Figure 5-18). We switch tags to "Style" and we find that "Element.style {height:200px;width:200px}" is more. (Figure 5-19), while the height and width of the CSS definition are underlined, which means that it does not work, "Element.style" represents a CSS property that is directly defined on the element source code. Sometimes some of the element will have the same attributes, but also have their own special attributes, and special attributes want to write on the Element source code, you can click the right mouse button in the style select "Edit Element Style ..." To add. If you are interested, you can try to modify the other attribute values in "Layout" to seePage changes, here I will no longer one by one explained.

If you do not want to display the ruler and 4 solid lines on the page, you may not select Show Rules and Guides on the Options menu.

<!--[if!vml]--><!--[endif]-->

Figure 5-16

<!--[if!vml]--><!--[endif]-->

Figure 5-17

<!--[if!vml]--><!--[endif]-->

Figure 5-18

<!--[if!vml]--><!--[endif]-->

Figure 5-19

In the source code display area We can also use the right mouse button to copy the source code and display content, here is not explained. A description of the DOM look at the section on the DOM structure, and the two are the same. If you feel that the source code is too dense in the source area, you can open the show white space option on the Options menu, separating each source block with a blank line. If you want to see the comments for your source code, open the show Comments option on the Options menu.

here to remind you, in the HTML debug the correct source code and CSS, do not forget to copy the source and CSS changes to your code files, or your debugging results in the page refresh will be wasted. Remember. Remember.

<!--[if!supportlists]-->6, <!--[endif]--> view CSS Definitions

Switch the label in the second row of the Ribbon to "CSS", where we can view all the CSS definitions on the page, including the linked CSS file. The file selection button in the Ribbon allows you to select different files that contain CSS (Figure 6-1 red circle).

<!--[if!vml]--><!--[endif]-->

Figure 6-1

The definition of CSS is edited here no longer explains, this can refer to the HTML "Style" operation.

The Edit button feature is similar to the "edit" feature of HTML.

<!--[if!supportlists]-->7, <!--[endif]--> script debugging

Switch the label in the second row of the Ribbon to "script," where we can debug all the scripts in the page, including the linked script. As with CSS, you can choose a different script file from the File selection button.

If you want to set a breakpoint in the script, you can click the blank area next to the line number, and a red dot indicates that the breakpoint is set here (Figure 7-1), and when the script runs it stops running and waits for your action. Switch the tab to "breakpoints" in the small window on the right to see all the breakpoints we set (Figure 7-2), click the checkbox in the upper-left corner to make the breakpoint ineffective, or click the delete icon in the upper-right corner if you want to remove the breakpoint. All breakpoints can be temporarily banned through the Disable all breakpoints on the Options menu, and remove all breakpoints removes all breakpoints. Right-click on the red point of the breakpoint marker to also set the breakpoint condition to stop the execution of the script when the condition is met.

<!--[if!vml]--><!--[endif]-->

Figure 7-1

<!--[if!vml]--><!--[endif]-->

Figure 7-2

Now let's try the breakpoint function. First, in the test page script, add a function with test, the main operation of the function is to run a 1000-time loop, the loop parameter values are displayed in the "Div2":

function Test () { for (Var i=0;i<1000;i++) { document.getElementById (' Div2 '). innerhtml=i; } }

Add an "onclick" attribute to "Div2" and execute test after click:

<div id= "div2" onclick= ' Test () ' > Square two </div>

Refresh the page, and then set a breakpoint on the line "for (Var i=0;i<1000;i++) {", set the condition to "i=100" (Figure 7-3), and then click Div2 to begin executing the function test.

<!--[if!vml]--><!--[endif]-->

Figure 7-3

When the script stops, we move the mouse over the variable "I", and a small box appears with a value, which is the current value of the variable "I" (Figure 7-4). You can use this method to easily understand the value of the current variable while the script is being debugged. You can also view the value of "I" Through the "Watch" tab of the right window (Figure 7-5).