IE11 全新的F12开发者工具

 

我讨厌debug，相信也没多少开发者会喜欢。可是当代码出错以后确定是要找出问题出在哪里的。不过网页开发的时候遇到 BUG 是一件再正常不过的事情了，咱们不能保证本身的代码万无一失，因而使用浏览器的开发者工具调试是咱们解决问题最快捷的方法了。微软在 Windows 8.1 预览版中带来了全新的 IE11 浏览器，不光加入了诸如 WebGL 支持等功能，还将F12开发者工具进行了从新设计，这是IE有史以来开发者工具最大的的更新。

随着网站复杂程度的增长，原有的IE开发者工具已经渐渐不能知足开发者的需求，因此微软此次推出的IE11开发者工具更新主要是如下几点：

· 更加现代、简洁的界面更新

· 新的UI响应、内存检测和仿真工具

· 已有工具和功能的增强

· 更加简单快速的流程

如今 Windows 8.1正式版发布，修复了预览版中的错误后，新的开发者工具更加实用和高效了，下面就让咱们一块儿来认识下此次的主要更新：

从新构建的UI

和如今其余浏览器的开发者工具同样，IE11以前的开发者工具采用的也是基于下拉菜单和标签页的布局，不过横向的菜单占据了宝贵了网页空间，尤为是在debug的时候，咱们但愿改完一个参数就能够看到总体的变化。而IE11 的开发者工具将菜单导航放到了左侧，而且采用了简洁易用的图标，对于开发者们来讲花点时间认识新的图标比不停的上下拖动菜单轻松多了。

 

新的菜单和 Windows 8 简洁现代的风格更加贴近。欸有多余的图标和阴影效果，新的开发者工具把更大的可用空间留给了代码，和前代相比，显而易见，界面上的变化是显而易见的。

除了布局和图标的变化外，选中后页面高亮显示的功能让咱们的查看对应元素也变得很是方便。

对于没有的功能，此次更新都给加上了，而对于已经有的功能的改进主要是界面和流程上的简化。以网络资源检测为例，虽说功能上没有任何硬伤，可是UI设计和现代的Windows 8 界面很不搭调。

再看更新后的界面， 和Windows 8同样的扁平风格设计，去掉了多余的样式和设计，而且将上方的导航菜单统一块儿来，对于我来讲，在这样的界面下就算看到花10秒才能加载完的文件也要比用以前的开发者工具来的舒服啊，固然啦，这样的文件仍是不要看到的好。

界面的改变一目了然，可是有些须要更加实用的功能性改进是须要咱们使用后才能发现的，而我在用了 IE11的开发者工具才几天以后就已经彻底喜欢上了。尤为是但愿网站能够在IE 下表现更好的时候。下面咱们就看看最经常使用的一些功能改进。

DOM Explorer

IE10和以前的开发者工具也有DOM Explorer，可是你们都不想用它。对不少人来讲缺少实时的DOM更新是不想用它的主要缘由，咱们无法用它来查看CSS样式更新和附加的DOM元素。终于，在IE11的开发者工具上实时更新的功能终于加上了。

另外对于前端开发，处理 Javascript的问题是必不可少的。找到附加事件须要很多浏览器端的debug代码以及反复的尝试，最终才能肯定须要的响应事件或者方法组合。下面的截图就是我在点击登陆后就能够直接在DOM Explorer下的事件窗口下找到对应的jQuery函数，包括具体的路径和函数位置。对于前端开发者来讲这真的是能够省下很多时间而在以前的IE浏览器中这些都是没法实现的。

定位Javascript事件是从无到有的变化，而样式审查则是更加实用性的升级。以前IE的开发者工具在审查元素的时候它将全部的样式样式一一列出，咱们想要修改一些经常使用样式还须要往下滚动找到它们。

而IE11的开发者工具对样式审查功能进行了一次内在的更新，它会首先显示那些更加剧用的元素类型，从开发的角度来讲这是很是合理和人性的改动。

另外如今也能够直接在页面上右键审查元素了，又是一处提升实用效率的改进，提升效果的改进还不只如此:

· 在DOM Explorer内拖拽移动元素位置

· 下方的元素面包屑导航让查找元素和代码更加便捷

· 智能感知功能，能够更快更轻松的定位样式规则

右键审查元素的加入让IE11的开发者工具和其余浏览器的开发者工具拥有同样好的第一印象，要知道以前咱们想要查看某一个div或者图片的代码，咱们须要先F12打开开发者工具，接着再使用选择箭头选中要看到的对象。而如今只须要在你要查看的对象上右键审查元素就能够直接打开发者工具了。

新的面包屑导航会直观的显示出当前查看元素的位置和层级关系，咱们可以轻松的点击当前元素的上级，直接修改。

说到修改，IE11开发者工具拥有自动补全功能，在输入首字母以后就可以看到响应规则的代码，你可使用鼠标或者上下箭头来选择，回车或者Tab来肯定。更好用的是，即便你只是选择了某个规则以后，页面会马上使用你选择的规则。因此若是你不想输入那一个个规则名来调试的话，IE11可让你省下很多时间。

DOM Explorer 的更新，让IE11的开发者工具变得更加友好和先进。而这只是此次 IE11开发者工具更新中的一项。和前辈们的F12开发者工具相比，IE11的开发者工具翻天覆地的界面改动一会儿很难说清楚，可是这些改变又都是很是天然的，因此使用的时候彻底不会以为别扭和难以适应。因此如今就升级到IE11，感觉微软的诚意之做，本身亲自体会其中的点滴变化吧。