FireBug graphic explanation

Firebug is a plug-in firefox that can debug all Website Languages, such as HTML and CSS. But what attracts me most is the javascript debugging function, which is very convenient to use, it can also be used in various browsers.

Firefox has six main menu options: console, HTML, CSS, script, DOM, and network. Firebug analyzes the details of the Web page from different perspectives, the combination of the above functions can meet the requirements of web design.

Firebug plug-in expansion illustration

1. console functions:

After this label is enabled, the interface is as follows:

Purpose: display all types of error information on the webpage and print the logs.

Features:

Error details: displays javascript errors and warnings on the current page, and prompts the wrong file and line number for debugging.

View the AJAX black screen: When debugging Ajax, You can see parameters, URLs, http headers, and feedback for each XMLHttpRequests request post. The programs originally operated behind the scenes are displayed.

View running information: You can view the variable content and runtime information in JAVASCRIPT.

View the log of the script: Firebug logs are output in multiple formats and syntaxes. You can also customize the color output, which is obviously more convenient than the monotonous alert.

2. HTML Functions

After this label is enabled, the interface is as follows:

Purpose: This function is used to view the source code of the current page. It can be edited and displayed from time to achieve the best page effect.

Features:

Clear structure: formatted HTML code, with a clear hierarchy, you can clearly define the subordination between tags,

The DOM hierarchy is identified to clearly list the parent, child, and root elements of HTML elements. In combination with the CSS viewer, see the DIV + CSS on the Analysis page of the border.

Direct modification and real-time display: You can directly modify the HTML source code in the HTML viewer, And the browser will immediately see the modified effect.

Highlight page content change: If the HTML page element style or background color is changed, it is highlighted in yellow.

WYSIWYG: With the Inspect check function, you can select a block of the page with the mouse to view the corresponding HTML source code and CSS style sheet.

3. CSS Functions

After this label is enabled, the interface is as follows:

Purpose: Today, most web pages use CSS + DIV, where DIV can streamline HTML code and CSS is used to control page styles. CSS label, used to view all CSS definition information, and editable to modify the page style.

Features:

List the subordinate inheritance relationships of each CSS style table from bottom to top.

In this viewer, you can directly add, modify, or delete some CSS style sheet attributes, and view the modified results on the current page.

Typical application: Move pixels as needed.

Smart tip: You can use the up and down arrow keys to view the attribute values of common style sheets.

Firebug details: click here
Firebug: click here

Nginx + Firebug allows the browser to tell you which Server Load balancer distributes requests

1 2 Next Page