IE8开发人员工具教程

admin管理员组

文章数量:1567658

2024年7月20日发(作者：)

你还没有安装IE8？

如果你是前端开发人员，那么还请你安装一下这玩意吧。因为正式版已经发布了。不同于以

前的beta版，这次咱得认真的关注一下它了。去下载并安装一个吧，下面是下载地址——

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英文版下载列表

Windows XP

Windows XP 64 Bit

Windows Vista

Windows Vista 64 Bit

Windows Server 2003

Windows Server 2003 64 Bit

Windows Server 2008

Windows Server 2008 64 Bit

哦，也许你会担心，你系统内的IE6或者IE7完蛋了。恩，的确，这有可能。但是，你可

以试试下面的工具。它可以让你多版本的IE共存——

IE多版本共存的解决方案——IETester

微软网页开发调试利器SuperPreview（附下载）

认识“开发人员工具”

虽然这玩意改了时髦的名字，但是却也不是什么新玩意，它的前身是“IEdevtoolbar”。但

是，以前只是IE的一个插件而已。而在IE8中，浏览器已经自动集成了这玩意，不仅改了

个有点土鳖的名字，而且功能也加强了很多。

开发人员工具在IE8的工具菜单下，或者直接点击F12快捷键也可以呼叫出来。

IE8开发人员工具使用详解

在我们介绍它之前，我们先来说说这玩意到底能做什么？如果你只是用浏览器来浏览网站，

而不用操心页面是怎么做出来的。那么我想你已经可以离开这页面了。

总体来说，开发人员工具就是是为前端开发人员开发页面而设计的工具。提供一系列的小工

具，让你可以方便的查找页面的bug，包括html代码、css代码和JavaScript代码。同

时，他也提供了一些虽然比较鸡肋，但是还能咂咂味的小工具，例如取色、屏幕尺子等。

ok，我们已经看到它了，并且也知道它能干什么了。那就让我们根据菜单的顺序一一来介

绍它吧——

【文件】菜单

IE8开发人员工具【文件】菜单

【全部撤销】

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

【自定义Internet Explorer试图源】

【试图源】真是操蛋的名词。通俗一点的说法就是：“用什么编辑器查看网页源文件”。例如：

我用的就是EditPlus。

【退出】

为了不侮辱阁下的智商，这个我就不多说了。嗯，F12是个奇偶快捷键，这个顺便提一下

吧。

【查找】菜单

【单击选择元素】

快捷键Ctrl+B，和点击图中的那个鼠标ICO按钮效果一样。最最常用的功能。也是一个奇

偶开关。打开时，用鼠标点击页面上的元素时，就会选中改元素，并且列出改元素的DOM

结构、CSS样式等信息。

例如上面的图。左边的区域显示了此超链接元素的DOM信息。可以明确地看出它的父元素、

子元素以及兄弟元素。

右面的区域显示了改元素样式信息。其中被线划掉的样式，表示该样式因为优先级不够高，

已经不再起作用了。调试的时候，前面的勾可以钩掉的，钩掉的时候表示强行删除此样式。

而且，每个样式的属性，用鼠标点击后都可以立即修改。从而即时的看到修改后的页面效果，

非常方便。

使用过FireFox的FireBug的朋友，对此一定不会陌生。区别仅仅是：FireBug是把优先

级比较低的样式排列在下方，仅此而已。

【跟踪样式】视图和【样式】视图的作用是一样的，都是用来看选中元素的样式信息。区别

仅仅是：它换了个视图方式而已。具体习惯哪种视图，就看你自己的喜好了。

【布局】视图可以显示选中元素的盒装模型信息。虽然相比FireBug可以显示更多的信息，

但是我还是比较喜欢FireBug中直接在页面上用色块表现出来的方式。

【属性】视图可以查看选中元素的属性信息。非常令人高兴的是：你可以立即增加或者删除

一些属性，用来快速的调试页面。

哦，对了。需要注意的是：无论你是在开发人员工具中修改选中元素的样式还是属性，他们

都是暂时的调试而已，并不会正在修改你的网页源代码。

【禁用】菜单

【脚本】

会禁止使用页面的JavaScript或者VBScript脚本。为什么要禁用呢？为了测试页面的健

壮性。有些对页面设计要求比较高的客户会问：“如果客户禁用了脚本，这个页面还能不能

使用呢？”恩，对，这个功能就是用来测试这些操蛋客户的变态需求的。

【弹出窗口阻止程序】

弹出窗口的过滤器。用来测试哪种“怎么才能让浏览器或者安全软件不过滤掉我的弹出窗

口。”

【CSS】

“CSS裸奔节”来了！用这里来测试一下你的页面在CSS裸奔时的姿态吧。这个也是检验页

面健壮性和可访问性的重要测试。虽然，现在在中国会访问网页的盲人还不是很多。

【查看】菜单

IE8开发人员工具【查看】菜单

【类和ID信息】

快捷键是Ctrl+I，奇偶开关。打开以后，你就会看到页面上布满了密密麻麻的红色色块。

同时会显示出class名称或者ID名称。是的，这个就是查看类和ID信息的效果了。不过

说实话，谁会对这一坨坨红色的大便感兴趣？不仅把页面搞的看上去像个缝满补丁的乞丐

服，而且完全看不清楚-_-b...

【链接路径】

和上面一样。它会把页面中的所有超链接都会一坨坨的红色框出来，并且显示其链接地址。

【链接报告】

使用链接报告功能，开发人员工具会帮你生成一份此页面的链接报表。包含链接数量、链接

地址、是否新窗口打开等信息。不过，具体这玩意有什么用。我也不知道。

【选项卡索引】

高亮显示出所有包含tabindex属性的元素。tabindex属性的设置，可以改变网页元素获

得焦点的顺序。

【访问键】

高亮显示所有包含“accesskey属性”的元素。设置accesskey属性，可以设定元素获得焦

点的快捷键。

【源文件】之“带有样式的元素源”

生成一份包含选中元素样式、HTML代码，网页级别信息的源文件。

必须先选中一个元素，此命令才有效。而且生成的源文件也只与选中元素有关。

【源文件】之“DOM（元素）”

快捷键是Ctrl+T。生成一份源文件。此源文件只包含选中元素的DOM结构信息。用过Fi

reBug的朋友，可以联想到“拷贝元素HTML代码”这个命令。其实这个和那个差不多。只

是这个是生成到一个窗口，而FireBug直接复制到剪贴板而已。

【源文件】之“DOM（页面）”

快捷键Ctrl+G。生成一份源文件。此源文件包含整个页面的DOM信息结构。非常操蛋的

功能，不知道是不是因为bug的原因，此功能其实就是“查看网页源码”。因为，生成的源

码并不仅仅是DOM信息，也包含CSS和脚本信息等。

【源文件】之“原始状态”

极其操蛋的功能，其实就是“查看网页源码”。大家应该都比较喜欢用鼠标右键直接在网页上

点吧。

【轮廓】菜单

【轮廓】菜单，很明显就是把满足条件的元素勾画出来显示的命令。

【表单元格】

就是把form表的各个单元格用桔色线框出来。让你知道——哦。原来这里就是表的单元格

呀。

【表】

就是把form表单用桔色线框出来。让你知道——哦。原来这里就是form表单呀。

【DIV元素】

就是把页面中的所有div元素用绿色线框出来。让你知道——哦。原来这些都是div元素呀。

【图像】

就是把页面中的所有img元素用紫色线框出来。让你知道——哦。原来这些都是img元素

呀。

【任何元素】

这个比较强劲了。你可以自定义任何标签和他们要用什么颜色的线框出来。点击这个菜单，

会弹出下面的对话框。很简单。不再做说明了。

【定位元素】之“相对”

会用绿色线框出来，所有具有position:relative样式的元素。

【定位元素】之“绝对”

会用黑色线框出来，所有具有position:absolute样式的元素。

【定位元素】之“固定”

会用蓝色线框出来，所有具有position:static样式的元素。

【定位元素】之“浮动”

会用黄色线框出来，所有具有float样式的元素。

【清除轮廓】

当你的页面已经被各种颜色的线搞的像Excel表格一样的时候，你可以可以使用这个命令

来清除所有的线了。

【图像】菜单

很明显，这个命令就是控制页面上各种图片的。

【禁用图像】

为了不侮辱你的智商，这个就不说了。唯一一点需要说明的是——不仅仅是img元素，而

且连元素的背景图片都会被禁用哦。

【显示图像尺寸】

很不错的功能。可以不用查看图片属性就快速的知道各个图片的尺寸大小，当然，单位是像

素。

【显示图像文件大小】

很不错的功能。可以不用查看图片属性就快速的知道各个图片的文件大小，当然，单位是字

节。

【显示图像路径】

很不错的功能。可以不用查看图片属性就快速的知道各个图片的URL路径，而且还可以复

制。

【显示Alt文本】

可以显示出img元素的alt属性的文本。顺便说一下：图片的alt千万不要进行关键字的堆

砌，否则很容易被认定为SEO过渡优化。

【查看图像报告】

生成一份详细的改页面的图像报表。包含每个图片的非常详尽的信息。

【缓存】菜单

IE8开发人员工具【缓存】菜单

管理缓存和Cookie的菜单组。对于开发人员来说这个将会是非常令人欢喜的功能。

【始终从服务器中刷新】

好像很高深的命令一样。其实换句话说就是：“禁止使用浏览器缓存”。

【清除浏览器缓存】

快捷键Ctrl+R。没啥好说的，只是简化了以前的操作步骤而已。

不知道你注意到菜单中【清除浏览器缓存】后面有三个点没有。这个表示，点击此菜单后会

确认对话框。

【清除此域的浏览器缓存】

快捷键Ctrl+D。没啥好说的，只清除本域下的浏览器缓存。

【禁用Cookie】

没有什么好处说。不让吃饼干了。

【清除会话Cookie】

清除浏览器所有的Cookie。你的论坛呀，社区呀都等着重新登陆吧。

【清除域的Cookie】

只清除本域下的Cookie。

【查看Cookie信息】

查看此页面包含的Cookie信息。想都别想，密码你是得不到的。

【工具】菜单

开发人员工具附送的一些很有用的小工具，虽然相比其他专门的相关工具有点弱。但是应急

还是足够的。

【重新调整大小】

非常有用的小工具。可以快速的将浏览器窗口调整到相关的尺寸。这样，测试网页分辨率兼

容性的时候就方便多了。

【显示标尺】

一个简单的标尺工具。使用它可以度量长度、距离等信息。线的颜色是可以换的。也可以创

建多个标尺。如果太细微的地方，可以使用放大镜功能。

【显示颜色选取器】

一个简单的拾色工具。点击鼠标就可以选中颜色。不过，我向你推荐另外一个工具——《我

的工作工具箱——抓色工具(ColorPic)》，相比之下，开发人员工具中的这个就太简单了。

【验证】菜单

必将引起江湖腥风血雨（谢谢小七同学提醒我这个突然忘记了的成语，唉～可能最近看的武

侠小说比较少的缘故吧。但是不知为何好像对“娇喘连连”这类成语比较熟）的菜单。不久的

将来必将产生无数的孔乙己。

【HTML】

验证页面的HTML代码。会将本页面发送到w3c的html验证工具，并得到验证报表。

【CSS】

验证页面的CSS代码。会将本页面发送到w3c的css验证工具，并得到验证报表。

【源】

验证页面的源文件代码。会将本页面发送到验证工具，并得到验证报

表。

【链接】

验证页面的链接。会将本页面发送到w3c的验证工具，并得到验证报表。

【本地HTML】

打开w3c的html验证工具，对本地的页面进行验证。

【本地CSS】

打开w3c的CSS验证工具，对本地的页面进行验证。

【辅助功能】之“WCAG清单”

验证页面的WCAG(Web Content Accessibility Report-页面的可访问性)。会将本页面

发送到验证工具，并得到验证报表。

【辅助功能】之“第508条清单”

验证页面的508 Standards。会将本页面发送到验证工具，并得到

验证报表。

【多个验证】

同时验证对页面进行多个规范的验证。

IE8开发人员工具的集合验证对话框

对于页面的验证，我想说两句：其实页面是不是一样要通过验证才能上线呢？我个人感觉完

全没有必要。如果你是学生，躺在象牙塔里面。你可以随便怎么折腾你的页面，因为你就是

客户，你就是有时间，你就是追求完美。但是商业项目，完全没有必要为了一个“PASS”而

浪费宝贵的项目资源。因为没有哪个客户会在乎“你看，我们做的这个页面是经过w3c多方

面验证的。”如果真的有客户在乎了，那么我只能说，我很崇拜你的“忽悠”能力。

敬请期待下一集

本篇文章已经简单的把开发人员工具的各个菜单讲解了一遍。相信，大家已经可以简单的使

用起这个强大的工具了。

但是更为强大的功能，我们还完全没有讲到。所有，请期待我们下一篇文章吧。下一篇文章

《IE8"开发人员工具"使用详解下(浏览器模式、文本模式、JavaScript调试、探查器)》，

将会详细的讲解浏览器模式、文本模式、JavaScript调试、探查器等功能的使用，敬请期

待，谢谢。

所属话题：IE 8正式版发布

Tag标签: IE8,IE8开发人员工具,开发人员工具

IE8"开发人员工具"使用详解下(浏览器模式、文本模式、JavaScript调试、探查器)

浏览器模式

应了《无间道》的那句话——“出来混，迟早是要还的！”。IE6种下的苦果，现在果然到了

要咽下的时候了。当IE8发布的时候，他不得不面对着世界上成千上万“只有在IE6中才能

正常显示”的页面。不发布IE8了吧，FireFox和Chrome又跟着后面抢蛋糕；不管那些“I

E6 only”的页面吧，那浏览器出来还不被人骂死；让所有的站长都把页面重构吧，想想自

己都要笑。唉，这可咋整呀。

唉，有了，咱采取一个手段，让用户自己去处理，如果他碰到了“IE6 only”页面，就让他

自己手动处理一下，让浏览器还用老的渲染模式渲染页面，这虽然麻烦了一点用户，但是也

不失是个办法。于是“浏览器模式”出来了。说白了，就是让用户选择当前页面用何种IE版

本去渲染。

举个例子吧，顺便练习一下《IE的有条件注释详解》，核心代码如下——

让我们来试试这个页面，在不同的浏览器模式下的显示效果吧——

IE8开发人员工具之浏览器模式

对于普通用户，微软官方推荐的是这个玩意——兼容性视图按钮。

当然，对前端开发人员来说，这个工具主要用来测试页面多浏览器兼容性而已。但是非常遗

憾的是：没有IE6模式。没有IE6的世界，虽然是一个美好的愿望，但是可惜的是：我们

生活在现实之中，或许说生活在地狱中更确切。所以，我还是不得不提下面的两个工具——

IE多版本共存的解决方案——IETester

微软网页开发调试利器SuperPreview（附下载）

文本模式

说起“文本模式”这个名词，这又要回到渲染页面的3种模式了：诡异模式（Quirks mode，

也有翻译为兼容模式、怪异模式的），标准模式（Standards mode），和几乎标准模式

（Almost standards mode）。这是一个非常重要、但是很多人却比较模糊的概念。一

两句话不太能说清楚，这样说吧——“页面的不同渲染模式，将直接影响页面的最终呈现效

果”，也就是说，一个页面如果在这种模式下显示完美，但是在另外一种模式下可能就显示

的一塌糊涂。而决定页面模式的是页面的!DOCTYPE属性。

乖乖，这玩意太绕人了，还是直接上例子吧。最经典的就是对盒装模型的解释差异了。下面

两个图，是相同页面，采用不同页面渲染模式的最终显示效果。

页面很简单，只要一个div元素，然后随便设置一点高度、宽度、padding、margin就可

以了。核心代码如下——

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

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

明显的变化。

关于文本模式的详细资料，我建议你看这篇文章《Quirks mode、Almost standards

mode、Standards mode》。虽然是英文原版的资料，也绝对值得翻着字典看完。还有

这篇视频教程中，我也有较为详细的介绍到，《“阿一web标准学堂”第4课》

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

重头戏来了。很多朋友梦寐以求的功能呀——JavaScript脚本调试。一直摆脱不掉FireFo

x，就是因为Firebug实在太好用。虽然利用VS这样航母级的软件也能进行JavaScript

脚本的调试。但是，很多前台开发人员并不会为了一个JavaScript调试功能而去安装那种

大家伙。所以对JavaScript的调试，IE的用户一直耿耿于怀。但是，现在终于可以平息了。

因为IE8开发人员工具终于也有了小巧，却功能强大的JavaScript调试功能。

不多说，直接上例子，这里就举一个简单到弱智的例子吧。核心代码如下：

Button

还是让我们先看看脚本调试界面吧

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

图上的说明已经很清楚了，下面就详细讲一下“控制台”、“断点”、“局部变量”、“监视”、“调

用堆栈”这些视图吧。

控制台

在控制台会显示脚本调试中的一些信息，例如错误信息、警告信息一类的。

恩，其实也可以当成是一个微型JavaScript运行环境。你可以在这里直接键入脚本并运行。

如果一行不够的话，可以切换到多行模式。输入完毕后，点击“运行脚本”，就可以看到运行

结果了。

断点

是一个显示你设定的所有断点的列表。方便你统一管理：统一删除、统一使用或者统一禁用。

局部变量

我非常喜欢的视图之一。可以详细的显示各个变量的所有方法、事件和属性。我最喜欢干的

事情，就是一个个的看下去，看到不知道的就去查资料，绝对是个学习JavaScript的好方

法。例如，下面途中这就发现了一些IE8特有的方法。

监视

我非常喜欢的视图之一。可以显示任意你需要的变量的方法、事件和属性。可以添加多个。

整体来说和局部变量视图差不多，只是可以更灵活的显示你需要的而已。

调用堆栈

可以直观地显示函数调用堆栈情况，以及现在执行到哪个函数的情况。对于理顺脚本的运行

顺序和嵌套很有帮助。

IE8开发人员工具的探查器

“探查器”这玩意一开始还真的让我摸不到头脑，还以为是类似那些国产的，用在马桶或者世

界之窗上的插件，用来分析出网页中的flash或者视频、音频地址的呢。到后来，看到的英

文原版的才知道，其实就是——“Profiler”。

用过微软SQL数据库中的Profiler的朋友都知道，那个一个帮助SQL分析效率的工具。

它会记录所有的执行以及他们的执行时间，从而提供一份报表。这样，就可以知道到底是什

么在效率上拖l了后腿。

IE8 的探查器(Profiler)，也引入了这个概念，只是它探测的是JavaScript脚本而已。

先点击【开始配置文件】按钮，然后运行脚本或者刷新页面。等脚本执行完了，或者页面刷

新完毕后点击【停止配置文件】按钮，就会生成探查报告了。

它提供两种视图，一种是“函数”，另一种是“调用树”。无论何种视图，都可以清晰且忠实的

展现出各个函数的执行所用时间。从而，方便你分析出“为啥我的页面那么慢呢？”

函数视图

函数视图可以方便的按照各个参数进行排序，从而方便的找出类似“谁用的时间最长”这样的

答案。

调用树

调用树视图可以方便的看出各个函数之间的调用关系。

一些关于IE8开发人员工具探查器(Profiler)的资料

如果，你还没有过瘾的话，可以看看下面这篇文章，绝对权威。《Introducing the IE8

Developer Tools JScript Profiler》

结束了？其实才刚刚开始

虽然貌似很多地、洋洋洒洒地、图文并茂地讲了两篇文章。其实回头看看也没讲什么东西。

只是截图滥竽充数比较多而已。好在，文章中不时地，还丢出几个相关文章的链接出来，所

以，应该还不至于让人感到“看完以后完全不知所云”的样子。

其实工具，仅仅是个工具，再详解、再举例、再截图都是白搭。如果真的想用来提高你自己

的工作效率，最终还是需要你自己的动手摸索，用在自己的页面上。所以，看完文章的你，

赶紧打开IE8的开发人员工具，现在就试试吧。它一定可以带给你惊喜的。

所属话题：IE 8正式版发布

Tag标签: IE8,IE8开发人员工具,开发人员工具

本文标签： 页面工具元素模式开发人员