之前下载了ie8用了一下,没有太关注ie8的开发人员工具功能,稍稍试了一下,发现ie8的开发人员工具真是一个好东西。它可以大大提高客户端的开发调试的效率。
我从html元素,css,javascript三个方面阐述一下我使用ie8开发人员工具的情况
1. Html元素,现在使用ie8的开发工具,我们可以任意选中一个html元素,在页面上即时显示出这个元素的轮廓,并可以看到这个元素的子元素到哪儿,更方便的是我们可以直接看到这个元素在浏览器解析中的运行时样式显示情况,更不可思议的是,我们可以在运行时改变启用或者禁用某一部分样式,并看到没有这一部分样式的浏览器显示情况。说了好几个好的功能,你是不是有点不信了,贴图为证:
从上图可以看到我选中了h1标签,然后在页面上就会用篮色框标注H1元素,并且在工具的右半窗口显示H1元素从父元素继承的css样式和其自身的样式;你也可以选择样式旁边的跟踪样式,启用或去掉某条样式的定义,并即时显示样式的呈现效果,这对于我们调整页面的html和css样式是非常方便有效的。
如果你觉得还不够,没关系还有更多的方式可以用,你可以选择开发工具的“查看”和“轮廓”菜单显示页面中的div的布局或者table的单元格,用上“轮廓”菜单的功能,页面是怎么布局的就会一目了然。
2. 我们做web开发的都知道客户端调试很重要的一部分是对javascript的调试。尤其是web2.0,javascript和河蟹一样横行霸道。ie8的javascript调试工具,可以和vs2008的客户端调试功能媲美了,有了ie8我们即时用笔记本也可以轻松的调试任意页面的javascript了,口说无凭,请看图:
在调试工具的左侧选项卡上选择脚本就会看到页面中的脚本,并且我们可以看到页面中引用的所有脚本文件,并随意选择设置断点,在它的右上角还有一个搜索脚本的功能,非常便捷,还能显示所有的断点、局部变量,监视等。可以这么说,用了ie8 web脚本调试不再有问题。
另外ie8的开发工具还可以单独清除某个站点的客户端缓存,可以单独清除某个站点的Cookie。
ie8的开发工具很好用,大家试试吧。
本文参考的站点是:宝宝孕历,一个专注于孕期的网站。