Microsoft Edge 中新的 F12 开发者工具

微软宣布 Microsoft Edge 将成为新 web 浏览器的正式名称，他将取代 Internet Explorer 11 的地位。Edge 之前被称为 Project Spartan，它将努力争取在现代 web 的舞台上成为一个有力的竞争力。作为新浏览器计划的一部分，Edge 带来了一个全功能的开发者工具体验。来自微软的 Andy Sterland 在 Build 2015 大会上介绍了 Edge 中新的 F12 开发者工具中的某些特性。

在 Sterland 的演讲“Microsoft Edge[即原来所知的 Project Spartan] 中 F12 的新特性”，他介绍了微软如何计划与设计这个新工具，让它能够匹配新浏览器的强大能力。Sterland 表示团队将会专注于 Microsoft Edge 的开发，在 Internet Explorer 11 上的现有工具将会冻结开发状态，不会继续更新。

新的工具是由 TypeScript 所开发的，并且它始终保持在运行状态，因此开发者在打开工具之后无需重新加载整个页面以试图重建整个检测结构。

新的工具在以下几个方面得到了改进：

1. 源代码的导航能力改善 —— 可跳转至定义，支持 JavaScript 和 TypeScript
2. 新工具会尽量保证在 Edge 中所使用的常见快捷键与 Chrome 相同，让开发者在开发应用时能够更容易地学习新的浏览器并随意切换。
3. 控制台的改进
4. 指出某个日志消息来自于源代码中的哪一部分
5. 使用 Esc 键打开控制台
6. 消息中的链接能够点击（例如在源代码或调试器中显示的 URL）
7. DOM 浏览器的集成
8. 元素高亮
9. 从时间线中检阅某个元素

在之前版本的工具中出现的脚本分析器与 UI 可响应性工具将由一个新的联合分析器（Combined Profiler）所取代。新的分析器中添加了一个具有时间线（HTML / CSS）的 JavaScript 调用栈功能。此外还添加了一个用于 CPU 采样的新分析器。这个分析器会在一定的间隔时间内收集 CPU 的数据，而不是捕获每次调用，因此它的资源占用很低。

新的内存工具能够对产生泄露的节点进行高亮，并且能够结合 DOM 浏览器对 DOM 进行高亮。为了简化这一操作，Edge 加入了一个新的控制台方法，能够在开发者指定的时间获取一份内存数据的快照，这样就无需在运行应用时手动地捕获内存快照了。

除了这些新的特性之外，Edge 团队仍然在继续着他们的工作，以备将来进一步扩展这一工具的能力。Sterland 暗示，团队正在考虑加入以下一些实验性的特性，等这些特性完成开发之后，将通过一个额外的实验性标签展现这些功能：

1. JavaScript 与 CSS 的编辑
2. Cookie 的检阅
3. 本地与会话存储的管理

查看英文原文： New F12 Developer Tools for the New Microsoft Edge