JS Web Development Debugging Tool: Firebug Download _ Basic knowledge

In the rice with the blog to see about the introduction of Firebug, so download a trial, is indeed a better tool.

First, the effect

Second, main function

• Inspect and edit HTML
• Tweak CSS to perfection
• Visualize CSS Metrics
• Monitor Network activity
• Debug and Profile JavaScript
• Quickly Find Errors
• Explore the DOM
• Execute JavaScript on the fly
• Logging for JavaScript

For web developers, it's easy to get the information they want: HTML, DOM, CSS, JS, and even download time for individual files.

Just tested JS debugging function, very convenient, you can set breakpoints, the mouse moved to the variable name, you can get the corresponding value of the hint. That's great!

Third, non-Firefox browser solution: Firebug Lite

For non-Firefox browsers, Firebug also has a corresponding solution-firebug Lite, which outputs error messages to the Firebug console by using Console.log ().

1. Download Firebug Lite

Download Address: Http://getfirebug.com/releases/firebuglite1.0-b1.zip, extract to Web directory, such as/js/firebug/.

Add the following code to the page:

1. <script language="javascript" type="text/javascript"  
2. src="/path/to/firebug/firebug.js"></script>

If you don't want to install Firebug Lite, just to avoid JavaScript errors, click here to download the firebugx.js and copy it to the code.

The code for this file is as follows:

2. If (! ("console" in window) | |! ("firebug" in console))
4. {
6.     var   Names = [ " log " , " Debug , " info " , " warn " , " error , assert , " dir " , " dirxml " ,
8. "group", "groupend", "time", "timeend", "count", "trace", "profile", "profileend "];
12. window. Console = {};
14. for (var i = 0; I < names. length; + +i)
16. window. Console[names[i]] = function() {}
18. }

2. Use of Firebug Lite
By default, when you open a page, you can press F12 to open the Firebug console, and if you do not want to press F12 frequently to enter the debug state, you can add debug= "true" on the HTML element as follows:

3. Use the command line

Firebug also contains a command-line program that you can use the following shortcut keys Ctrl+shift+l (or⌘+shift+l on Mac)

4. Test page
Press F12 or ctrl+shift+l to see the effect.