IE11 全新的F12开发者工具

╰+攻爆jí腚メ 2022-09-18 14:47 22阅读 0赞

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

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

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

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

· 已有工具和功能的加强

· 更加简单快速的流程

现在 Windows 8.1正式版发布，修复了预览版中的错误后，新的开发者工具更加实用和高效了，下面就让我们一起来认识下这次的主要更新：

**重新构建的UI**

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

![SouthEast][]

![SouthEast 1][]

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

![SouthEast 2][]

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

![SouthEast 3][]

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

![SouthEast 4][]

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

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

**DOM Explorer**

IE10和之前的开发者工具也有DOM Explorer，但是大家都不想用它。对很多人来说缺乏实时的DOM更新是不想用它的主要原因，我们没法用它来查看CSS样式更新和附加的DOM元素。终于，在IE11的开发者工具上实时更新的功能终于加上了。

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

![SouthEast 5][]

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

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

![SouthEast 6][]

另外现在也可以直接在页面上右键审查元素了，又是一处提高实用效率的改进，提高效果的改进还不仅如此:

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

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

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

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

![SouthEast 7][]

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

![SouthEast 8][]

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

DOM Explorer 的更新，让IE11的开发者工具变得更加友好和先进。而这只是这次 IE11开发者工具更新中的一项。和前辈们的F12开发者工具相比，IE11的开发者工具翻天覆地的界面改动一下子很难说清楚，但是这些改变又都是非常自然的，所以使用的时候完全不会觉得别扭和难以适应。所以现在就升级到IE11，感受微软的诚意之作，自己亲自体会其中的点滴变化吧。

[SouthEast]: /images/20220828/20be36af51354df9a595c21a91438ae6.png
[SouthEast 1]: /images/20220828/d6342b3975fa468aacc9c6f1dc8bd2ed.png
[SouthEast 2]: /images/20220828/435d76eacc31419bbd5469f3d81e3ff8.png
[SouthEast 3]: /images/20220828/bebb049f72354c40b60cf0166c4c1834.png
[SouthEast 4]: /images/20220828/6b7f73f84fd44e1c8b41a9e60311ac17.png
[SouthEast 5]: /images/20220828/846275ae1b8140bea2229c9ad33fe28e.png
[SouthEast 6]: /images/20220828/782e1d394685410884de01198fce741b.png
[SouthEast 7]: /images/20220828/205c0318adad42a9ae41510c5b92b956.png
[SouthEast 8]: /images/20220828/93480f755ab74330a7d278ac5f487761.png