IE8 developer tools tutorial (1)
In March 2009, Microsoft released version 8.0 of Internet Explorer.
At present, in all browsers, IE family’s share accounted for two-thirds, and, IE 8 will be bundled in Windows Vista and Windows 7. It can be expected that this software will become one of the most used software.
However, in the eyes of web designers, IE has always had a bad reputation. IE6 is simply a disaster for web designers, and IE7 has not improved much. Therefore, in the industry, everyone is not particularly concerned about the release of IE8.
However, after using it for a few weeks, I would say that IE8 is really unexpected and its performance is excellent. I don’t want to compare it with other browsers. I just want to say that IE6 has always been criticized for some of the biggest flaws. IE8 has made great improvements, such as standard support, memory management, and frequent The problem of crashes and so on.
Among all the improvements, I most appreciate the new accessory of IE8-Developer Tools. It has completely changed the life of web designers. It is no exaggeration to say that with this powerful tool, developing a website for IE is no longer a painstaking task.
This article is a tutorial compiled based on my own learning process, mainly referring to the official documents of Microsoft . The goal is to use only a few simplest examples to help you quickly master its use.
Introduction to developer tools
IE8 comes with “Developer Tools”, no installation is required. As long as IE8 can be used, it can be used. If you haven’t installed IE8, you can go to the official website to download the Chinese version . This is necessary to read this tutorial.
“Developer Tools” is closed by default and must be opened manually. The method is to click “Developer Tools” in the “Tools” menu, or directly press the F12 key.
After opening, it is the interface like below.
As you can see, there are four tabs in the main workspace (Primary Content Pane)-HTML, CSS, Javascript (script), Profiler (profiler). This is the main environment for development work.
HTML is the default tab. Whenever a new web page is opened, the source code of the web page is displayed in it in the form of a DOM tree. Click the + sign on the far left to expand/contract the DOM element.
Comparison with Firebug
Firebug is the most widely used development tool in the Firefox browser. My feeling is that for some of the most common tasks, IE8’s “Developer Tools” and Firebug can both be done, such as web page element style analysis and Javascript code debugging. In addition, both have their own characteristics. (For Firebug, please refer to the “Firebug Getting Started Guide” translated by me .)
According to my observation, IE8’s “Developer Tools” has three functions, which Firebug does not possess.
First, list the failure styles.
“Developer Tools” will list the style settings replaced by other CSS commands in the form of strikethrough, which makes it easy to see the inheritance relationship between styles.
Second, the color picker.
Open the “Tools” menu and select “Show Color Picker”.
On the original web page, a small straw will be displayed, which can be used to view the color of each pixel.
Third, the “Profiler” function of performance debugging.
This function will list each function in the Javascript script, the number of times each command is run, and the time it takes, which is very helpful to find out the performance bottleneck of the webpage code.
On the other hand, Firebug also has some features that are not available in IE8’s “Developer Tools”. The most important thing is that “Developer Tools” cannot display information about HTTP requests, so it can hardly be used to debug Ajax web applications.
Of course, IE8’s “Developer Tools” and Firebug are not mutually replaceable, because neither can be installed on the other’s browser, so web designers still need to learn both tools at the same time.
Sample page
The following content requires hands-on operation.
The sample webpage address used is http://www.ruanyifeng.com/webapp/ie8/ , please use IE8 to open this website. Note that it must be opened with IE8, browsers of other versions and models are invalid.
The sample web page is a hypothetical game software sales list. The user clicks the radio button, and the “Total Price” column at the bottom will automatically display the total amount. We will use this page to illustrate how to use “Developer Tools”.
Example 1: Modify the text in the webpage
The goal of the operation is to change “product” to “product description”.
Steps:
1. Open the “Find” menu and select “Click to select an element”.
2. Use the mouse to click the word “product” on the original webpage, and the area where it is located will display a blue border.
3. Back to “Developer Tools”, the “TH” part of “Product” is now highlighted.
4. After expanding it, you can see a line of light-colored “text-product”.
5. Click the word “product”, it will become editable, change it to “product description”.
6. After pressing Enter, the web page will be automatically updated and “Product Description” will appear.
In addition to “click to select an element”, another way to select an element is to use search. In the search bar in the upper left corner, type “product” and press Enter, you can directly find the text that needs to be modified.
(To be continued)