devtools_深入了解：Internet Explorer 11 DevTools

长期以来，Internet Explorer浏览器内的开发人员工具（IE DevTools）缺少一些用于调试的关键功能，因此几乎没有用。 这包括无法检查处于不同状态的元素，例如:hover ， :active ， :focus和:visited –至少不是以一种简单直观的方式。 长话短说，在Internet Explorer中进行调试很难且令人沮丧。

但是从Internet Explorer 11开始 ，IE DevTools终于对其现有功能和一些新功能进行了改头换面。 让我们看看它现在提供了什么。

入门

Internet Explorer 11随Windows 8一起提供。如果您仍在使用Windows 7并且尚未更新IE，则可以在此处下载安装程序 。 启动安装程序，然后按照安装说明进行操作。

安装完成后，启动Internet Explorer 11，然后按F12按钮启动DevTools。 正如我们在下面已经提到并看到的，与早期版本相比，新的DevTools具有完全重新设计的外观。

此外，尽管这种菜单已经在其他浏览器中使用了一段时间，但IE 11还在右键单击菜单上包括了“ 检查元素 ”，以快速启动DevTools。

DOM资源管理器

DOM资源管理器也得到了一些改进。 首先，您会发现它现在在底部具有“面包屑”，这使在DOM层次结构中的导航更加精简。 它还允许我们仅通过拖放就可以在DOM中移动元素 。

样式标签

与其他浏览器DevTools相似，在DOM Explorer窗格的右侧，您将找到Styles选项卡，其中包含应用于DOM元素的所有CSS规则。 现在它还配备了Intellisense 。 因此，当我们在CSS，JavaScript和HTML中键入代码时，它将显示输入建议列表以完成代码。

现在，它还将当前应用的样式放在顶部，而不是埋在底部（这迫使我们滚动）。 这使得调试CSS更快，更直观。

跟踪选项卡

在“ 跟踪”选项卡中，您可以立即发现哪些样式应用于元素，哪些样式被覆盖。

如果您发现网站样式输出未按预期显示，则应检查此选项卡。

布局选项卡

此外，在“ 布局”选项卡中，您还将看到方框图和方框属性信息：宽度，高度填充，边距和边框。 现在，此选项卡不仅是静态显示信息，我们现在还可以编辑这些属性的值。

新的控制台API

除了用户界面和用户体验方面，Internet Explorer 11还引入了许多新的控制台API，包括console.time和console.timeEnd方法。 您可以使用以下两种方法来跟踪JavaScript函数或代码块的执行时间 ，例如：

console.time('loop');
var index;
var a = ["a", "b", "c"];
for (index = 0; index < a.length; ++index) {
    console.log(a[index]);
}
console.timeEnd('loop');

请参阅此页面中新控制台API的完整列表 。

移动模拟器

随着移动设备以及为移动平台创建的网站的使用不断增加，现在在IE DevTools中包含一项功能以支持开发过程变得非常合理。 签出IE Mobile Emulator。

在“仿真”面板中，您可以配置文档和浏览器模式，显示方向，视口大小和地理位置，以覆盖当前位置坐标。

它的工作原理类似于Chrome DevTools中的仿真工具，因此请阅读我们上一篇有关5（更多）对开发人员有用的有用的Chrome DevTools技巧的文章。

最终思想

总体而言，我很高兴看到Microsoft终于对Internet Explorer给予了极大的关注。 除了能够呈现一些最先进的CSS3和HTML5规范的功能外，如我们上面所见，Internet Explorer 11中的DevTools在某些方面也进行了重大改进。

但是，就功能而言，它仍然落后于其他浏览器。 帖子开头提到的用于查看处于不同状态的元素的选项 仍然缺失 。 对于像我这样经常使用CSS的人来说，此功能至关重要。

翻译自: https://www.hongkiat.com/blog/internet-explorer-devtools/