Dojo Section 1: Learn to use firebug to adjust js, Dojo, and dojofirebug

Dojo Section 1: Learn to use firebug to adjust js, Dojo, and dojofirebug

Summary:

Learn to use the basic functions of firebug

1. Brief Introduction: Firebug is a Firefox plug-in used to adjust js Code.

(Official nonsense: Firebug is a plug-in firefox that can debug all Website Languages, such as Html and Css. But FireBug attracts me most of the javascript debugging function, which is very convenient to use, it can also be used in various browsers (IE, Firefox, Opera, Safari ). In addition, other functions are powerful, such as viewing and debugging html, css, dom, and overall website analysis. In short, it is a complete and powerful WEB development tool. Then it is open-source software .)

2. Install Firebug

Step 1: click the "Tools" option on the Firefox browser, and then click "additional software". In the small window that appears, click "Get extension" option in the lower right corner.

Step 2: After you click "Get extension", search for Firebug on the displayed page and download Firebug on the search result page. It should be noted that the Firebug version should be compatible with the Firefox version. To view your Firefox version, click "about Mozilla Firefox" under "help" in the browser.

Step 3: After installation, restart the browser.

3. Firebug debugging

Shortcut Key 1: After you enter document. get, press the tab key to fill in document. getElementById, which is very convenient. If you think the completion is not ideal, pressing shift + tab will restore the original state.

Shortcut Key 2: Enter F12 in the browser to directly open the firebug adjustment tool.

Enter the body:

Function 1: Use of the Console window. In addition to the files loaded on the page, the Console window can also directly display code errors and some output information on the page.

Output debugging information in the Console window. The debugging statements supported by Firebug are usually console. log.

For example:

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 usingalert()Debugging information is output, but I think it is a better choice to output the debugging information in the Console window. First, if there are manyalert()Click "OK" to make the pop-up box disappear. Second, if the debugging information is largealert(). Next,alert()You cannot view the details of objects and arrays. Finally, if you usealert(), It will easily cause the page to "die ".

Function 2: Use of HTML windows. You can view the source code of the page in the HTML window. In addition to viewing the source code of the page, you can also use the Firebug editing function to directly edit the page.

In the HTML window mode, click the Edit button to switch the view mode to the Edit mode. Before using the Edit mode, you are advised to select the body code block of the page in advance.

In the Edit mode, note that after the code is added to the page, you need to click somewhere else on the page to load the effect on the page.

Function 3: Style, Layout, and DOM windows in HTML Mode

In HTML window mode, corresponding to the HTML window, there are three windows on the right of the window: Style, Layout, and DOM used to view the relevant properties of the page. When a part of the selected page is selected, Style displays the CSS attributes of the selected part, Layout shows the CSS box model, and DOM displays all DOM objects of the selected part. With the Inspect function, you can easily select the content to be taken into account on the page.

Function 4: Use of the Script window. The Script window supports breakpoint debugging for Javascript.

Function 5: Use of DOM windows and Net windows. The DOM window displays all objects on the page and their attributes and methods. The Net window displays the size of each file loaded on the current page and the time it takes to load each file.

How to introduce dojo in firebug

You can use FireFox to open dojo in firebug and debug it. There is no concept of "Introducing dojo in firebug.

Two JS frameworks (DOJO and EXTJS)

It is really difficult to distinguish between advantages and disadvantages...
I don't know the original intention of asking this question. If you can choose the high-level framework of the product, Dojo is free of charge. This advantage is huge unless you do not consider legal issues.
If you are a developer and want to learn a course for dinner, either of them will be okay, because you don't know what the next company uses, right? In addition, if you want to select which one to choose, you should first learn jQuery. On the one hand, it is very likely to be used in actual projects, such as dojo + jQuery, extjs + jQuery. This combination is very common, in addition, jQuery learning can help you understand the core concepts of the JS framework.
Personally, I prefer dojo, not to say that dojo is better than extjs, because my work environment requires me to use dojo, so I use it. After using it, I feel quite good, it is better than not. The only drawback of dojo is that almost all useful materials are in English... more Dojo is used in foreign countries. Some people in China say ExtJs. This is to be verified.
The biggest advantage of dojo is that it is truly open-source and supports several large companies. Therefore, although it is free, the code quality is indeed good and the update speed is relatively fast, two major versions have been updated this year, from 1.5 to 1.6 and then to 1.7. Currently, many of the strong frameworks are useless because they all have problems. If the update efficiency is poor, after all, it is a failed product, and dojo does not end up looking bad at the moment.