Menu explanation of IE8 developer tools

This article has briefly explained the various menus of developer tools. I believe that everyone can easily use this powerful tool.

Detailed explanation of the use of IE8 developer tools (detailed explanation of menus at all levels)

The official version of IE8 has been released. This article will not make any comments in a very nonsense, and then give the conclusion that Chrome has the ability to run JavaScript that is 15 times that of IE8, which IE8 has 2.456 times that of Safari, and what IE8 has 1.235 times higher than FireFox. Who do I care about is better than who? All I know is: When Windows 7 is released, the market share of the IE8 browser will make the front-end developers unable to say: Don’t worry about IE8, few people are using it. So, this article will explain it very pragmatically. IE8 may be the only developer tool that makes developers feel friendly. At the same time, we will extend some relevant information and knowledge. So, please abandon your prejudice against IE8 and keep watching patiently.

Haven't IE8 installed yet?

If you are a front-end developer, please install this thing. Because the official version has been released. Unlike the previous beta version, we have to pay attention to it seriously this time. Go and download and install one, the following is the download address-

IE8 Chinese version 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 2008 64-bit

IE8 English version download list

Windows XP

Windows XP 64 Bit

Windows Vista

Windows Vista 64 Bit

Windows Server 2003

Windows Server 2003 64 Bit

Windows Server 2008

Windows Server 2008 64 Bit

Oh, maybe you will worry that IE6 or IE7 in your system is over. Yes, indeed, this is possible. However, you can try the following tool. It allows you to coexist with multiple versions of IE - Solutions for coexistence of multiple versions of IE - IETester

SuperPreview (with download)

Although this thing has changed its fashionable name, it is not a new thing. Its predecessor was IEdevtoolbar. However, it used to be just a plug-in for IE. In IE8, the browser has automatically integrated this thing, which not only changed the name of a bit rustic, but also has a lot of enhancement of functions.

Developer tools can also be called out under the Tools menu of IE8 or directly click the F12 shortcut key.

Before we introduce it, let’s talk about what this thing can do? If you just use a browser to browse the website, without worrying about how the page is made. Then I think you can leave this page.

Overall, developer tools are tools designed for front-end developers to develop pages. Provide a series of gadgets to allow you to easily find page bugs, including html code, css code and JavaScript code. At the same time, he also provides some small tools that are quite useless but can still smack the smell, such as color picking, screen ruler, etc.

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

This article has briefly explained the various menus of developer tools. I believe that everyone can easily use this powerful tool.

【Revoke all】

All operations performed in the developer tools have been cancelled and the page and DOM structures are refreshed.

【Custom Internet Explorer attempt source】

【Trying source】What a fucking noun. In a simple way, it is: what editor to use to view the web source file. For example: I'm using EditPlus.

【quit】

In order not to insult your IQ, I won’t say much about this. Well, F12 is a parity shortcut key, let's mention this by the way.

【Find】Menu

Click to select element

The shortcut key Ctrl B has the same effect as clicking the mouse ICO button in the picture. The most commonly used function. It is also a parity switch. When opening, when clicking on an element on the page with the mouse, the modified element will be selected and the DOM structure, CSS style and other information of the modified element will be listed.

For example, the above picture. The area to the left shows the DOM information for this hyperlink element. Its parent, child and sibling elements can be clearly seen.

The area on the right shows the element style information. The style that is crossed out by the line means that the style no longer works because the priority is not high enough. During debugging, the previous hook can be hooked off. When hooked off, it means that this style is forced to be deleted. Moreover, the properties of each style can be modified immediately after clicking with the mouse. This will instantly see the modified page effect, which is very convenient.

Friends who have used FireFox's FireBug must be familiar with this. The only difference is: FireBug arranges styles with lower priority below, that's all.

The function of [Tracing Style] and [Style] views are the same, and they are used to view the style information of the selected element. The only difference is: it has changed its viewing method. The specific view of your habit depends on your own preferences.

This article has briefly explained the various menus of developer tools. I believe that everyone can easily use this powerful tool.

[Layout] The view can display boxed model information of selected elements. Although it can display more information than FireBug, I still prefer the way in FireBug to express it directly on the page with color blocks.

[Properties] The view can view the attribute information of the selected element. It is very gratifying: you can add or delete some properties immediately to quickly debug the page.

Oh, right. It should be noted that whether you modify the style or attributes of the selected element in the developer tool, they are just temporary debugging and will not be modifying your web page source code.

【Disable】Menu

【script】

JavaScript or VBScript scripts on the page are prohibited. Why disable it? To test the robustness of the page. Some customers who have high requirements for page design will ask: If the customer disables the script, can this page still be used? Well, yes, this function is used to test the perverted needs of these fucking customers.

【Pop-up window blocker】

Filter for popup window. Used to test which one can make the browser or security software filter out my popup window.

【CSS】

CSS Nude Festival is coming! Use this to test the posture of your page when running naked in CSS. This is also an important test to verify the robustness and accessibility of the page. Although, there are not many blind people who can access web pages in China now.

This article has briefly explained the various menus of developer tools. I believe that everyone can easily use this powerful tool.

【Class and ID information】

The shortcut key is Ctrl I, the parity switch. After opening it, you will see that the page is covered with dense red color blocks. The class name or ID name will be displayed. Yes, this is the effect of viewing class and ID information. But to be honest, who would be interested in this red stool? Not only does the page look like a beggar's clothing full of patches, but it is also completely unaware of it-_-b...

【Link path】

Same as above. It will box all hyperlinks in the page in red and display its link address.

【Link Report】

Using the link report feature, the developer tool will help you generate a link report for this page. Includes information such as the number of links, link address, whether a new window is open, etc. But what is the use of this thing? I don't know either.

【Tab Index】

Highlight all elements containing tabindex attributes. The setting of the tabindex property can change the order in which web page elements get focus.

This article has briefly explained the various menus of developer tools. I believe that everyone can easily use this powerful tool.

【Access Key】

Highlight all elements containing the accesskey attribute. Set the accesskey attribute to set the shortcut keys for elements to obtain focus.

【Source File】Element Source with Style

Generate a source file containing selected element styles, HTML code, and web-level information.

An element must be selected before this command is valid. Moreover, the generated source file is only related to the selected elements.

【Source File】DOM (Element)

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

【Source File】DOM (page)

Shortcut key Ctrl G. Generate a source file. This source file contains the DOM information structure of the entire page. It's a very fucking feature. I don't know if it's because of the bug. This feature is actually to view the web page source code. Because the generated source code is not only DOM information, but also CSS and script information.

Original status of 【Source File】

The extremely fucking function is actually to view the web page source code. Everyone should prefer to use the right mouse button to click directly on the web page.

[Outline] menu is obviously a command to outline elements that meet the conditions and display them.

【Table Cell】

It is to frame each cell of the form table with orange wireframe . Let you know-oh. It turns out that this is the cell of the table.

【surface】

It is to frame the form in orange wireframe . Let you know-oh. It turns out that this is the form form.

【DIV elements】

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

This article has briefly explained the various menus of developer tools. I believe that everyone can easily use this powerful tool.

【image】

It is to frame all img elements in the page in purple wireframe . Let you know-oh. It turns out that these are all img elements.

【Any element】

This one is more powerful. You can customize any label and what color they want to use to wireframe out. Click this menu and the dialog box below will pop up. Very simple. No more explanations.

【Positioning Elements】Relative

It will be framed in green , all elements with position:relative style.

【Positioning Element】Absolute

It will be framed with black wireframe , all elements with position:absolute style.

【Positioning Element】Fixed

It will be framed in blue , all elements with position:static style.

【Positioning Element】Float

It will be framed with yellow wireframes , all elements with float style.

【Clear outline】

When your page has been made with various colors of lines like Excel tables, you can use this command to clear all lines.

This article has briefly explained the various menus of developer tools. I believe that everyone can easily use this powerful tool.

Obviously, this command controls various pictures on the page.

【Disable Images】

In order not to insult your IQ, I won’t say this. The only thing to be explained is that not only the img element, but also the background image of the element will be disabled.

【Show image size】

Very good feature. You can quickly know the size of each picture without checking the image attributes. Of course, the unit is pixels.

【Show image file size】

Very good feature. You can quickly know the file size of each picture without checking the image properties. Of course, the unit is bytes.

【Show image path】

Very good feature. You can quickly know the URL path of each image without checking the image attributes, and you can also copy it.

【Show Alt text】

The text of the alt attribute of the img element can be displayed. By the way: Don’t pile up keywords for pictures, otherwise it will be easily considered as SEO transition optimization.

【View image report】

Generate a detailed image report for modifying the page. Contains very detailed information for each image.

This article has briefly explained the various menus of developer tools. I believe that everyone can easily use this powerful tool.

Manage caches and cookies menu groups. This will be a very pleasant feature for developers.

【Always refresh from the server】

It seems like a very profound command. In other words, it is prohibited to use browser cache.

【Clear browser cache】

Shortcut key Ctrl R. There is nothing to say, it just simplifies the previous operation steps.

I don't know if you noticed that there are three dots behind [Clear Browser Cache] in the menu. This means that the dialog box will be confirmed after clicking this menu.

【Clear the browser cache for this domain】

Shortcut key Ctrl D. There is nothing to say, just clear the browser cache in this domain.

【Disable Cookies】

There is no benefit to say. No biscuits allowed.

【Clear session cookies】

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

【Clear the domain cookies】

Only clear cookies in this domain.

【View Cookie Information】

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

Some useful gadgets are included with the developer tools, although they are a bit weaker than other specialized related tools. But emergency response is still enough.

【Resize】

Very useful gadget. You can quickly adjust the browser window to the relevant size. In this way, it will be much more convenient to test web resolution compatibility.

【Show ruler】

A simple ruler tool. Use it to measure length, distance and other information. The color of the line can be changed. Multiple titles can also be created. If it is too thin, you can use the magnifying glass function.

【Show color picker】

A simple color picking tool. Click the mouse to select the color. However, I recommend another tool to you - My Work Toolbox - ColorPic, which is too simple in the developer tools.

This article has briefly explained the various menus of developer tools. I believe that everyone can easily use this powerful tool.

It will definitely cause bloody storms in the world (Thank you Xiaoqi for reminding me of this idiom I suddenly forgot, alas~ Maybe because I have read fewer latest martial arts novels. But I seem to be familiar with idioms like Panting and Lianlian recently). In the near future, countless Kong Yiji will surely be produced.

【HTML】

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

【CSS】

Verify the CSS code of the page. This page will be sent to the css verification tool of W3C and a verification report will be obtained.

【source】

Verify the source file code of the page. This page will be sent to the feedvalidator.org verification tool and a verification report will be obtained.

【Link】

Verify the link to the page. This page will be sent to the verification tool of w3c and a verification report will be obtained.

【Local HTML】

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

【Local CSS】

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

【Accessive Functions】WCAG List

Verify the page's WCAG (Web Content Accessibility Report-page accessibility). This page will be sent to the contentquality.com verification tool and a verification report will be obtained.

List of [Accessive Functions]

Verify page 508 Standards. This page will be sent to the contentquality.com verification tool and a verification report will be obtained.

【Multiple Verifications】

Verify the page at the same time to verify multiple specifications.

Regarding page verification, I would like to say a few words: In fact, does the page need to pass verification before it can be launched? I personally feel that it is completely unnecessary. If you are a student, lie inside the ivory tower. You can toss your page anytime, because you are the customer and you just have time. However, there is no need to waste valuable project resources for a PASS for commercial projects. Because no customer cares about you, the page I made has been verified by W3C in many aspects. If a customer really cares, then I can only say that I admire your ability to deceive.

This article has briefly explained the various menus of developer tools. I believe that everyone can easily use this powerful tool.

But we haven't mentioned the more powerful functions at all. All, please look forward to our next article. In the next article, we will explain in detail the use of JavaScript debugging, browser mode, text mode and other functions.