<br />This article has briefly explained the various menus of the developer tools. I believe that everyone can already use this powerful tool easily.
Detailed explanation of using IE8 "Developer Tools" (Detailed explanation of each level of menu)
The official version of IE8 has been released. This article will not conduct any ridiculous evaluation and come up with some ridiculous conclusions like "Chrome's ability to run JavaScript is 15 times that of IE8", "IE8's page rendering speed is 2.456 times that of Safari", or "IE8's ability to withstand brute force is 1.235 times higher than FireFox". Why should I care who is better than who? All I know is that when Windows 7 is released, the market share of IE8 will make it impossible for front-end developers to say: "Don't worry about IE8, few people are using it." Therefore, this article will explain in a very pragmatic way that IE8 may be the only "developer tool" that makes developers feel familiar. At the same time, we will extend some relevant information and knowledge. So, please abandon your prejudice against IE8 and read on patiently. You haven't installed IE8 yet? If you are a front-end developer, please install this. Because the official version has been released. Unlike previous beta versions, this time we have to pay serious attention to it. Go download and install one, here 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 are worried that IE6 or IE7 on your system is broken. Well, yes, it is possible. However, you can try the following tools. It allows you to have multiple versions of IE coexist - IE multi-version coexistence solution - IETester
Microsoft's web development and debugging tool SuperPreview (attached with download)
Meet Developer Tools
Although this thing has a trendy name, it is not new. Its predecessor is "IEdevtoolbar". However, it was just a plug-in for IE before. In IE8, the browser has automatically integrated this thing. Not only has it been given a somewhat rustic name, but its functions have also been greatly enhanced.
The developer tools are under the Tools menu of IE8, or you can call them up by simply pressing 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, you don't have to worry about how the page is made. Then I think you can leave this page.
Generally speaking, developer tools are tools designed for front-end developers to develop pages. Provides a series of small tools that allow you to easily find bugs in pages, including HTML code, CSS code and JavaScript code. At the same time, he also provides some small tools that are relatively useless but still useful, such as color picking, screen ruler, etc.
Ok, we've seen it and we know what it does. Let's introduce them one by one according to the order of the menu -
This article has briefly explained the various menus of the developer tools. I believe that everyone can already use this powerful tool easily.
【File】Menu
【Cancel all】
All previous operations in the developer tools are canceled, and the page and DOM structure are refreshed.
[Customize Internet Explorer View Source]
【Attempted source】What a fucking noun. A more popular way of saying it is: "What editor to use to view the source file of the web page". For example: I use EditPlus.
【quit】
In order not to insult your intelligence, I will not say more about this. Well, F12 is an odd-even shortcut key, just 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. Also an even-odd switch. When it is opened, when you click an element on the page with the mouse, the element will be selected and its DOM structure, CSS style and other information will be listed.
For example, the picture above. The area on the left shows the DOM information of this hyperlink element. You can clearly see its parent element, child elements, and sibling elements.
The area on the right shows the style information of the element. The styles crossed out by a line indicate that the style is no longer effective because its priority is not high enough. When debugging, you can uncheck the box in front of it. Unchecking it means forcibly deleting this style. Moreover, the properties of each style can be modified immediately by clicking the mouse. This allows you to instantly see the effect of the modified page, which is very convenient.
Friends who have used FireBug in FireFox will definitely be familiar with this. The only difference is that FireBug arranges the styles with lower priority at the bottom, that's all.
The functions of the [Tracking Style] view and the [Style] view are the same, both are used to view the style information of the selected element. The only difference is that it changes the viewing method. Which view you are used to depends on your preference.
This article has briefly explained the various menus of the developer tools. I believe that everyone can already use this powerful tool easily.
The [Layout] view can display the box model information of the selected element. Although it can display more information than FireBug, I still prefer the way FireBug displays it directly on the page with color blocks.
[Properties] view can view the property information of the selected element. The nice thing is that you can add or remove properties instantly, which allows you to quickly debug your page.
Oh, right. It should be noted that no matter whether you modify the style or attributes of the selected element in the developer tools, they are only temporary debugging and will not modify your web page source code.
[Disable] menu
【script】
Will prohibit the use of JavaScript or VBScript scripts on the page. Why disable it? To test the robustness of the page. Some customers who have high requirements for page design may ask: "If the customer disables scripts, can this page still be used?" Well, yes, this function is used to test the perverted needs of these fucked-up customers.
Pop-up Blocker
Filters for pop-up windows. Used to test the kind of "How can I prevent my browser or security software from filtering my pop-up windows."
【CSS】
"CSS Naked Festival" is here! Use this to test your page's behavior when CSS is naked. This is also an important test to verify the robustness and accessibility of the page. However, there are not many blind people in China who can access the web.
This article has briefly explained the various menus of the developer tools. I believe that everyone can already use this powerful tool easily.
【View】Menu
【Class and ID information】
The shortcut key is Ctrl+I, odd-even switch. After opening it, you will see that the page is covered with dense red blocks. The class name or ID name will also be displayed. Yes, this is the effect of viewing class and ID information. But let's be honest, who would be interested in these piles of red feces? Not only does it make the page look like a patched beggar's clothes, but it is also completely unclear-_-b...
【Link path】
Same as above. It will outline all the hyperlinks on the page with red boxes and display their link addresses.
【Link Report】
Using the link report feature, the developer tools 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 specific use of this thing? I don't know either.
Tab Index
Highlights all elements that have a tabindex attribute. Setting the tabindex attribute can change the order in which web page elements gain focus.
This article has briefly explained the various menus of the developer tools. I believe that everyone can already use this powerful tool easily.
【Access Key】
Highlight all elements containing an "accesskey attribute". By setting the accesskey attribute, you can set the shortcut key for the element to gain focus.
[Source File] "Element Source with Style"
Generate a source file containing the selected element style, HTML code, and web page level information.
An element must be selected for this command to work. And the generated source files are 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 the DOM structure information of the selected element. Friends who have used FireBug may think of the command "Copy element HTML code". Actually, this is similar to that one. The only difference is that this is generated into a window, while FireBug copies it 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. This is a very annoying function. I don’t know if it’s due to a bug, but this function is actually “view the source code of the webpage”. Because the generated source code is not only DOM information, but also includes CSS and script information.
[Source file] "Original state"
This is an extremely annoying function, which is actually "view the source code of the web page". I think everyone prefers to use the right button of the mouse to click directly on the web page.
[Outline] Menu
The [Outline] menu is obviously a command to outline and display the elements that meet the conditions.
Table Cell
Just frame each cell of the form with an orange line . Just so you know - oh. It turns out that this is the cell of the table.
【surface】
Just frame the form with an orange line . Just so you know - oh. It turns out that this is the form.
[DIV element]
Just frame all the div elements on the page with green lines . Just so you know - oh. It turns out that these are all div elements.
This article has briefly explained the various menus of the developer tools. I believe that everyone can already use this powerful tool easily.
【image】
Just frame all the img elements on the page with purple lines . Just so you know - oh. It turns out that these are all img elements.
Any element
This one is more powerful. You can customize any of the labels and what color they should be outlined in. Click this menu and the following dialog box will pop up. It's very simple. No further explanation.
[Positioning Elements] - "Relative"
All elements with position:relative style will be outlined in green .
[Positioning Elements] "Absolute"
All elements with position: absolute style will be outlined in black .
[Positioning elements] - "Fixed"
All elements with position:static style will be outlined in blue .
[Positioning Elements] - "Floating"
All elements with float style will be outlined in yellow .
【Clear outline】
When your page has been made like an Excel spreadsheet by lines of various colors, you can use this command to clear all the lines.
This article has briefly explained the various menus of the developer tools. I believe that everyone can already use this powerful tool easily.
【Image】Menu
Obviously, this command is used to control various pictures on the page.
Disable images
In order not to insult your intelligence, I won't talk about this. The only thing that needs to be explained is that not only the img element, but also the background image of the element will be disabled.
【Display image size】
Very nice feature. You can quickly know the size of each image without checking the image properties. Of course, the unit is pixels.
[Show image file size]
Very nice feature. You can quickly know the file size of each image without checking the image properties. Of course, the unit is bytes.
【Show image path】
Very nice feature. You can quickly know the URL path of each image without checking the image properties, and you can also copy it.
【Show Alt text】
Can display the text of the alt attribute of the img element. By the way: the alt of the image should never be stuffed with keywords, otherwise it will easily be considered as SEO over-optimization.
【View image report】
Generates a detailed graphical report of the changed pages. Contains very detailed information about each image.
This article has briefly explained the various menus of the developer tools. I believe that everyone can already use this powerful tool easily.
[Cache] menu
Menu group for managing cache and cookies. This will be a very exciting feature for developers.
【Always refresh from server】
It seems like a very profound command. In other words, it means: "Disable the use of browser cache."
【Clear browser cache】
Shortcut key Ctrl R. There is nothing much to say, it just simplifies the previous operation steps.
I don’t know if you have noticed the three dots after [Clear browser cache] in the menu. This means that a confirmation dialog box will appear after clicking this menu.
Clear the browser cache for this domain
Shortcut key Ctrl D. Nothing much to say, just clear the browser cache under this domain.
【Disable Cookies】
There's nothing good to say. No more cookies.
【Clear session cookies】
Clear all cookies from your browser. Your forums and communities are probably waiting for you to log in again.
Clear domain cookies
Clear cookies for this domain only.
【View Cookie Information】
View information on the cookies this page contains. Don't even think about it, you won't be able to get the password.
【Tools】Menu
The developer tools come with some useful little tools, though they're a bit weak compared to other specialized related tools. But it is enough for emergency.
【Resize】
Very useful little tool. The browser window can be quickly adjusted to the relevant size. This makes it much easier to test web page resolution compatibility.
【Show ruler】
A simple ruler tool. It can be used to measure length, distance and other information. The color of the line can be changed. It is also possible to create multiple titles. If the area is too small, you can use the magnifying glass function.
Show color picker
A simple color picking tool. Click the mouse to select a color. However, I recommend another tool to you - "My Work Toolbox - Color Picker (ColorPic)". In comparison, this one in the developer tools is too simple.
This article has briefly explained the various menus of the developer tools. I believe that everyone can already use this powerful tool easily.
【Verification】Menu
The menu will surely cause a bloody storm in the martial arts world (thank you Xiaoqi for reminding me of this idiom that I suddenly forgot. Alas, it may be because I haven’t read many martial arts novels recently. But recently I seem to be more familiar with idioms such as “gasping for breath”). In the near future, there will be countless Kong Yijis.
【HTML】
Verify the HTML code of the page. This page will be sent to the w3c html validation tool and a validation report will be obtained.
【CSS】
Validate the CSS code of the page. This page will be sent to the w3c css validation tool and a validation report will be obtained.
【source】
Verify the source code of the page. This page will be sent to the feedvalidator.org validation tool and a validation report will be obtained.
【Link】
A link to the verification page. This page will be sent to the w3c validation tool and a validation report will be obtained.
【Local HTML】
Open the w3c html validation tool to validate the local page.
Local CSS
Open the w3c CSS validation tool to validate the local page.
【Accessibility】WCAG Checklist
Verify the WCAG (Web Content Accessibility Report) of the page. This page will be sent to the contentquality.com validation tool and a validation report will be obtained.
[Accessibility] Section 508 Checklist
Verify that the page complies with 508 Standards. This page will be sent to the contentquality.com validation tool and a validation report will be obtained.
【Multiple Verification】
Simultaneous validation validates the page against multiple specifications.
Regarding page verification, I would like to say two things: In fact, does the page also need to pass verification before it can go online? I personally feel it is totally unnecessary. If you are a student, lying in the ivory tower. You can do whatever you want with your page, because you are the customer and you have the time. However, for commercial projects, there is absolutely no need to waste precious project resources just for a "PASS". Because no customer will care, "Look, this page I made has been verified in many aspects by W3C." If there are really customers who care, then I can only say that I admire your ability to "fool around."
Please look forward to the next episode
This article has briefly explained the various menus of the developer tools. I believe that everyone can already use this powerful tool easily.
But we haven't even touched upon the more powerful features yet. So, please look forward to our next article. The next article will explain in detail the use of JavaScript debugging, browser mode, text mode and other functions.
|
