IE8 "Developer Tools" Notes

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

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 HTMLCode, CSS code, and JavaScript code. At the same time, he also provides some small tools, such as color and screen ruler.

F12 is a parity shortcut. Under IE8, click the F12 key to jump out of the developer tool. Then, click F12 to exit the developer tool interface.

[Search] menu

Click Select element in the search menu. The shortcut key Ctrl + B is the same as that of the Mouse icon in the figure. The most common feature is also a parity switch. When you click an element on the page, the element is selected and its dom structure, CSS style, and other information are listed.

 

The Left area shows the DOM information of this hyperlink element. You can clearly see its parent element, child element, and sibling element.   The style information of this element is displayed in the area on the right. 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.

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

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 your webpage.Source code.

 

Disable menu

[Script] prohibits the use of JavaScript or VBScript on the page. 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 ?" [Pop-up window BlockingProgram] 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] use this to test your webpage's posture when CSS is streaking. This is also an important test of page robustness and accessibility.

 

[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.

[LINK path]
Same as above. It will show the red boxes of all the hyperlinks on the page and 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.

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.

Accesskey attribute -- represents the access method of the link's shortcut key

 

Source File: "element source with style"
Generate a source file that contains the selected element style, HTML code, and 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. This function is actually "view web page source code ". Because the generated Source Code not only contains Dom information, but also CSS and script information.

Source File: "original state"
It is actually "view web page source code ".

 

Outline menu

Sketch out the elements that meet the conditions and display the commands.

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] various images on the menu control page

Disable Images] Not only is it an IMG element, but the background image of the element is disabled. [Display image size] 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] You can quickly know the file size of each image without viewing the image properties. Of course, the unit is byte.

[Display image path]
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 menuMenu groups for managing cache and cookies

[Always refresh from the server] In other words: "Disable browser cache ". Clear browser cache: press Ctrl + R. The clear browser cache menu is followed by three dots. Click this menu to confirm the dialog box. Clear the browser cache for this domain. Press Ctrl + D. Only the browser cache in the current domain is cleared. Disable cookie] Clear session cookies: clears all cookies of the browser. Your forum,CommunityAre you waiting to log on again. [Clear domain cookies] only clears cookies in this domain. [View cookie information] view the cookie information contained on this page.

 

Tools menu

[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 titles. You can useMagnifiersFunction. Display color selector: A simple color collection tool. Click the mouse to select the color.

 

[Verification] menu

[HTML] verifies the HTML code of the page. This page is sent to the W3C HTML verification tool and a verification report is obtained. [CSS] verifies the CSS code of the page. This page is sent to the W3C CSS verification tool and a verification report is obtained. Source code on the verification page. This page is sent to the feedvalidator.org verification tool and a verification report is obtained. [LINK] verification page Link. This page is sent to the W3C verification tool and a verification report is obtained. [Local HTML] Open 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": verifies the 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 standards on the verification page. This page is sent to the contentquality.com verification tool and a verification report is obtained.

 

 

Multiple verification: verifies multiple specifications on the page at the same time.