Firebug debugging experience and skills

Document directory

• 1. View and edit HTML elements and CSS
• 2. How to view dynamically generated HTML code
• 3. view the function execution efficiency on the/test page
• 4. Use firebug to view XMLHttpRequest
• 5. View All CSS and JS on the page
• 6. view the list of all resources on the page
• 7. Use firecookie to debug the page cookie

If you are not familiar with it, click here to see what firebug is. To put it simply, firebug is an extension tool used on Firefox to monitor, edit, and debug the site's CSS, HTML, Dom, and JavaScript.

We first download the latest version installed on the firebug homepage and start debugging below:

1. View and edit HTML elements and CSS

After installing firebug, you can click the bug in the lower-right corner of the browser to open firebug,

Or press F12 directly. To open the window, press Ctrl + F12.

After opening firebug, click "View" and select any area on the page to be edited. firebug selects it and highlights it in the HTML structure,

Then, you can edit the HTML structure and attributes of the element. The modified effect is displayed on the page in real time.

At the same time, on the right of firebug, there is the CSS style corresponding to this element, such:

The style in the figure shows the style inheritance relationships that the element has been redefined, such as "inherited from body. the "text-align" attribute of curhome is "inherited from Div. shell overwrites "text-align", and the original attributes are displayed in the form of a hyphen. To view all the attributes, check the option marked "1" in the figure.
Click "2" to disable/open a CSS attribute. Click any attribute or attribute value to edit CSS, such as "3 "; double-click "4" to create a CSS attribute. Now, click "5" to see the CSS layout panel:

The above figure shows a standard box model of the HTML structure. You can click the corresponding value to modify the value and display the corresponding effect in the browser window.

2. How to view dynamically generated HTML code

Through the "view source code" method, you cannot see the HTML structure dynamically generated by JS. Here we can view it through firebug. For example, select the "body" node and press "edit ", you can output the source file code and dynamically generated code on the page.

Another simple method is to select the page element you want to view, and select "View selected source code" from the right-click menu"

3. view the function execution efficiency on the/test page

By viewing the execution efficiency of all functions on the page, you can easily find the slowest function to help WD perform JS Optimization on the page ., Enable console for the page to be debugged ":

Click "Overview" to start collection. Click again to stop and view the information.

At the bottom of the firebug console is a line of command lines. Here you can enter any JS statement and press the Enter key to execute:

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:

4. Use firebug to view XMLHttpRequest

Using firebug to view XMLHttpRequest is helpful for Ajax debugging.

Enable the "network" monitoring function for the site to be debugged. In fact, this function allows you to view all types of Post and get requests on the page, and displays the time consumed by the requests. XMLHttpRequest has detailed parameters and return values.

5. View All CSS and JS on the page

During page debugging, we found that it is difficult to debug CSS and JS externally referenced. This problem can be solved by using the yslow Extension Based on firebug. First download the latest version installed on the yslow home page: http://developer.yahoo.com/yslow/

Yslow is on the right side of the firebug bug, and the following value is the time consumed for the current page to fully load. Click yslow to open it (or through the yslow panel of firebug, run "performance" for PAGE analysis ).

For example, after "All JS" is selected, all internal JS and external JS on the current page will be displayed in a new page, in this way, it is much easier to view all the JS source code on the page.

6. view the list of all resources on the page

In fact, the "network" function introduced in the fourth part can view the list of all resources, and the corresponding optimization can be performed by viewing the status (for example, checking the 404 element ). Here, we can see the list of resources including types and detailed paths through the components function of yslow:

You can see the corresponding thumbnail with the mouse hover, and click it to open it in a new window. For more yslow functions, see its home page.

7. Use firecookie to debug the page cookie

Firecookie is a cookie debugging tool based on firebug. You can go to the author's homepage to learn more and download an installation tool.
Http://www.softwareishard.com/blog/firecookie/
After installation, a "cookie" panel appears in firebug. You can add, delete, and modify cookie information for pages to be debugged.

Firebug is a debugging tool that can improve the efficiency of WD. I hope everyone can use it. For more information about firebug:

• Firebug-based Firefox extension
• Firebug video tutorial
• Firebug Console