IE开发利器-IE10中的F12开发者工具

       在IE中开发网站一直是一个难题，由于IE中一直缺乏一个如firebug那样的开发者测试工具，尽管有着IEtester这种能够查看IE各版本下网页显示状况的工具，可是却不能像firebug那样进行有效地查看代码是如何在firefox中呈现的，可是如今咱们有了IEF12开发者工具。分析 HTML 代码时，经过 F12 工具看到的视图就是 Internet Explorer10 文档对象模型 (DOM) 解释页面的实际方式，并非原始的源代码。咱们利用脚本开发网站时，就能够看到IE解释以后实际的代码了。

F12开发者工具的功能

       当在IE下开发时必不可少的工具，可以快速调试 JavaScript、HTML 和CSS，还能够跟踪并查明网页或网络的性能问题。

如何打开F12开发者工具

       想要用F12开发者工具，就得先知道咋打开它。在 Internet Explorer 10 中任何页面上均可以使用 F12 工具，步骤以下：按 下F12 或单击右上角的工具按钮

而后选择“F12开发者工具”选项。F12 工具默认是在一个单独的窗口中打开

 ，但能够经过单击固定按钮

或按 Ctrl+P 将其固定到使用的页面。请注意，在“脚本”选项卡（已单击“开始调试”）上进行调试时，不能固定该窗口。

固定以后的样子。。。感受样式仍是太难看了。。。

       若是不须要完整的工具界面，则可在固定工具后单击最小化按钮或按 Ctrl+M。这些工具将在窗口底部显示为一行，从而提供对“命令菜单”栏的访问，请注意是在固定工具以后，若是F12工具此时在单独的窗口，则Ctrl+M无效，再按一次Ctrl+M则工具还原为完整的工具页面。

如何使用F12工具

       要想知道F12开发者工具如何使用，咱们就得一步步来介绍面板上的各条菜单栏

"文件"菜单

在这个菜单下有以下的命令

（1）所有撤销：当你对某个网页作了大量的更改时，，却发现让页面愈来愈糟糕，这个时候，你能够试试所有撤销，他会重置对 Windows Internet Explorer 的当前实例的全部更改（如属性值）并刷新网页。好吧，我其实想说我总以为这个和F5没啥区别。。。

（2）自定义 Internet Explorer 查看源文件 ：说白了。。。就是定义网页的源文件的打开方式。。。有三种第一种是使用IE内置的默认查看器，第二种使用记事本打开，第三种就是你能够浏览并指定计算机上安装的其余编辑器或查看器应用程序来查看源文件。

（3）联机帮助：会跳转到F12开发者工具文档页面

（4）退出：按下F12就能够退出了。。。

"查找"菜单

       这个菜单里只有一项，就是单击选择元素，快捷键是Ctrl+B，在视图工具栏里一直存在，就是 ，当鼠标悬停在页面上方时在网页上突出显示元素。在单击某个突出显示的元素时，HTML 选项卡将打开，并在代码窗格中滚动到所选元素，而且会突出显示该元素。细节窗格（右侧窗格，原本想叫属性窗格来着，可是IE已经把其中一个叫作属性了。。。）会根据你选择的当前细节类型（样式、跟踪样式、布局或属性）显示选定元素的细节。

"禁用"菜单

       此菜单可帮助测试当用户禁用其浏览器中的特定功能时，会在你的网站上得到怎样的用户体验。经过使用此菜单，你能够打开或关闭这些功能。

（1）脚本：禁用网页上的全部脚本。选定这个菜单以后后，页面会刷新并禁用网页上的全部脚本。若是“Internet  安全性”的“启用保护模式”设置为选中状态，以下图，

那么命令不可用。若要使用此命令，就要打开上图中这个“安全“选项卡，使“启用保护模式”为未选中状态

（2）CSS：在网页上禁用全部级联样式表 (CSS)。选定这个菜单后，页面会刷新为关闭 CSS。若是此时咱们刷新网页，或者开始调试刷新网页的脚本，将从新启用 CSS。

“查看”菜单

       经过这个菜单就能够查看页面上元素的相关信息。不过我以为这个功能作的不是太好，由于对于有些页面来讲元素实在是太密了。。。。

       好比我相信没有人愿意在下面这个页面里来找东西，

       菜单项有如下这几个：

（1）类和 ID 信息：快捷键是(Ctrl+I)，做用是显示网页上全部 HTML 元素的 ID 值。信息会覆盖在页面上对应的元素处。双击能够突出该信息。

（2）连接路径：显示网页上全部连接的连接路径。此信息会做为文本覆盖显示在网页元素上。双击能够突出该信息。按Ctrl+C便可复制。

（3）连接报告：生成位于该网页上的全部连接的列表并在新窗口中显示此列表。这样，无需浏览整个 HTML 源文件，就能够轻松方便地检查全部连接。

（4）选项卡索引：显示页面上选项卡索引已定义的元素的选项卡索引。

（5）访问键：对于网页上已定义其 accesskey 属性的元素，将其accesskey显示出来。

（6）源：子菜单以下。

源子菜单项	描述
带有样式的元素源	仅在新窗口中显示选定元素的 HTML 源及其内容，以及适用于它的 CSS。这有助于只关注选定元素的源文件。必须首先选中某个 HTML 元素，而后才能够执行此命令。
DOM（元素）	在新窗口中只显示所选元素的 HTML 元素及其内容。请首先使用“HTML”选项卡视图选择 HTML 元素，而后才能够执行此命令。
DOM（页面）	在新窗口中显示所有 HTML 源，从而显示嵌套的元素。此源文件显示页面的文档对象模型 (DOM) 结构，包括使用脚本动态写入 DOM 中的源文件。
原始	在新窗口中显示原始 HTML 源，脚本写的不会显示出来，和右键查看源文件是同样的。

“图像”菜单

       此菜单提供的命令经过帮助你识别元素的大小和位置，可帮助你了解和调试页面布局。它还能帮助你经过基于元素类型的彩色编码直观地标识特定类型的全部元素。

（1）禁用图像：刷新页面可是不显示任何图像，而且同时还会禁用“显示图像文件大小”命令，当再次刷新以后图像就会显示出来了。

（2）显示图像分辨率：对于网页上的全部图像，将图像分辨率显示在图片上。

（3）显示图像文件大小：对于网页上的全部图像，将图像文件大小显示为文本覆盖。文件大小以字节为报告单位。若是使用“禁用图像”命令，则禁用该命令。

（4）显示图像路径：将全部的图像其绝对路径显示在图像上。

（5）查看 Alt 文本：有Alt文本的图像会显示其Alt文本（没有的天然不会显示）

（6）查看图像报告：

这个菜单我没有搞明白。。。由于在我这里会报错

以下图。。。我也不知道为啥会出这个错误。。。若是知道的话，但愿你告诉我。。。

“缓存”菜单

       在这个菜单中的菜单项主要和浏览器缓存和cookie有关

（1）始终从服务器中刷新：强制 IE始终从服务器获取网页内容而不是使用缓存的内容，也就是说当你使用该命令时，响应码将会都是200而不是200和304共存，在你修改CSS文件时我以为比较有效，不会出现文件中CSS代码修改后由于浏览器的缓存问题而让人觉得修改的代码没有做用。另外须要注意的是此命令会持续有效，直到你将其清除或 Internet Explorer 实例关闭。

（2）清除浏览器缓存... (Ctrl+R)：删除浏览器缓存以及全部临时文件。

（3）清除此域的浏览器缓存... (Ctrl+B)：只删除属于当前域的浏览器缓存和全部临时文件

（4）禁用 Cookie：禁止今后 Internet Explorer 实例使用全部 Cookie。此命令会持续有效，直到你将其清除或 Internet Explorer 实例关闭。

（5）清除会话 Cookie：删除此浏览器会话期间获取的全部 Cookie。

（6）清除域的 Cookie：删除当前域中的全部 Cookie。

（7）查看 Cookie 信息：生成 IE中存储的全部 Cookie 列表并在新窗口中显示出来。

“工具”菜单

       此菜单提供了各类能帮助你完成常见任务的工具，如使用不一样的分辨率测试网站、更改用户代理 (User-Agent) 头信息、测量页面面积和捕获页面上某一点的具体颜色。

（1）调整大小：提供一个子菜单（其中提供了某些预先定义的屏幕大小）和一个用于自定义屏幕大小的选项。选定某个预约义屏幕大小后，Internet Explorer 窗口将会当即从新调整为选定的尺寸。选择自定义设置会打开一个对话框，你能够在其中输入本身要测试的屏幕大小。自定义的设置关闭浏览器后仍然存在，之后想用还能够接着用。这个应该算是前端人员的一个好帮手。能够不用再去满世界找不一样的电脑看页面跑不跑了。。

（2）更改用户代理 (User-Agent) 头信息：一般网站为了使用户的体验基本一致，会在用户访问网站的时候，经过用户代理 (User-Agent) 头信息来判断用户所使用的浏览器。而在此处能够更改在请求网页时发送到网站的用户代理 (User-Agent) 头信息。这里面有一组预设的用户代理 (User-Agent) 头信息和一个自定义选项。自定义选项会显示一个对话框，可在其中输入本身的字符串。保存自定义项后，它们会出如今“更改用户代理 (User-Agent) 头信息”子菜单中。刷新网页可以使更改显示出来。

好比：

当我把用户代理 (User-Agent) 头信息设置为Opera的时候

此时，能够看到用户代理 (User-Agent) 头信息变为了opera，尽管个人是IE10.。。

那么对这种浏览器支持修改用户代理 (User-Agent) 头信息状况应该怎么保证其体验与其余用户是一致的呢？咱们已经没办法再用浏览器检测的方式了，msdn上提供了一种方法，经过功能检测来验证对基于标准的功能的支持。

地址在这里:http://msdn.microsoft.com/zh-cn/library/vstudio/hh273397.aspx

（3）导航时清除项：当你在调试会话中导航到新网页时，使你能够清除或保持“控制台”消息和“网络”选项卡日志。默认状况下，当你离开某个页面时，Internet Explorer 会清除全部控制台消息和网络选项卡捕获日志。

（4）显示标尺 (Ctrl+L)：容许你测量屏幕上的任意对象。“标尺”对话框打开时会显示选项和工具的使用提示。支持多种颜色和多个标尺。为了精确性，还提供了一个放大镜。按CTRL+M 可打开或关闭放大镜。标尺相对于屏幕上点的位置显示标尺每一端的坐标 ("x,y")，而长度以像素为单位显示在标尺的中间。当你将光标移到标尺上时，测量值还会显示在“标尺”对话框的底部。能够对标尺进行移动、调整大小和调整角度。若要删除某个标尺，请选中它并按Delete 键。关闭标尺对话框的话 将隐藏全部标尺。打开“标尺”对话框能够显示它们。值得注意的是。。。当你最小化IE时，标尺仍然存在。。。

（5）显示颜色选取器 (Ctrl+K)：显示颜色选取器工具，以从页面上的任何对象采集颜色样本。“颜色选取器”对话框显示选取器所在的颜色样本。我最欣赏的就是这个可以同时把颜色的 RGB 和 HEX 值都给我。。以下图

（6）轮廓元素：经过使标识元素的大小和位置，帮助你了解和调试页面布局。你能够设置一种颜色来标识特定元素类型的全部元素。 可以使用 CSS 选择器语法在网页上指定元素。例如，要突出显示全部连接，请在选择器字段中使用a，而后设置一种颜色。

“验证”菜单

       此菜单使你可使用 Web 上的验证服务验证当前网页或计算机上的文件。会弹出一个对话框确认你是否要采起此操做；若是选否，验证将会取消。

（1）HTML：在新窗口中验证当前网页的 HTML。

（2）CSS：在新窗口中验证当前网页的 CSS。

（3）源：在新窗口中验证网页的整合 (RSS) 源。

（4）连接：在新窗口验证当前网页中的全部连接。

（5）本地 HTML...：打开w3c的一个新窗口（网址是http://validator.w3.org/），该窗口的validate by File upload能够用来验证html文件（固然你也能够直接往validate by Direct Input中直接写Html）。

（6）本地 CSS...：和验证Html的差很少，不过网址变成了http://jigsaw.w3.org/css-validator/

（7）辅助功能：里面有两项：

第一条是WCAG 清单即W3C 的 Web 内容辅助功能指南 (WCAG)。Web内容无障碍指南（WCAG）涵盖范围普遍，涉及了一些建议，这些建议可以使网站内容更容易访问。遵循这些原则，web内容更易为广大残疾人士所接受，。

第二条是第 508 条清单 这是美国政府关于建立可访问网页的辅助功能指南。

（8）多个验证：你能够在一个请求中运行一个或多个验证。选择所需的验证，而后单击“肯定”启动请求。每一个选择都会打开一个新选项卡中并包含产生的验证结果。

“浏览器模式”菜单

        这个命令使你能测试网页在面向运行其余版本 Internet Explorer 的用户时会如何操做。也就是说你能够查看IE 7,8,9,10和IE10兼容视图这几种浏览器模式，多厉害。。请记住当你选择 某一浏览器模式时，则你的网页将基于该浏览器呈现，而且将没法访问只在新版本的 Internet Explorer 中提供的文档模式。

“文档模式”菜单

       你能够测试其余版本的 Internet Explorer 会如何解析你的页面。对网页所作的更改会影响该页中的全部文档，包括 iframe。

浏览器模式和文档模式有啥区别？简单来讲就是“浏览器模式”影响的是浏览器的版本及IE的条件注释，“文档模式”的切换会直接影响到页面的渲染，具体的能够看一下这篇文章http://www.cnblogs.com/sniper007/archive/2012/11/05/2755170.html

选项卡

       介绍完菜单栏，如今让咱们了解一下视图工具栏，能够看到这里是有6个选项卡，如今让我来介绍一下他们的功能吧

Html选项卡

       修改Html代码和CSS代码在F12开发者工具中是十分容易的，单击一段代码（不管是Html面板仍是右面的细节面板中的CSS均可以点击），以后你就能够更改它了，不过要注意，当你刷新以后，你所作的修改不会继续生效的。

       让我来从左到右介绍一下：

（1）单击选择元素：快捷键是Ctrl+B这是每一个选项卡上都有的，做用就是选择页面上的元素，以后元素的代码会在下方的Html面板高亮显示出来。右面的细节面板那里会显示样式，跟踪样式，布局以及属性。

• 样式 显示你在树视图中选择的元素的规则和样式。它按规则进行组织，并包含继承的CSS和重写的CSS。

• 跟踪样式 显示与样式相同的信息，可是按属性而不是规则分组。

• 布局 显示所选元素的框模型。经过单击图表中的相应值，可更改“布局”视图中的任意值。

• 属性 显示选定元素的属性，如 ID。能够添加或删除属性

（2）清除缓存：快捷键是Ctrl+R，做用是清除现有页面的缓存下次刷新时将会从服务器处取得最新的网页信息。一样也是每一个页面上都有。

（3）保存：对元素进行了修改以后，使其保存下来

（4）刷新：就是F5罢了，不过当处于编辑状态时，该按钮不可用。

（5）“带有样式的元素源”按钮：仅在新窗口中显示选定元素的 HTML 源及其内容，以及适用于它的 CSS。这有助于只关注选定元素的源文件。必须首先使用“HTML”选项卡视图选择 DOM 树的主体内的某个 HTML 元素，而后才能够运行此命令。若要选择某个元素，可单击“单击选择元素”按钮，或在 DOM 树中单击某个元素。

（6）编辑：对Html面板中的代码进行编辑，当结束编辑时，再次按下该按钮，则页面按修改后的代码进行显示，不过刷新后修改就会消失，所以记得保存。

（7）自动换行：当点击编辑按钮以后，点击这个按钮就会对太长的Html代码进行自动换行，其余时候该按钮是不可用的。。。

在这里的代码会把<Iframe>中的代码一并显示出来，而在右键单击菜单中的查看源后出来的源文件中则没有<iframe>中的代码...

注意这两张图片中iframe的不一样处理方式。

CSS选项卡

       这个选项卡和Html选项卡相似，

       这里惟一要注意的就是最右面的下拉列表，下拉列表中选项是由当前页面全部用到的CSS组成的，在这里选择一个文件，而后就能够对CSS文件进行编辑了。

“CSS”选项卡上的快捷菜单选项

       当你右键单击“CSS”选项卡时，就能够打开快捷菜单。不过要注意，启用的选项是上下文相关的，当你在不一样区域点击时，能使用的菜单项也不同

菜单项	做用	右键单击的位置
添加属性	向标记或元素中添加新的属性。	在规则或属性（任何元素）上。
添加规则	添加选择器、声明或样式。	在白色区域中，而不是在现有元素上。
以后添加规则	在当前规则以后添加选择器或规则。	在任何元素上。
以前添加规则	在当前规则以前添加选择器或规则。	在任何元素上。
删除属性。	删除选定的属性。	在任何特性上。
删除规则	删除选定的规则和全部相关的属性。	在任何规则或选择器上。

控制台选项卡

这里的按钮只有两个，就是单击选择元素和清除浏览器缓存

按下enter就能够运行本身的代码

如何使用控制台来输入代码，咱们能够看看

http://msdn.microsoft.com/en-us/ie/gg589530(v=vs.85)

至于控制台错误消息，能够看看这个网址。。。

http://msdn.microsoft.com/en-us/ie/hh180764(v=vs.85)

脚本选项卡

脚本选项卡帮助咱们对网页上的脚本进行检查。经过文件源能够找到其余文件，并对他们进行操做。这个选项卡十分的像一个编译器，在左面的页边单击或行号上右键单击点击就能够设置断点,在断点上点击就能够设置断点条件。按F11就能够逐语句调试，按F10就能够逐过程调试。怎么样？？和VS的感受是否是有点像？？

（1）单击选择元素：和上面的命令一致。

（2）清除浏览器缓存：和上面的命令是一致的。

（3）继续：快捷键是F5，和我常常用的VS是同样的。。。继续执行，直到到达断点或者出现错误。

（4）所有中断：在下一条语句执行以前就当即中断

（5）逐语句：就是F11，咋用都知道吧？？执行脚本的下一行，即便是在一个新的函数里

（6）逐过程：F10。。。把子函数当作一步来执行

（7）跳出：用跳出就能够执行完子函数余下部分，并返回到上一层函数。

（8）配置：这是一个下拉列表，其中我最喜欢的是格式化js代码。

格式化以后看的就是舒服啊!!!!

下拉列表中的选项：

• 在未处理的异常处中断：若是异常没有被处理那么就中断

• 在全部异常处中断： 只要抛出异常就处理

• 异常后继续：跳过异常继续执行

• 自动换行：一行里的代码太长，就让其自动换行

• 格式化js代码：让js代码更易读

探查器选项卡

       F12 开发人员工具提供了内置脚本探查器，你能够利用它分析在 IE10中运行的 JavaScript 代码的性能。

探查器让你可以开始和中止分析，并提供了一些有关函数、函数的运行次数以及每一个函数运行的时间的视图或报告。

分析函数

       当咱们第一次使用“探查器”选项卡时，网格是空的。单击“开始采样”按钮，而后运行你要在浏览器中分析的代码。若是你要从网页的初次加载开始，请单击“刷新”以运行页面上的代码。在须要中止收集数据并查看结果时，单击“中止采样”。 要只分析某个代码部分，要单击“开始采样”，仅在浏览器中运行相应的代码部分（如从某个按钮单击调用的某个函数），而后再单击“中止分析”。

查看分析报告

       单击“中止分析”以后，F12工具会自动生成报告。每一个探查器会话都是一个独立的报告，所以，你能够运行任意次数的分析（例如，针对脚本的多个部分）或修改值，以及再次分析相同部分。默认状况下仅显示最新的探查器报告，但你能够单击“当前报告”下拉列表来查看其余报告。

能够经过函数视图或调用树视图这两种方法查看报告。“函数”视图按照函数运行顺序显示全部函数。“调用树”视图显示函数的层次结构，以便你能够更轻松地查看父项和子项的关系。

网络选项卡

       经过显示某个网页的连接状况，网络选项卡能够帮助咱们分析网络相关的各项状况，而且显示不一样链接的具体信息。

摘要试图

       经过单击开始捕获按钮来捕获网页链接网络状况，点击中止捕获则再也不捕获。单击转到详细视图则跳转到详细视图，经过对某一条目的双击，能够转到该条目的详细视图。”计时“这一项显示了各项所用的时间，能够更快的找出到底是哪里拖慢了网页的加载。

可是不得不说url这列作的有点差劲，咱们看一下chrome中的对应面板。

能够看到在chrome中，每一行都很宽（废话是吧。。。）所以在url这列中，咱们就能够很是直观的看到每一行的文件的类型是什么，可是在IE中文件的名称都是在末尾，所以就形成查看时候不是十分方便（顺便说一句，chrome中看的就是比在IE中漂亮。。。IE仍是有很长的路要走啊）

详细视图

       点击上一步，下一步能够在不一样条目中切换，点击返回摘要试图，就返回到了摘要试图。

      IE的F12开发者工具并不仅是这一点功能，还有许多功能可让人眼前一亮。因此，让咱们一块儿来发掘IEF12的用法吧。

MSP（Microsoft Student Partners）是微软公司针对高校

大学生在全球范围内所设立的项目。旨在鼓励那些在校园里积极倡导、推进创新实践，

乐于积极帮助他人的优秀学生，给他们提供微软最前沿的技术资源，以及更普遍的交流、展现自个人平台。 　　

MSP项目面向全部热爱技术、敢于创新、积极推进创新实践、愿意和他人分享本身所学的在校大学生，并不只仅局限于技术类背景的学生。

若是你喜欢的话，欢迎加入。地址

http://msdn.microsoft.com/zh-cn/jj889435.aspx