IE8 "Developer Tools" in detail (detailed menu at all levels)

The official version of IE8 has been released. This article will not be very IE8 to do what the evaluation, and then give what "chrome run JavaScript ability is 15 times times", what "IE8 page rendering speed is 2.456 times times Safari", what " IE8 's anti-rape ability is 1.235 times times higher than Firefox's, "The fucked-up conclusion." I don't care who is better than who? I only know: When the Windows7 release, IE8 browser market share will let the front-desk developers can not say: "Do not have to tube IE8, few people are using it." So, this article will be very practical to explain, IE8 may be the only developer to feel the kind of "developer tools." At the same time, we will extend some relevant information and knowledge. So, please abandon your prejudice to IE8, take a patient look down.

You haven't installed IE8 yet?

If you are a front-end developer, then please install this thing. Because the official version has been released. Unlike the previous beta version, this time we have to take a serious look at it. To download and install a bar, here is--

IE8 Chinese Download list windows XP
Windows Vista
Windows Server 2003
Windows Server 2008
Windows XP 64-bit
Windows Vista 64-bit
Windows Server 2003 64-bit
Windows Server 64-bit

IE8 Download list in English version of Windows XP
Windows XP-Bit
Windows Vista
Windows Vista-Bit
Windows Server 2003
Windows Server 2003
Windows Server 2008
Windows Server-Microsoft Bit

Well, maybe you'll worry that the IE6 or IE7 in your system are screwed. Well, yes, that's possible. However, you can try the following tools. It allows you to co-exist with multiple versions of IE-

Solution for Multi-version coexistence of IE--ietester
Microsoft Web Development Debugging Tool Superpreview (with download) know "developer Tools"

Although this thing changed the fashionable name, but it is not a new thing, its predecessor is "Iedevtoolbar". However, it was just a plugin for IE. And in IE8, the browser has automatically integrated this thing, not only changed a little turtle name, but also enhanced a lot of functions.

Developer tools can also be called from the IE8 Tools menu, or by clicking the F12 shortcut key directly.

IE8 Developer Tool Usage

Before we introduce it, let's start by saying what this thing can do. If you just use a browser to browse the site, don't worry about how the page is done. Then I think you can already leave this page.

In general, developer tools are tools designed to develop pages for front-end developers. Provides a range of widgets that make it easy to find bugs in your page, including HTML code, CSS code, and JavaScript code. At the same time, he also provides some of the more chicken, but also can suck the taste of small tools, such as color, screen ruler and so on.

OK, we've seen it, and we know what it can do. So let's introduce it according to the order of the menu--hit

The File menu
IE8 Developer Tools "File" menu "Undo All"

All previous operations in the developer tools were canceled, and the page and DOM structure were refreshed.

"Custom Internet Explorer attempt source"

"Trying to source" is a fucking noun. The popular point is: "What editor to use to view the Web page source file." For example: I use the editplus.

Exit

In order not to insult your IQ, I will not say more. Well, F12 is a parity shortcut, which by the way.

Find Menu click Select Element

Shortcut key Ctrl+b, and click the image in the same mouse as the ICO button effect. The most commonly used feature. is also a parity switch. When you click on the element on the page with the mouse, the element is selected, and the DOM structure, CSS style, and other information of the element are changed.

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

The area on the right shows the change element style information. The style that is crossed out by the line indicates that the style is no longer functional because it is not high priority. When debugging, the front hook can be hooked off, when the hook off means forcibly delete this style. Also, the properties of each style can be modified immediately with the mouse click. It is very convenient to see the modified page effect instantly.

Using Firefox's firebug friends, this must not be unfamiliar. The difference is simply: Firebug is the lower priority of the style is arranged below, only that.

The Trace styles view and the style view are the same, and are used to look at the style information for the selected element. The difference is just: it's a different view way. What kind of view you are accustomed to depends on your own preferences.

Layout view to display boxed model information for the selected element. Although more information can be displayed than Firebug, I prefer to show it in Firebug directly on the page with color blocks.

The Properties view allows you to view the property information for the selected element. It is very pleasing that you can immediately add or remove properties to quickly debug the page.

Oh, that's right. It is important to note that whether you modify the style or properties of the selected elements in the developer tools, they are temporarily debugged and will not be modifying your Web page source code.

"Disable" menu "script"

The use of the page's JavaScript or VBScript scripts is prohibited. Why do you want to disable it? To test the robustness of the page. Some customers who have higher requirements for page design will ask, "If the client disables the script, can this page be used?" "Well, yes, this is a function to test the perverted needs of these fucking clients."

"Pop-up Blocker"

The filter for the popup window. Used to test which "how do I get the browser or security software not to filter out my pop-up window." ”

"CSS"

"CSS Bare-ben Festival" came! Use this to test your page's posture in the CSS bare-ben. This is also an important test to verify the robustness and accessibility of the page. Although, there are not many blind people who will visit the web in China now.

"View" menu
IE8 Developer Tools View menu class and ID information

Shortcut keys are ctrl+i, parity switches. When you open it, you'll see a dense patch of red color on the page. The class name or ID name is also displayed. Yes, this is the effect of viewing the class and ID information. But honestly, who would be interested in this lump of red poop? Not only make the page look like a patched beggar's clothes, and completely unclear-_-b ...

"Link Path"

The same as above. It will all the hyperlinks in the page will be a lump of red box out, and display its link address.

"Link Report"

Using the link reporting feature, the developer tools will help you generate a linked report for this page. Contains information such as the number of links, the link address, whether a new window opens. But what is the use of this thing? I don't know.

"Tab Index"

Highlights all elements that contain the TabIndex attribute. The setting of the TabIndex property can change the order in which the page elements get focus.

"Access key"

Highlights all elements that contain the "accesskey attribute." Set the AccessKey property to set the shortcut key for the element to get focus.

Source file "element source with style"

Generates a source file that contains the selected element style, HTML code, and page level information.

A single element must be selected before this command is valid. And the generated source files are only related to the selected element.

"DOM (Element)" of "source file"

Shortcut keys are ctrl+t. Generate a copy of the source file. This source file contains only the DOM structure information for the selected element. With Firebug friends, you can associate the "Copy element HTML code" command. Actually, it's almost like that. Just this is generated into a window, and Firebug is copied directly to the Clipboard.

"DOM (page)" of "source file"

Shortcut key ctrl+g. Generate a copy of the source file. This source file contains the DOM information structure for the entire page. Very fucked-up feature, do not know whether because of the cause of the bug, this feature is actually "view the source of the Web page." Because the generated source code is not just DOM information, it also contains CSS and scripting information.

"Original state" of "source file"

The most fucked-up feature is actually "viewing the Web source". We should all prefer to use the right mouse button directly on the page point bar.

Outline Menu

The outline menu is clearly the command that outlines the elements that satisfy the condition.

"Table cell"

is to put the individual cells of the form table with an Orange Line frame. Let you know--oh. This is the cell of the table.

Table

is to put the form form with an Orange Line frame. Let you know--oh. So here is the form form.

"DIV element"

is to use the green wireframe for all DIV elements in the page. Let you know--oh. It turns out these are all DIV elements.

Image

is to put all of the IMG elements in the page with a Purple Line frame. Let you know--oh. It turns out these are all IMG elements.

"Any element"

This is more powerful. You can customize any label and what color they want to use the wireframe out. Clicking on this menu will bring up the following dialog box. Very simple. No more explanation.

"Relative" of "positioning element"

Will come out with a green wireframe , all elements with a position:relative style.

"Absolute" of "positioning element"

Will come out with a black wireframe , all elements with a position:absolute style.

"Anchor element" "Fixed"

Will come out with a blue wireframe , all elements with a position:static style.

"Positioning element" of "floating"

Will come out with a yellow wireframe , all elements with a float style.

"Clear Outline"

You can use this command to clear all lines when your page has been made up of lines of various colors like Excel tables.

The Image menu

Obviously, this command controls the various images on the page.

"Disable Image"

In order not to insult your IQ, this will not be said. The only one by one points to note--not just the IMG element, but the background image of the element will be disabled oh.

"Show image Size"

Very good features. You can quickly know the size of each image without having to look at the picture properties, and of course the units are pixels.

"Show image File Size"

Very good features. You can quickly know the file size of each picture without looking at the picture properties, of course, the units are bytes.

"Show Image Path"

Very good features. You can quickly know the URL path of each picture without looking at the picture properties, and you can also copy it.

"Show Alt text"

You can display the text of an IMG element's ALT attribute. By the way: the image of the alt must not be a keyword piling, otherwise it is easy to be identified as SEO transition optimization.

"View Image Report"

Generate a detailed image report that changes the page. Contains very detailed information about each picture.

The Cache menu
IE8 Developer Tools Cache Menu

A menu group that manages caches and cookies. This will be a very pleasing feature for developers.

"Always refresh from server"

Like a very advanced command. In other words, "No browser caching" is used.

"Clear Browser Cache"

Shortcut key Ctrl+r. Nothing to say, just simplified the previous steps.

I wonder if you notice that there are three points in the menu after "clear browser cache". This indicates that the dialog box will be confirmed after clicking on this menu.

"Clear browser cache for this domain"

Shortcut key Ctrl+d. Nothing to say, just clear the browser cache under this domain.

"Disable Cookies"

There's no good saying. Let's not eat cookies.

"Clear Session Cookie"

Clears all cookies from the browser. Your forum, the community is waiting to re-login it.

"Clear cookie for domain"

Only the cookies under this domain are cleared.

"View cookie Information"

View the cookie information contained on this page. Don't even think about it, you can't get the password.

The Tools menu

Some of the very useful gadgets that are included with the developer tools are a little weaker than other specialized related tools. But the emergency is enough.

"Resize"

A very useful gadget. You can quickly adjust the browser window to the relevant dimensions. This makes it much easier to test the resolution compatibility of your Web pages.

"Show Ruler"

A simple ruler tool. Use it to measure information such as length, distance, and so on. The color of the line can be changed. You can also create multiple rulers. If it's too subtle, you can use the Magnifier feature.

"Show Color Picker"

A simple color picker tool. You can select a color by clicking the mouse. However, I would like to recommend another tool-my work toolbox-the Scratch Tool (Colorpic), in contrast, this in the developer tools is too simple.

The Validate menu

Will cause the Lake reign (thanks to the small seven students remind me of this suddenly forget the idiom, alas ~ may have seen the recent martial arts fiction less reason for it. But I do not know why it seems that the "Jiao chuan repeatedly" such idioms are more familiar with the menu. In the near future, countless Kong Yiji will be produced.

"HTML"

Validates the HTML code of the page. This page will be sent to the Web site of the HTML verification tool, and get a validation report.

"CSS"

Validates the CSS code for the page. This page will be sent to the Web site of the CSS validation tool, and get a validation report.

Source

Verify the source file code for the page. This page will be sent to the Feedvalidator.org verification tool and the validation report will be obtained.

Link

Verify the link to the page. This page will be sent to the Web site Verification tool, and get a verification report.

"Local HTML"

Open the Web site's HTML validation tool to verify the local page.

"Local CSS"

Open the CSS Validation tool to verify the local page.

"WCAG Checklist" for "accessibility"

Verify the WCAG of the page (Web Content Accessibility report-page accessibility). This page will be sent to the Contentquality.com verification tool and the validation report will be obtained.

"No. 508 List" of "accessibility"

Verify the 508 Standards of the page. This page will be sent to the Contentquality.com verification tool and the validation report will be obtained.

"Multiple validations"

Validation of multiple specifications for the page is also verified.

IE8 Collection Validation dialog box for developer tools

For the validation of the page, I would like to say two: In fact, the page is not the same to pass the verification to go online? I personally feel that there is absolutely no need. If you are a student, lie in an ivory tower. You can easily toss your page, because you are the customer, you just have the time, you are the pursuit of perfection. But commercial projects, there is no need for a "PASS" and waste of valuable project resources. Because no customer cares, "you see, the page we're doing is proven in many ways." "If there really is a customer care, then I can only say that I admire your" flicker "ability.

IE8 "Developer Tools" in detail (detailed menu at all levels)