IE8-开发人员工具使用(一)

前段时间安装了Win7,使用一段时间后感觉不错,也推荐同事们安装了。

在使用自带的IE8正式版的时候发现一个好东西-开发人员工具,功能上跟FireFox下的firebug类似,有些功能甚至比firebug更加强大,美中不足的就是它的性能实在是不敢恭维,若比尔大叔能够在下一版本中改善的话就好了。使用了一下,感觉还是不错的。写下一些使用体会与大家分享,如果您是一位WEB前端开发者,并且想了解一下这个工具,请往下看,一般用户就不用看啦~

提供一下IE8中文版的下载地址

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之后,您的系统之前自带的老版本IE就不能用啦

首先我们来了解一下这个工具。我百度了一下这个工具,原来它的前身是“IEdevtoolbar”,IE的一个插件。现在直接集成在了IE8中,并取了个比较牛B的名字。在功能方面,比起以前的IEdevtoolbar有了很大的增强。

这个工具在“工具”菜单栏下。IE8默认隐藏了菜单栏,可以按下ALT键让其显示,或者直接按F12快捷键呼出这个小工具。

image

开发人员工具是为前端开发人员开发页面而设计的工具。提供了一系列的功能方便WEB开发,比如HTML、CSS、JavaScript代码调试、取色、屏幕尺子等。

ok 我们已经看到它长什么样子了,接下来,我们就根据它的菜单顺序来一探究竟吧。

文件菜单

image

【全部撤销】

之前在开发人员工具中进行的操作全部取消,并且刷新页面个DOM结构。

【自定义Internet Explorer视图源】

设置使用什么工具来查看网页源文件。

【退出】

这个就不用说啦

查找菜单

image

【单击选择元素】

或者直接点击左边白色箭头区域。

这是一个奇偶开关,打开时,用鼠标点击页面上的元素就会选中改元素,并且列出改元素的DOM结构、CSS样式表等信息。

image

如上图所示,我们选中了一个ID为mastheadhd的DIV标签,从展开的树形结构中我们很容易的就能看到这个元素的父元素子元素等信息,在右边列出了他的样式,其中划横线的样式表示这个样式已经被另一个优先级高的样式所覆盖,已经失效。调试的时候可以将样式前面的勾去掉,表示强行禁用此样式。而且每个样式的属性都可以在鼠标点击后立即修改。从而即时看到修改的结果,非常方便。

【跟踪样式】

视图和【样式】视图的作用是一样的,都是用来看选中元素的样式信息。区别仅仅是:它换了个视图方式而已。

【布局】视图

显示选中元素的盒模型信息

image

【属性】视图

在属性视图中我们可以查看选中元素的属性信息,并且可以任意增加或者删除一些属性以便快速调试页面。注:在开发人员工具中对页面的更改只是暂时的,并不会更改你的网页内容。

禁用菜单

image

【脚本】

会禁止使用页面的JavaScript 或VBscript脚本。为什么要禁用呢?为了测试页面的健壮性。这个功能是方便测试在浏览器禁用脚本的情况下页面的工作情况。

【弹出窗口阻止程序】

用来测试那种不让浏览器或者安全软件屏蔽的弹出窗口

【CSS】

测试页面在不加载CSS样式时候的页面情况。一些比较简陋的手机浏览器可能不支持CSS,所以这个功能还是有点用处的。

查看 菜单

image

【类和ID信息】

打开后可以查看类和ID名称,这个似乎不太好用

【链接路径】

功能跟上一个类似,突出显示链接

【链接报告】
使用链接报告功能,开发人员工具会帮你生成一份此页面的链接报表。包含链接数量、链接地址、是否新窗口打开等信息。

【选项卡索引】
高亮显示出所有包含tabindex属性的元素。tabindex属性的设置,可以改变网页元素获得焦点的顺序。

【访问键】
高亮显示所有包含“accesske属性”的元素。设置accesskey属性,可以设定元素获得焦点的快捷键。

【源文件】之“带有样式的元素源”
生成一份包含选中元素样式、HTML代码,网页级别信息的源文件。
必须先选中一个元素,此命令才有效。而且生成的源文件也只与选中元素有关。

【源文件】之“DOM(元素)”
快捷键是Ctrl+T。生成一份源文件。此源文件只包含选中元素的DOM结构信息。用过FireBug的朋友,可以联想到“拷贝元素HTML代码”这个命令。其实这个和那个差不多。只是这个是生成到一个窗口,而FireBug直接复制到剪贴板而已。

【源文件】之“DOM(页面)”
快捷键Ctrl+G。生成一份源文件。此源文件包含整个页面的DOM信息结构。非常操蛋的功能,不知道是不是因为bug的原因,此功能其实就是“查看网页源码”。因为,生成的源码并不仅仅是DOM信息,也包含CSS和脚本信息等。

【源文件】之“原始状态”
极其操蛋的功能,其实就是“查看网页源码”。大家应该都比较喜欢用鼠标右键直接在网页上点吧。

你可能感兴趣的:(开发,职场,员工,休闲)