Firebug advanced usage-powerful web development tool

Firebug is a Firefox plug-in and a powerful tool for web development. Download from here. After the tools are used, the development efficiency can be greatly improved. The following describes some usage:

View and edit HTML and CSS, and view dom

Two Methods: one is to open firebug in a new window, and then move the cursor to an element of firebug. Some elements on the page are highlighted accordingly, and the corresponding CSS, Dom, and layout are displayed on the right. The second method is to right-click an element on the page and select "view element" to directly open firebug and locate it.

Monitor website and webpage access speed and time consumption

First, open the "network" console,

Click "network" to monitor and analyze the access speed and time ratio of websites and webpages. You can also view all the loaded resources (CSS, JS, images, Flash, etc.), click the corresponding filter to classify them, or use the search function.

View function execution efficiency

Enable the console, click "Overview" to start collection, and click "stop" again.

In addition, in the lower part of the window, enter the JS statement and press enter to execute it, which is very convenient.

View XMLHttpRequest

This is very helpful for debugging Ajax. Open the console.ProgramThe XMLHttpRequest monitoring function is automatically selected.

Debug JS on the page

Debug external JS

One way is to open the console first, click Js in it to open it, and then set the breakpoint, and continue running the website will stop at the breakpoint:

Set breakpoints and debug external javascript:

Other Methods: Use the yslow Extension Based on firebug, or install another Firefox plug-in: javascript debugger.

Run a JS section in the consoleCode

Using the console, you can also test the execution time of a piece of code or function. Click the red button at the far right of the command line to switch to the multi-line mode of the command line:

After the code is entered, click "run" below ".

Output object structure: console. dir:

Output the content of an HTML node in indent format: console. dirxml (anydomnode ):

Group output content: console. Group ()-console. groupend ()

Record a timestamp: console. Time (slugname)-console. timeend (slugname)

Video: 12 usage of chrome Developer Tools

Refer:

Effective Method for debugging JavaScript errors-using firebug

Why do I recommend chrome as a web developer?