技术开发 频道

IE8"开发人员工具"使用详解:模式及脚本调试界面

  文本模式

  说起“文本模式”这个名词,这又要回到渲染页面的3种模式了:诡异模式(Quirks mode,也有翻译为兼容模式、怪异模式的),标准模式(Standards mode),和几乎标准模式(Almost standards mode)。这是一个非常重要、但是很多人却比较模糊的概念。一两句话不太能说清楚,这样说吧——“页面的不同渲染模式,将直接影响页面的最终呈现效果”,也就是说,一个页面如果在这种模式下显示完美,但是在另外一种模式下可能就显示的一塌糊涂。而决定页面模式的是页面的!DOCTYPE属性。

  乖乖,这玩意太绕人了,还是直接上例子吧。最经典的就是对盒装模型的解释差异了。下面两个图,是相同页面,采用不同页面渲染模式的最终显示效果。

  页面很简单,只要一个div元素,然后随便设置一点高度、宽度、padding、margin就可以了。核心代码如下:
<style type="text/css">
#divTest
{
    background-color
:red;
    padding
:10px;
    margin
:10px;
    width
:100px;
    height
:100px;
}
</style>
<div id="divTest">
<!--[if IE 7]>
浏览器是IE7
<![endif]
-->
<!--[if IE 8]>
浏览器是IE8
<![endif]
-->
</div>

 

IE8开发人员工具之文本模式

  从图片中,我们可以清楚的看到,红色div块的大小和位置,在不同的文本模式下,发生了明显的变化。

  利用IE8开发人员工具调试JavaScript脚本

  重头戏来了。很多朋友梦寐以求的功能呀——JavaScript脚本调试。一直摆脱不掉FireFox,就是因为Firebug实在太好用。虽然利用VS这样航母级的软件也能进行JavaScript脚本的调试。但是,很多前台开发人员并不会为了一个JavaScript调试功能而去安装那种大家伙。所以对JavaScript的调试,IE的用户一直耿耿于怀。但是,现在终于可以平息了。因为IE8开发人员工具终于也有了小巧,却功能强大的JavaScript调试功能。

  不多说,直接上例子,这里就举一个简单到弱智的例子吧。核心代码如下:
<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>
0
相关文章