Debug the web page in the browser (1): Introduction to debugging tools

I believe many people have encountered the following problems:
To adjust the width or height of an element on the page to the most suitable value, modify css or html in the ide and refresh the browser. Repeat the preceding modification steps no less than 20 times;
To modify html, first modify it in ide and then refresh the browser. Repeat the preceding steps for no less than 10 times.
To obtain a variable in javascript execution, the alert function is called many times in javascript;
To monitor the mouse event, create a div and write some html in the div using javascript;
More questions...
If you encounter any previous problems, this article will help you solve all the above problems, so that you can devote more energy to other work.
This article is divided into three parts: The first part: introduction of debugging tools, detailed introduction of various popular browser debugging tools; the second part: Use of firebug; the third part: use of ie debugging tools.
 
If you need to solve the problem above, we have to introduce our main character firebug (homepage ). Firebug is the most powerful and widely used development plug-in of firefox.
Firebug installation (firefox)
Enable Logging in firefox.
 
Firebuglite installation (non-firefox browser)
Firebug is also available in other browsers (such as IE6 +, Firefox, Opera, Safari and Chrome ).

It is very easy to use. download the latest version of Firebug Lite 1.3. Add:
Js Code
<Script type = "text/javascript" src = "/local/path/to/firebug-lite.js"> </script>
 
Firebug enabling and interface Introduction
In Firefox, right-click any part of the page and select "view element" in the pop-up menu. Alternatively, you can find the firebug startup button in the toolbar in the lower right corner.

Firebug page in Firefox:

UI of firebuglite in IE:

 
Other debugging tools:
Firefox, Opera, Safari, and Chrome vendors provide their own web debugging tools, which are similar to firebug interfaces and operation methods.
IE also has its own debugging tool, IEWebDeveloper. However, its functions are much weaker. It needs to be installed independently in ie6 and 7, while ie8 and ie9 are integrated, it is called "Developer Tools ". After the page is refreshed, manually click the 4th button to refresh it.

Author: "Original Professional blog, share your bit by bit"