新的Microsoft Edge中的开发人员工具

微软新的基于Chromium的浏览器最近已经发布了第二个公共稳定版本，该版本发布了具有完全ARM64支持的Edge 80以及改进的工具，可帮助您构建和使用Web内容。 像现在的旧版Edge的早期版本一样，Microsoft的新浏览器保留了熟悉的F12快捷方式来启动其开发人员工具，该工具可以连接到浏览器，也可以位于单独的窗格中。

值得您熟悉这些新功能，因为尽管与旧版Edge有相似之处，但是您现在在Chromium世界中工作 ，并且Chrome和其他基于Chromium的浏览器还有很多共同点。 那不是坏事。 在浏览器之间转移技能更加容易，并且如果您一直使用Chrome作为开发浏览器，那么在新的Edge中开始工作将变得很容易。 但是， Microsoft进行了一些更改 ，并且正在努力将Edge开发人员的经验扩展到Visual Studio代码中，以便您可以在单个环境中开发和测试JavaScript应用程序。

[ 也在InfoWorld上：微软开发人员工具和技术将在2020年进行探索 ]

跨平台开发人员的经验

借助Windows 7和macOS上可用的新Edge，以及正在开发的Linux版本，可以在不同平台上访问相同的开发工具。 您拥有相同的检查器，调试器和控制台，因此无论您在哪里工作，在使用什么操作系统上，都可以轻松运行相同的测试。 Windows上熟悉Edge的开发人员应该能够切换到Mac来测试代码，而不必等待Mac开发人员来提供帮助。

像旧版Edge一样，新的基于Chromium的Edge开发工具可帮助您检查站点中HTML，CSS和JavaScript，并具有JavaScript调试器和控制台，该控制台可查看正在运行JavaScript的控制台日志输出。 您可以使用这些工具快速打开添加了设备查看模式的浏览器工具栏，使您可以选择测试响应式设计而无需离开开发PC。

使用Edge开发人员工具

Edge的开发人员工具位于9个不同的窗格中 ，每个窗格都为您提供了对Web应用程序的不同见解。 您最有可能使用第一个：“元素”视图。

这将深入到您HTML和CSS，显示页面中的哪些元素是由代码的哪些部分生成的。 指向浏览器窗口中的元素会突出显示相关代码，从而有助于隔离要调试HTML或CSS。 一个窗格显示HTML； 另一个显示当前CSS，以及当前应用的样式和正在使用的事件侦听器。 您可以看到当前正在使用哪些CSS规则，哪些规则将被忽略。

Elements窗格也可以作为Visual Studio Code扩展使用 ，将布局检查与HTML编辑一起进行。 这是一种快速查看代码更改如何影响页面布局的有用方法。 您甚至可以将代码附加到浏览器实例，从而直接访问任何打开HTML文档。

为PWA做准备

性能面板是更有用的工具之一。 从这里您可以记录您的浏览器活动。 测试序列完成后，您可以使用工具的时间表来分析应用程序使用的资源。 最好与网络和内存工具结合使用，尤其是在使用大量JavaScript的情况下。 如果您打算将Web应用程序用作PWA（渐进式Web应用程序），那么了解Web应用程序的性能尤为重要，并且“应用程序”面板在此处添加了用于检查PWA关键组件的工具，包括本地存储和服务工作者。

利用Edge可以更轻松地识别和安装PWA，值得更详细地研究这些工具，尤其是“应用程序”窗格。 借助类似于仪表板的外观，这是一种深入了解应用程序内部事件以及它们在浏览器之外的性能的快速方法。 您可以使用“应用程序”工具探索Edge的内置服务（例如付款处理程序）如何工作。

在Edge DevTools中使用插件

切换到基于Chromium的开发人员体验的另一个功能是对第三方插件的支持 。 Edge自己的附加商店中已经有一些商品（尽管目前仅通过进入商店的专用深层链接）。 要进行更广泛的选择，如果您在Edge中启用了第三方商店支持，则可以访问Chrome网上应用店中的所有扩展程序 。 这里有很多工具，包括添加对特定JavaScript框架的集中支持或帮助调试的工具。 这些工具包括Facebook的React，开源gRPC，帮助使用GraphQL API的工具以及对诸如webhint之类的支持。

Chromium的开发人员插件规范是公开的，任何人都可以在内部或全世界构建和发布自己的开发人员工具。 由于Edge的插件与其他Chromium浏览器共享一种通用格式，因此可以通过其他浏览器商店提供相同的插件，从而简化了工具开发。

向开发人员工具添加扩展就像在浏览器中添加扩展一样。 导航至商店，单击要添加的工具，然后下载并安装。 它将安装在浏览器中，您可能需要在浏览器菜单中隐藏扩展图标，然后再打开开发人员工具以查看新标签。 在网站上运行webhint会显示一组关键指标，为您提供重要功能（如可访问性）或对PWA功能的支持的提示。

很高兴看到自定义最终成为Edge工具的一部分。 我们都使用不同的工具链，为您提供支持所用技术所需的资源是对开发人员非常友好的方法。 当微软宣布将其浏览器切换到Chromium时，它表明其原因之一就是为开发人员提供了构建所需应用程序所需的功能。 那可能意味着仅改善浏览器对HTML5，CSS和JavaScript的支持，因此将Chromium开发人员工具的全部范围引入Edge及其所有受支持的OS都是可喜的举动。

微软对Chromium开发人员体验的改变

重要的是要记住，在Chromium开发方面，微软仍然是Google的初级合作伙伴。 即便如此，自从加入该项目以来，它仍然做出了许多贡献，包括增加了对辅助功能的支持，以使开发人员工具可用于最广泛的社区。 大约有170项更改增加了对屏幕阅读器等工具的支持，这里有很多值得一提的地方，因为可访问的开发人员工具将导致可访问的Web应用程序和服务的开发。

目前，Edge设置中的实验性标志后面隐藏了其他新功能，包括对其他语言的支持。 如果启用此功能，并且正在使用10种受支持的语言之一，则开发人员工具的本地化将与您的浏览器本地化匹配。

翻译自: https://www.infoworld.com/article/3526412/developer-tools-in-the-new-microsoft-edge.html