IE开发人员工具教程

写在前面

一直很是谷歌的控制台，由于我是作前端的，谷歌浏览器在我看来是解析JS最快的浏览器，所谓的熟能生巧，用熟悉了谷歌浏览器以后就特别喜欢用谷歌的控制台调试脚本、改变样式、查看HTML、查看资源加载等信息。

在这儿推荐两篇关于谷歌控制台怎么使用的三篇博文（在我看来这三篇博文是我看过介绍谷歌控制台最佳最全的使用手册啦）

Chrome 控制台不彻底指南   http://www.cnblogs.com/Wayou/p/chrome-console-tips-and-tricks.html

Chrome 控制台console的用法（学了以后对于调试js但是大大有用的哦）  http://www.cnblogs.com/ctriphire/p/4116207.html

 

Chrome控制台如何调试JavaScript   http://www.cnblogs.com/ctriphire/p/4117370.html

 

进入正题

我这篇文章可不是想介绍Chrome控制台，作前端最重要的就是要保持各个浏览器兼容，即便Chrome控制台很强大，但你能保证你的全部用户都能像你同样是Chrome的忠实粉丝吗？何况IE浏览器在中国市场上的占据份额那也是至关大的一部分的。

在此介绍一下IE开发人员工具（在没熟悉使用IE开发人员工具以前，我是打心底里特别讨厌IE的，熟悉使用以后才发现原来IE开发人员工具也是蛮可爱的）

其实从这件事情以后获得一个结论，不要议论任何人或者任何事很差，要怪只能怪你不懂。对万事万物仍是怀着一颗宽容博大的心能让本身活得洒脱幸福些。（这是费话，你们跳过不看）

简单介绍

像Chrome控制台同样，要打开IE开发人员工具也是按快捷键F12便可。

能够看到，在主工做区中有六个选项卡----HTML、CSS、控制台、Javascript（脚本）、Profiler（探查器）、网络。这就是开发工做的主要环境。

一、HTML是默认的选项卡，网页的源代码就以DOM树的形式在其中展现。点击最左边的+号，能够展开/收缩该DOM元素。

二、CSS选项卡主要是列出页面的样式，若是当前页面有多个外部样式表的话，则能够从下拉选择框中进行选择来查看相应的样式文件。

三、控制台选项卡主要是方便开发人员进行日志记录或者脚本调试等（如今IE9也支持console.log 不信你在下方的文本框里面输入试试），固然你也能够在里面输入多行脚本而后点击右侧的小绿色按钮（绿色按钮叫运行脚本）

四、脚本选项卡就很少说了，主要是方便开发人员进行脚本调试。（在下文中将会介绍如何进行脚本调试）

五、探查器选项卡主要用来进行脚本调优和脚本统计等功能，它列出Javascript脚本中每个函数、每个命令运行的次数和所花费的时间，颇有助于找出网页代码的性能瓶颈。

六、网络选项卡通常用来查看资源的加载信息

其它话

你们可能都知道，外部样式会被页面上写的同种样式复写而致使外部样式不生效，在FireBug里面，样式选项卡里面是不会显示出不生效的样式，这一点我认为IE是作的比较好的，它会将全部样式都显示出来可是对于失效的样式会使用删除线的形式，列出被其余CSS命令取代的样式设置，能够很方便地看出样式之间的继承关系。

另外小技巧就是颜色取色器，作前端可能你们都会时不时的想要变换样式，想要改变颜色，在IE开发人员工具里面，点击   工具-->显示颜色取色器   这样就打开了一个颜色取色工具，以下图所示，点击那个取色图标的按钮就能够进行取色了（不过你可不要想着处处取色哦，你能取色的范围只能是在当前IE浏览器里面哦   你可别想着在桌面或者其它浏览器里面进行取色哦  它尚未强大到跳出当前运行环境去......）

修改网页中的文字

咱们若是想要修改网页中的文字以前必须得选择您要修改的文字，可使用两种方式进行选择

一、开发人员工具HTML选项卡第一个图标 也就是那个鼠标箭头按钮，固然你也可使用它的快捷键ctrl+b

二、直接在开发人员工具HTML选项卡右侧的搜索框中输入您要选择的文字，单击探索按钮或者按回车键便可

选择好以后，这时它所在的区域会显示蓝色边框，同时在开发人员工具里面选中的部分会以高亮显示，点击以后将会变成可编辑状态，修改为您想要修改的文字，按下回车后，网页就会自动更新。

修改元素的属性

运用上面的选中您要修改的元素，右击-->添加属性  而后输入您想增长的属性 好比说您想让其布局居中，输入align=center(注意这里面输入的是align=center而不是align="center"这点跟Chrome控制台仍是有差别的)

固然上述方法只能在你选择的元素上面生效。好比说你刚刚修改的元素是td，而你想让当前表格的全部td都运用居中布局的话，应该怎么作呢，选择好td元素后，切换到右面的属性选项卡，添加一个属性，名称为"align"，值为"center"。点击添加按钮。

添加完成后，会有一个"将属性应用于"的提示，选择好点击肯定便可。

 

样式相关操做

若是您要修改元素相关的样式的话，能够选中元素后，在其右侧的样式面板中进行操做。（这个操做跟Chrome控制台同样的）

若是要为网页添加一个新的样式呢，

一、在CSS选项卡中，随便选择一个规则，打开右键菜单，在"以前添加规则"和"以后添加规则"中任选一个点击

二、键入样式名，好比说.price（注意这里仅仅只是输入.price  不须要再输入后面的{}），而后打开右键菜单，选择"添加属性"。

三、添加规则，好比说border:1px solid red;若是要重复添加规则的话，仍是一样 右键菜单，选择"添加属性"......

调试JavaScript

打开脚本选项卡，”启动调试“按钮旁边有一个下拉列表框，里面加载了你当前页面所须要用到的样式，在此切换到你须要调试的脚本上。

在须要调试的脚本行上设置断点（设置断点事实上就是点击一下行首），

点击”启动调试“按钮，当你点击页面上的元素触发了你设置断点的脚本时，这时会自动跳到断点处，而后，你还能够在右面"控制台"底部的输入脚本，好比说你设置脚本的函数参数中有一个参数名为color,若是你在右面"控制台"底部的输入"color="#bee7ed""，再点击"运行脚本"，这时候函数参数color的值就为你刚刚输入的"#bee7ed"  (私下以为这个功能真好)

 

探查器面板的使用

一、选择"探查器"选项卡，点击"开始采样"。

二、在页面上点击你想要采样的元素

三、点击"中止采样"，这时就会显示出全部的代码运行信息。一共有两种查看方式，一种是"函数"，另外一种是"调用树"。

在"函数"查看方式中，能够看到全部被调用的函数信息，包括调用数量、函数执行所需时长、函数被调用的url、甚至包括具体的文件行号

在"调用树"查看方式中，能够看到函数被调用的顺序。

 

本博文的参考文献为阮大师的  IE8开发人员工具教程   ,这些天看他的博文真心受益很多，才发现人与人以前的差距不是通常的小。对本身说加油。