How to install and use IE plugin Debugbar

Debugbar plug-in is a powerful IE plug-in, users can analyze the interior of the Web page from various angles, including page detail code, CSS style sheet, all links, all the picture code, script information and so on, whether you are programming prawns or it is new and suitable for use. The following small series for you to introduce the IE Plugin debugbar Chinese version How to install and use.

First, Debugbar plugin introduction:

Debugbar is a powerful IE plug-in, similar to the Firefox browser of a development class plug-in Firebug. Analyze the detail level inside the Web page from different angles, and bring great convenience to the web developer.

Currently free for individual users. Enterprise user fees.

The main features are:

1. View Web page Dom tree, HTTP (S), Web page JavaScript script function collation display. The framework in the Web page. Details of the page properties.

2. Provide the Web page source code and IE after the collation of the comparison.

3. The page can be displayed at different resolutions without changing the display resolution. And the page can be scaled.

4. function to color any position and copy the hex code to the Clipboard for easy preservation.

5. You can send the current page through the mailbox.

Second, Debugbar plug-in download and installation:

1, download the plugin,: Http://rj.baidu.com/soft/detail/17282.html?ald.

2. After the download is complete, unzip to any location, double-click to start the installation, as shown in:

Figure One: Mounting stickers (1)

Figure Two: Mounting stickers (2)

Figure Three: Select the installation location

Third, the use of Debugbar plug-in text description:

PS: Experimental Tool IE6.0, the experimental website guarding god http://www.huweishen.com/.

1, how to enable the Debugbar plugin on the browser: Open IE6, click "View"-"toolbar"-"Debugbar", OK.

Figure IV: Browser-enabled Debugbar plugin

2. View the DOM details of the Web page: Click on the Dom tab in the Debugbar v5.4.1 plugin bar and use this option to learn more about the structure of the Web page, which is ideal for beginners to learn and study.

1) Document Tags: view the document label information we can clearly see the code layout of the site, mainly divided into head and body two major categories

Figure V: View the source code of the page

2) Link tag: Here we can see all the hyperlinks and codes used by the website.

Figure VI: View page hyperlinks

3) Image tag: View this tab we can already clearly see those parts of the site are inserted images, because some sites he seems to be a picture, may be the style of their own settings may be written in JavaScript code, using this option can be clearly identified.

Figure VII: View page picture information

4) Form Tags: using form labels We can view all the forms in the Web page to protect God's website as shown in the following example:

Figure Eight: View page form Information

5) Style sheet Tags: programmers know that we generally use CSS stylesheets when writing Web pages, which makes the code cleaner and more convenient to write code, as shown in a glance at the CSS style sheet for the Guardian site.

Figure nine: View page CSS style sheet

3, generally for the Web page to achieve more features, we will add functions and so on the Web page script, if you want to view, click on the Script option, you can clearly see.

Figure 10: Viewing script information

4, the use of the Htmlcheck option: In fact, this option is especially suitable for programmers when debugging the site, using it can see the page error and warning details.

Figure 11: Viewing warnings and errors in Web pages

5, the last option is information, he is to make a summary of the Web page information, including the page address, encoding, protocol and so on information.

Figure 12: Viewing Web page details

Debugbar is actually a very interesting plug-in, he is not only suitable for programming experts directly in the page debugging View code, but also convenient and programming new people learn from, quickly everyone download a use research it!

How to install and use IE plugin Debugbar