Js WEB development and debugging tool: Firebug download _ basic knowledge

Js WEB development and debugging tool: Firebug download

I saw an introduction to Firebug in the MI Sui Blog. I downloaded and tried it for a while. It is indeed a good tool.

I. Results

Ii. Main Functions

• Inspect and edit HTML
• Tweak CSS to perfection
• Visualize CSS metrics
• Monitor network activity
• Debug and profile JavaScript
• Quickly find errors
• Lead e the DOM
• Execute JavaScript on the fly
• Logging for JavaScript

For WEB developers, they can easily get the desired information: HTML, DOM, CSS, JS, and even the download time of each file.

Just tested the debugging function of JS, which is very convenient. You can set a breakpoint and move the cursor over the variable name to get a prompt for the corresponding value. Great!

Iii. Solution for non-Firefox browsers: Firebug Lite

For non-Firefox browsers, Firebug also has a corresponding solution-Firebug Lite, which outputs error information to the Firebug console by using console. log.

1. Download Firebug Lite

: Bytes /.

Add the following code to the page:

1. <Script Language="Javascript" Type="Text/javascript"
2. Src="/Path/to/firebug. js"> Script>

If you do not want to install Firebug Lite, just to avoid Javascript errors, click here to download firebugx. js and copy it to the code.

The code for this file is as follows:

1. If (!("Console" In Window)|!("Firebug" In Console))
2. {
3. Var Names=["Log","Debug","Info","Warn","Error","Assert","Dir","Dirxml",
4. "Group","GroupEnd","Time","TimeEnd","Count","Trace","Profile","ProfileEnd"];
6. Window.Console={};
7. For (Var I=0;I<Names.Length; ++I)
8. Window.Console[Names[I]=Function() {}
9. }

2. Use Firebug Lite
By default, after opening the page, you can press F12 to enable the Firebug console. If you do not want to press F12 frequently to enter the debugging status, you can also add debug = "true" to the HTML element ", as follows:

3. Use the command line

Firebug also contains a command line program. You can use the following shortcut key Ctrl + Shift + L (or lower + Shift + L on Mac)

4. Test page
Press F12 or Ctrl + Shift + L to see the effect.