IE8 "Developer Tools"

Document directory

• Browser Mode
• Text mode
• Use IE8 Developer Tools to debug JavaScript scripts
• Explorer 8 explorer Explorer
• Is it over? Actually, it's just the beginning.

Browser Mode

According to the sentence of "no Tao"-"coming out and mixing will be paid back sooner or later !". The bitter fruit planted by ie6. now it's time to swallow it. When IE8 was released, he had to face thousands of pages in the world that "can be normally displayed only in IE6. If IE8 is not released, FireFox and Chrome will be followed by the cake; no matter which pages are "IE6 only", the browser will not be scolded; let all webmasters reconstruct the pages and laugh at them. Alas, how can this be done.

Alas, now, let's take a measure to let the user handle it by himself. If he encounters the "IE6 only" Page, let him manually handle it, let the browser still use the old rendering mode to render the page, although it is troublesome for users, but it is still a way. So "browser mode" came out. To put it bluntly, let the user select the IE version used for rendering the current page.

Let's take an example. By the way, let's take a look at "detailed explanation of conditional annotations for IE". The core code is as follows --

<div id="divTest">

<!--[if IE 7]>

The browser is IE7

<![endif]-->

<!--[if IE 8]>

The browser is IE8

<![endif]-->

</div>

Let's try this page and display it in different browser Modes --

Browser mode of IE8 Developer Tools

For common users, Microsoft officially recommends the Compatibility View button.

Of course, for front-end developers, this tool is mainly used to test the compatibility of multiple browser pages. But unfortunately, there is no IE6 mode. The world without IE6 is a good wish, but unfortunately we live in reality, maybe it is more accurate to live in hell. Therefore, I still have to mention the following two tools --

IETester
SuperPreview (download), a powerful tool for Microsoft Web development and debugging)

Text mode

Speaking of the term "text mode", we have to go back to three page rendering modes: Quirks mode (also translated into compatible mode and weird mode ), standard mode, and Almost standard mode ). This is a very important concept, but many people are vague. One or two sentences are not clear, so let's say: "different page rendering modes will directly affect the final page rendering effect." That is to say, if a page is perfectly displayed in this mode, however, in another mode, it may be a mess. What determines the page mode is the page! DOCTYPE attribute.

Hey, this is too confusing. Let's just look at the example. The most classic difference is the interpretation of the boxed model. The following two figures show the final display effects of different page rendering modes on the same page.

The page is very simple, as long as a div element, and then set a little height, width, padding, margin. The core code is as follows --

<style type="text/css">

#divTest{

    background-color:red;

    padding:10px;

    margin:10px;

    width:100px;

    height:100px;

}

</style>

<div id="divTest">

<!--[if IE 7]>

The browser is IE7

<![endif]-->

<!--[if IE 8]>

The browser is IE8

<![endif]-->

</div>

Text mode of IE8 Developer Tools

From the image, we can clearly see that the size and position of the red div block have changed significantly in different text modes.

For more information about the text mode, I suggest you read this article Quirks mode, Almost standards mode, and Standards mode. Although it is an original English document, it is definitely worth reading through the dictionary. In this video tutorial, I also have a detailed introduction to lesson 4th of "A-web standard school".

Use IE8 Developer Tools to debug JavaScript scripts

The first thing is coming. Many of my friends dream of debugging JavaScript scripts. I can't get rid of FireFox because Firebug is really easy to use. JavaScript script debugging can also be performed using aircraft-class software such as. However, many front-end developers will not install the big guy for a JavaScript debugging function. Therefore, for JavaScript debugging, IE users are always worried. However, now we can finally calm down. This is because the IE8 developer tool has finally had a small but powerful JavaScript debugging function.

Not to mention, let's look at the example. Here is a simple to mentally retarded example. The core code is as follows:

<button onclick="test();">Button</button>

<Script type = "text/javascript">
   1: function test(){
   2:     test2();
   3: }
   4: function test2(){
   5:     var _obj=document.getElementById("divTest");
   6:     var str=_obj.id;
   7:     alert(str);
   8: }
</Script> let's take a look at the script debugging interface first.

 
  
Use IE8 Developer Tools to debug JavaScript scripts
 
The description on the figure is clear. The following describes the "console", "breakpoint", "local variable", "monitoring", and "call stack" views in detail.
Console
The console displays information about script debugging, such as error information and warning information.
Well, it can also be regarded as a micro JavaScript runtime environment. You can directly type and run the script here. If one row is not enough, you can switch to the multiline mode. After entering the script, click "run script" to view the running result.
Breakpoint
Is a list of all the breakpoints you set. Convenient for unified management: delete, use, or disable the service.
Local variable
One of my favorite views. All methods, events, and attributes of each variable can be displayed in detail. What I like most is reading it one by one. If you don't know it, you can check the information. It is definitely a good way to learn JavaScript. For example, some IE8-specific methods are found on the way below.
Monitoring
One of my favorite views. Display the methods, events, and attributes of any variables you need. You can add multiple instances. Overall, it is similar to the local variable view, but it can display what you need more flexibly.
Call Stack
Intuitively shows the function call stack and the function to be executed. It is helpful for streamlining the running sequence and nesting of scripts.
Explorer 8 explorer Explorer
At the beginning, the probe tool really made me unable to touch my mind. I thought it was like the plug-ins Made in China that were used on the toilet or on the window of the world, used to analyze the flash, video, and audio addresses on the webpage. Later, the original English version is known as "Profiler ".
Anyone who has used Profiler in Microsoft SQL database knows that it is a tool that helps SQL analysis efficiency. It records all executions and their execution time to provide a report. In this way, we can know what is dragging efficiency down.
The Profiler of IE8 also introduces this concept, but it only detects JavaScript scripts.
Click Start configuration file, and then run the script or refresh the page. After the script is executed, or after the page is refreshed, click the stop configuration file button to generate a probe report.
It provides two views: "function" and "call tree ". Regardless of the view, the execution time of each function can be clearly and faithfully displayed. As a result, you can easily find out "Why is my page so slow ?"
Function View
The function view can be conveniently sorted by parameters to find answers similar to "who uses the longest time.
Call tree
The call tree view allows you to easily see the call relationships between functions.
Some information about the IE8 developer Profiler
If you are not addicted, you can read the following article, which is absolutely authoritative. Introducing the IE8 Developer Tools JScript Profiler
Is it over? Actually, it's just the beginning.
Although it seems that many articles are illustrated in different ways. In fact, I didn't talk about anything. There are only a large number of flood attacks. Fortunately, from time to time, there are several links to related articles in the article, so it should not make people feel like "completely cloudification after reading it.
In fact, the tool is just a tool, and it is nothing more than a detailed explanation, an example, or a white-box. If you really want to improve your work efficiency, you still need to work on your own pages. So, after reading the article, you can quickly open the IE 8 developer tool. Now, try it. It will certainly surprise you.