Internet Explorer 11 中 F12 开发人员工具的改进

对 F12 用户界面的更改

新图标和通知内存和探查器工具的图标已更改。

现在，图标栏上会显示控制台中的错误、仿真设置中的更改以及内存、探查器和 UI 响应能力工具中的活动分析会话的指示器。 下图显示了“控制台”和“内存”工具图标上带有通知的新图标，指示显示两个主机错误，并且内存分析会话当前正在进行中：

工具中的 F6 超集导航使用 F6 类似于使用 Tab 键在工具中导航，但它通过工具窗格中最常用的元素集（而不是每个可选项）进行“选项卡”。 这是使用键盘在工具内部和工具之间导航的整体清洁系统的一部分。

使用键盘在最近使用的工具之间来回移动可以使用 Ctrl + [在工具导航历史记录中向后移动，使用 Ctrl + ] 向前移动，类似于浏览时的后退和前进箭头。

快速访问文档模式 界面顶部添加了一个新的下拉列表，使你可以从任何工具访问文档模式，因此无需切换工具。

控制台更改

Console.timeStamp () 当从控制台或代码中调用时，Console.timeStamp () 会将当前浏览器选项卡打开的毫秒数输出到控制台。 如果使用 UI 响应能力工具运行分析会话时调用它，则会基于会话启动后的时间线创建用户标记以及时间戳。

Ctrl + L 清除所有消息的控制台

准确的自动完成控制台的自动完成不再包含索引器属性。 这可以更简洁、更准确地选择自动完成建议。

为方便起见，已将 $、$$、$x、$0-$5 和 $_ 添加到控制台自动完成列表中，并使主机的行为与其他浏览器更加一致。

过时消息指示器如果选择关闭“导航时清除”选项，则较旧的控制台消息的图标灰显，以帮助区分活动页面的消息和历史记录中以前页面的消息。

DOM 资源管理器更改

“计算”窗格中的更改条 (用户一直享受“样式”窗格) 更改条、添加的属性和已删除的属性的颜色，现在会显示在“计算样式”窗格中。

调试器更改

源映射指定在调试器中右键单击文档的 选项卡，即可指定源映射。 这样，就可以将源映射与已删除源映射注释的附带代码一起使用。

在 WatchesNow 中自动完成，添加监视时，系统会建议使用自动完成选项。

返回值检查当中断具有返回值的函数时，单步执行函数，直到已单步执行到右大括号。 返回值将显示在“监视”窗格的“局部变量”部分中。 再次执行，值将返回到为其调用的代码。

有关快速演示，请在控制台中尝试以下代码：

function showval() { var x = 0; x++; debugger; return x; } showval(); 

它将调用 函数，在调试器上中断，你可以单步执行它以查看返回值。

断点的多重选择Ctrl + 单击、Shift + 单击和 Ctrl + A 可用于在“断点”窗格中选择多个断点。

继续并忽略中断按 F5 继续下一个中断。 按住 F5 以继续多次中断，直到释放 F5。

事件断点和跟踪点这些工作类似于 F12 工具中已有的断点和跟踪点，但在执行特定代码块时不会触发，而是在特定事件触发时触发。 每个都有一个可选的条件筛选器，可帮助你将其范围缩小到要检查的事件的特定实例。 可以使用下图中突出显示的“添加事件跟踪点”和“添加事件断点”图标添加它们：

UI 响应能力工具更改

导入/导出性能会话每次要分析它生成的数据或与同事共享该数据时，都不需要重现测试用例。 通过 UI 响应工具图标栏上的导入 (文件夹) 和导出 (磁盘) 图标，可将内存快照保存到稍后可以导入的文件。

图像预览如果已看到针对图像的 HTTP 请求，并想知道它是哪个图像，则现在在事件详细信息中预览该图像。

筛选事件“筛选事件”按钮很小，但功能强大。 隐藏在该按钮后面的是一个菜单，可用于以多种方式筛选事件，并且每种方法都会产生重大影响：

• 事件名称筛选器：筛选包含筛选器文本匹配项的任何事件名称。

• UI 活动筛选器：使用复选框，可以排除大类事件，以便更轻松地专注于正在调查的区域。 例如，如果只对网络活动感兴趣，则可以筛选掉 UI 和垃圾回收的所有干扰。

• 时间阈值筛选器：此功能筛选掉持续时间小于 1 毫秒的顶级事件。 在许多情况下，这极大地简化了瀑布视图，并帮助你专注于更具影响力的事件。
  

HTML5 脚本事件如果使用 媒体查询侦听器 或 MutationObservers，现在可以在运行性能分析会话时确定各自的成本。

帧分组“排序依据”下拉列表和“筛选事件”菜单之间的按钮切换“帧分组”。 这会在发生动画或视觉更新的时间段内，将顶级事件分组到其相应的工作单元 (或“帧”) 。 帧被视为其他事件，因此可以对其进行排序和筛选，并提供非独占时间摘要。

用户度量如果使用 performance.mark () API 向时间线添加三角形以指示发生特定事件的位置，则 performance.measure () API 会扩展性能标记的用途。 使用 performance.measure () 创建包含两个 performance.mark () 事件之间的时间的用户度量值事件，然后右键单击该事件，然后使用“筛选为事件”选项仅选择两个标记之间的事件。

DOM 的着色此功能向 DOM 元素、字符串文本和数字文本添加着色。 除了使不同 F12 工具中的内容外观和行为更相似外，它还为 UI 响应能力工具增加了更多的视觉兴趣。

选择摘要选择时间线的一部分时，“事件详细信息”窗格将显示所选内容的摘要。 将鼠标悬停在圆形图表的不同段上，以获取具有线段事件类别的工具提示。

支持 console.timeStamp () 在分析会话期间在代码中或在控制台中使用 console.timeStamp () 方法会在时间线上创建一个用户标记，该用户标记自分析会话开始以来。

内存工具更改

控制器折叠Dominator 折叠有助于简化快照的内容，方法是从顶级视图中删除属于另一个对象的逻辑组件的对象 (例如，<DIV>中的<BR>、函数) 保留的范围，并且往往是无法改进对数据的见解的额外详细信息， 但可能会浪费你的时间。 

例如，下图显示了视图前后，演示了主导器折叠如何改进工具所讲述的“故事”。 折叠视图显示 30 个 HTML <DIV> 元素，这些元素占内存) 15.64 MB (MB，并保留到分离的 DOM 节点。 在许多情况下，知道对象的构成并不重要，只需知道对象太大或它正在泄漏 (尤其是在使用第三方库) 时。

DOM、字符串&数字文本的着色此功能向 DOM 元素、字符串文本和数字文本添加着色。 除了使不同 F12 工具中的内容看起来和行为更相似外，它还使内存分析在视觉上更有趣。

根循环筛选希望能够调查对象的组成，而不会在循环引用路径中不知不觉丢失？ 此功能可检测循环的子引用，并“剪裁”它们，这样就不会因将它们遍历到无穷大而感到困惑。 此外，它还会注释这些引用，以便在引用已“剪裁”时清晰可见。

导入/导出会话每次要分析它生成的数据或与同事共享该数据时，都不必重现测试用例。 通过“导入 (”文件夹) 和导出 (磁盘) 内存工具图标，可将内存快照保存到稍后可以导入的文件。

仿真工具更改

设置暂留和重置将持久仿真设置图标添加到仿真工具。 这将保持当前仿真设置，直到明确禁用。 这允许你工作，关闭浏览器，然后返回，你的仿真设置保持不变。 此图标右侧是“重置仿真设置”图标，可快速将工具重置回默认值。