IE8 "Developer Tools" Usage Details (menu details at all levels)

Document directory

• You have not installed IE8 yet?
• Understanding of "Developer Tools"
• [File] menu
• [Search] menu
• Disable menu
• [View] menu
• Outline menu
• [Image] menu
• Cache menu
• Tools menu
• [Verification] menu
• Coming soon

IE8The official version has been released. In this article, I will not give any comments about Chrome's JavaScript running capability as IE8.15 times "and what" IE8"Page rendering speed is 2.456 times that of Safari.The Anti-Rape capability is 1.235 times higher than that of FireFox. Who is better than me? I only know that when Windows 7 is released, IE8Browser market share will make front-end developers unable to say: "You don't have to worry about IE8.Few people are using it ". Therefore, this article will be very pragmatic, IE8May be the only"Developer Tools". At the same time, we will extend some relevant materials and knowledge. Therefore, Please discard your IE8To be patient.

You have not installed IE8 yet?

If you are a front-end developer, please install it. Because the official version has been released. Different from the previous beta version, this time we have to pay attention to it. Download and install one. The following is --

Internet Explorer 8 Chinese Version Download list

Windows
XP

Windows Vista
Windows
Servers 2003

Windows Server 2008

Windows XP 64-bit

Windows Vista 64-bit

64-bit Windows Server 2003

64-bit Windows Server 2008

Internet Explorer 8 (English version) download list

Windows
XP
Windows
XP 64 Bit
Windows
Vista
Windows
Vista 64 Bit
Windows
Servers 2003
Windows
Server 2003 64 Bit
Windows
Servers 2008
Windows
Server 2008 64 Bit

 

Oh, maybe you will worry that IE6 or IE7 in your system is finished. Well, indeed, this is possible. However, you can try the following tools. It allows multiple versions of IE to coexist --

IETester
SuperPreview (download), a powerful tool for Microsoft Web development and debugging)

Understanding of "Developer Tools"

Although it has changed its trendy name, it is not a new one. Its predecessor is "IEdevtoolbar ". However, it used to be a plug-in for IE. In IE8, the browser has automatically integrated this feature, which not only changed the name but also enhanced the functionality.

The developer tool can be called either under the IE8 tool menu or by clicking the F12 shortcut.

Detailed use of IE8 Developer Tools

Before we talk about it, let's talk about what it can do? If you just use a browser to browse the website, you don't have to worry about how the page is made. So I think you can leave this page.

In general, developer tools are designed for front-end developers to develop pages. Provides a series of gadgets that allow you to easily search for page bugs, including html code, css code, and JavaScript code. At the same time, he also provides some small tools, such as color and screen ruler, that are cool but cool.

OK, we have seen it and know what it can do. Let's introduce it one by one based on the menu order --

[File] menu

IE8 Developer Tools [file] menu

[Withdraw all]

Previously, all operations performed in the developer tool were canceled and the page and DOM structure were refreshed.

[Custom Internet Explorer attempt source]

[Attempt source] is a real term. The common saying is: "What editor is used to view webpage source files ". For example, EditPlus is used.

[Exit]

In order not to insult your IQ, I will not say that much. Well, F12 is a parity shortcut. Let's mention it by the way.

[Search] menu [Click Select element]

The shortcut key Ctrl + B is the same as clicking the ICO button in the figure. The most common functions. It is also a parity switch. When you click an element on the page, the modified element is selected and the DOM structure and CSS style of the modified element are listed.

For example, the figure above. The Left area shows the DOM information of this hyperlink element. You can clearly see its parent element, child element, and sibling element.

The area on the right shows the element style information. The selected style indicates that the style is no longer effective because of its low priority. During debugging, the previous check box can be used to remove the style. In addition, the attributes of each style can be modified immediately after you click it. This allows you to instantly see the modified page effect, which is very convenient.

Friends who have used FireBug in FireFox will be familiar with this. The difference is that FireBug only sorts low-priority styles at the bottom.

The tracking style view and the style view have the same functions. They are used to view the style information of the selected element. The difference is that it is changed to a view. Which view do you like.

The Layout View displays the boxed model information of the selected element. Although it can display more information than FireBug, I still like FireBug's direct display on the page with color blocks.

Attribute view displays the attributes of the selected element. Fortunately, you can immediately add or delete some attributes for Quick Page debugging.

Oh, right. It should be noted that, whether you modify the style or attribute of the selected element in the developer tool, they are all temporarily debugging and will not be modifying the source code of Your webpage.

Disable menu

Script]

Page JavaScript or VBScript scripts are prohibited. Why disable it? To test the page robustness. Some customers with high page design requirements will ask: "If the user disables the script, can this page still be used ?" Well, yes, this function is used to test the abnormal needs of these male customers.

[Pop-up window blocking program]

The filter in the pop-up window. Which is used to test the "how can I filter out my pop-up window for browsers or security software ."

[CSS]

"CSS streaking Festival" is coming! Use this to test your webpage's posture when CSS is streaking. This is also an important test of page robustness and accessibility. Although there are not many blind people who will visit webpages in China.

[View] menu

IE8 Developer Tools [view] menu

Class and ID information]

The shortcut key is Ctrl + I. After opening the page, you will see the page filled with dense red color blocks. The class name or ID is displayed. Yes, this is the effect of viewing the class and ID information. But to be honest, who will be interested in this red stool? Not only does the page look like a patch-filled beggar server, but it is completely invisible-_-B...

[LINK path]

Same as above. It will show all the hyperlinks on the page in red and show their link addresses.

[LINK Report]

Using the link report function, the developer tool will help you generate a link report for this page. Contains information such as the number of links, link addresses, and whether a new window is opened. But what is the purpose of this. I don't know.

Tab Index]

Highlight all elements that contain the tabindex attribute. You can set the tabindex attribute to change the sequence in which the page elements obtain the focus.

[Access key]

Highlight all elements that contain the accesskey attribute. Set the accesskey attribute to set the shortcut key for the element to get the focus.

Source File: "element source with style"

Generate a copy containing the selected element style, HTMLCode, the source file of the webpage-level information.

This command is valid only when an element is selected. The generated source file is only related to the selected element.

[Source file]: "DOM (element )"

The shortcut key is Ctrl + T. Generate a source file. This source file only contains the DOM structure information of the selected element. Friends who have used FireBug can think of the "Copy element HTML code" command. Actually, this is similar to that. This is only generated to a window, and FireBug is directly copied to the clipboard.

[Source file]-"DOM (PAGE )"

Press Ctrl + G. Generate a source file. This source file contains the DOM information structure of the entire page. It is a very tricky function. I don't know if it is because of a bug. This function is actually "view web source code ". Because the generated Source Code not only contains DOM information, but also CSS and script information.

Source File: "original state"

The function is actually "view web page source code ". You should like to right-click the page and click it on the webpage.

Outline menu

The outline menu clearly outlines the elements that meet the conditions for display.

Table Cell]

Is to use the cells in the form tableOrange LineBox. Let you know -- oh. It turns out to be the table cell.

Table]

Is to use formOrange LineBox. Let you know -- oh. This is the form.

[DIV element]

Is to use all the div elements in the pageGreen LineBox. Let you know -- oh. These are all div elements.

[Image]

Is to use all the img elements on the pagePurple LineBox. Let you know -- oh. These are all img elements.

[Any element]

This is strong. You can customize any labels and wireframes of the colors they will use. Click this menu to bring up the following dialog box. Very simple. I will not explain it again.

"Relative" of [positioning element"

YesGreen LineAll elements with the position: relative style.

"Absolute" of [positioning element"

YesBlack LineAll elements with the position: absolute style.

"Fixed" of [positioning element"

YesBlue LineAll elements with the position: static style.

"Floating" of [positioning element"

YesYellow LineAll elements with float styles.

Clear outline]

You can use this command to clear all the lines when your page has been made by lines of various colors like an Excel table.

[Image] menu

Obviously, this command controls various images on the page.

Disable Images]

In order not to insult your IQ, This is not to mention. The only thing to note is that not only the img element, but also the background image of the element is disabled.

[Display image size]

Very good features. You can quickly know the size of each image without looking at the image properties. Of course, the unit is pixel.

[Display image file size]

Very good features. You can quickly know the file size of each image without viewing the image properties. Of course, the unit is byte.

[Display image path]

Very good features. You can quickly know the URL path of each image without viewing the image attributes, and copy the image.

Show Alt text]

The text of the alt attribute of the img element is displayed. By the way, alt in images must not be stacked with keywords. Otherwise, it is easy to be regarded as SEO transition optimization.

[View image reports]

Generate a detailed image report for page modification. Contains detailed information about each image.

Cache menu

IE8 developer tool [cache] menu

Menu groups for managing cache and cookies. This will be a very pleasant feature for developers.

[Always refresh from the server]

It seems like a very advanced command. In other words, "browser cache is prohibited ".

Clear browser cache]

Press Ctrl + R. I just simplified the previous steps.

I don't know. You have noticed that the "Clear browser cache" menu is not followed by three points. Click this menu to confirm the dialog box.

Clear the browser cache for this domain]

Press Ctrl + D. Nothing to say, just clear the browser cache in this domain.

Disable Cookie]

There is no benefit. No more cookies.

Clear session Cookie]

Clear all cookies in the browser. Your forum and community are waiting to log on again.

[Clear domain cookies]

Only the cookies in the current domain are cleared.

[View Cookie Information]

View the Cookie information on this page. Do not think about it. You cannot get the password.

Tools menu

Some useful tools provided by the developer tool, although a little weaker than other specialized tools. However, emergency response is sufficient.

[Resize again]

Very useful gadgets. You can quickly adjust the browser window to the relevant size. In this way, it is much easier to test the resolution compatibility of webpages.

Display ruler]

A simple ruler tool. It can be used to measure length, distance, and other information. The color of the line can be changed. You can also create multiple scales. You can useMagnifiersFunction.

[Display color selector]

A simple color collection tool. Click the mouse to select the color. However, I recommend another tool, "My work toolkit-color capture tool (ColorPic)", which is too simple for developers.

[Verification] menu

It will surely cause a storm in the rivers and lakes (Thank you, Mr. Xiao Qi, for reminding me of this idiom that I suddenly forgot. Alas ~ Maybe there are few martial arts novels recently. But I don't know why it seems like I'm familiar with the idioms such as "Jiao Chuan Lian. In the near future, countless Kong Yiji will be created.

[HTML]

Verify the HTML code of the page. This page is sent to the w3c html verification tool and a verification report is obtained.

[CSS]

Verify the CSS code of the page. This page is sent to the w3c css verification tool and a verification report is obtained.

[Source]

Verify the source code on the page. This page is sent to the feedvalidator.org verification tool and a verification report is obtained.

[LINK]

Verify the link on the page. This page is sent to the w3c verification tool and a verification report is obtained.

[Local HTML]

Open the w3c html verification tool to verify the local page.

[Local CSS]

Open the w3c CSS verification tool to verify the local page.

Auxiliary Function: "WCAG list"

Verify the WCAG of the page (Web Content Accessibility Report-page Accessibility ). This page is sent to the contentquality.com verification tool and a verification report is obtained.

[Auxiliary Function]: "508th items list"

508 Standards on the verification page. This page is sent to the contentquality.com verification tool and a verification report is obtained.

[Multiple verifications]

At the same time, it verifies multiple specifications on the page.

Set verification dialog box for IE8 Developer Tools

For page verification, I would like to say: in fact, the page is not the same to go online only after verification? I personally feel totally unnecessary. If you are a student, lie in the ivory tower. You can freely toss your page, because you are the customer, you are the time, you are the pursuit of perfection. However, there is no need for commercial projects to waste valuable project resources for a "PASS. Because no customer cares, "You see, the page we made has been verified by w3c in many aspects ." If a customer really cares, I can only say that I really admire your "Flickering" capabilities.

Coming soon

This article has briefly explained the menus of the developer tools. I believe that you can simply use this powerful tool.

However, we have not mentioned more powerful functions yet. All. Please look forward to our next article. Next Article IE8 "Developer Tools" (Browser mode, text mode, JavaScript debugging, probe), we will explain in detail how to use the browser mode, text mode, JavaScript debugging, probe, and other functions. Thank you very much.