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快捷键呼出这个小工具。

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

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

文件菜单

【所有撤销】

以前在开发人员工具中进行的操做所有取消，而且刷新页面个DOM结构。

【自定义Internet Explorer视图源】

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

【退出】

这个就不用说啦

查找菜单

【单击选择元素】

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

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

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

【跟踪样式】

视图和【样式】视图的做用是同样的，都是用来看选中元素的样式信息。区别仅仅是：它换了个视图方式而已。

【布局】视图

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

【属性】视图

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

禁用菜单

【脚本】

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

【弹出窗口阻止程序】

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

【CSS】

测试页面在不加载CSS样式时候的页面状况。一些比较简陋的手机浏览器可能不支持CSS，因此这个功能仍是有点用处的。

查看 菜单

【类和ID信息】

打开后能够查看类和ID名称，这个彷佛不太好用

【连接路径】

功能跟上一个相似，突出显示连接

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

【选项卡索引】
高亮显示出全部包含tabindex属性的元素。tabindex属性的设置，能够改变网页元素得到焦点的顺序。

【访问键】
高亮显示全部包含“accesske属性”的元素。设置accesskey属性，能够设定元素得到焦点的快捷键。

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

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

【源文件】之“DOM（页面）”
快捷键Ctrl+G。生成一份源文件。此源文件包含整个页面的DOM信息结构。很是操蛋的功能，不知道是否是由于bug的缘由，此功能其实就是“查看网页源码”。由于，生成的源码并不只仅是DOM信息，也包含CSS和脚本信息等。

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