Dojo Section I: Learn to use Firebug to adapt Js,dojo

Content Summary:

Learn to use the basic functions of Firebug

1. Brief introduction: Firebug is a plugin of Firefox, used to adjust the JS code tools.

(Official nonsense: Firebug is a plugin under Firefox, can debug all the website language, such as HTML,CSS, but Firebug most attracted me is the JavaScript debugging features, very convenient to use, and can be used in various browsers (IE, Firefox,opera, Safari). In addition, other functions are also very powerful, such as Html,css,dom's view and debugging, the overall analysis of the website and so on. In short, a complete set of powerful Web development tools. Then there is the software that is open source. ）

2. Installing Firebug

First, click on the "Tools" option on the Firefox browser, then click on "Add Software" and in the small pop-up window, click on the "Get Extensions" option in the lower right corner.

In the second step, after clicking on the "Get Extensions" option, search for Firebug in the open page, and in the search results page, download Firebug. It is important to note that the version of Firebug is compatible with the version of Firefox. If you want to view your Firefox version, click the "About Mozilla Firefox" option under the browser's "Help" option.

The third step, install, restart the browser.

3.Firebug Debug function

Shortcut key One: When you enter Document.get, press the TAB key can be completed as document.getElementById, very convenient. If you think it's not enough, press Shift+tab and you're back to the original.

Shortcut key two: directly in the browser input F12 can directly open the Firebug adaptation tool

Enter the text:

Function one, the use of the Console window. In addition to displaying the page-loaded files, the Console window can also display code errors and some output information directly from the page.

The Console window outputs debugging information. The debug statements supported by Firebug are more commonly used by Console.log.

Like what:

Console.debug ("I am Debug"); Console.info ("I am Info"); Console.warn ("I am warn"); Console.error ("I am Error");

Readers with Javascript experience may be accustomed to using the alert() output of debugging information, but I think the output of debugging information in the Console window is a better choice. First of all, if the page has a lot of alert() , then click "OK" to let the pop-up box disappear is also a very annoying thing. Second, if the amount of debugging information is very large, then alert() the pop-up window will not be able to display the full debug information. Next, alert() You cannot view details about objects and arrays. Finally, if used in a loop alert() , it can easily cause the page to "die".

Function Two, the use of HTML windows. You can view the source code of the page in the HTML window. In addition to viewing the page's source code, you can edit the page directly using Firebug's editing capabilities.

In the HTML window mode, click the Edit button to toggle the viewing mode to edit mode. It is important to note that before using Edit mode, it is advisable to select the body code block of the page in advance.

In the Edit mode, it is important to note that after the new code is added to the page, you need to click anywhere else on the page, the effect will be loaded on the page.

Function three, style,layout,dom three window in HTML mode

In HTML window mode, as opposed to the HTML window, there are style,layout,dom three windows on the right side of the page that are used to view the relevant properties of the corresponding portion of the pages. When a part of the page is selected, the Style displays the CSS properties of the selected section, Layout displays the CSS's box model, and the DOM displays all the DOM objects in its selected section. With the Inspect feature, you can easily select the parts of the page that you want to focus on.

Function four, use of Script window. The Script window supports debugging breakpoints for Javascript.

Function Five, the use of DOM windows and Net windows. The DOM window primarily shows all the objects in the page, and the properties and methods they contain. Net window is primarily to show the size of each file loaded in the current page and the time it takes to load individual files.