DevTools (Microsoft Edge 95)中的新内容 2021-10-30 默认分类 暂无评论 64 次阅读 以下部分列出了微软Edge DevTools团队的公告。要想尝试DevTools、Microsoft Visual Studio Code扩展等方面的新功能，请查看这些公告。要想了解开发者工具的最新和最大的功能，请下载Microsoft Edge预览频道，并在Twitter上关注Microsoft Edge DevTools团队。 **从Visual Studio Code扩展中的样式工具同步实时变化** 用于Visual Studio Code的Microsoft Edge DevTools扩展现在有一个叫做CSS镜像编辑的实验。使用这个功能，你可以使用样式工具来调整你的CSS，而你应用的变化会自动添加到Visual Studio Code编辑器中的CSS源文件中。你可以切换这个功能的开启和关闭。 欲了解更多信息，请参阅通过使用CSS镜像编辑来同步样式工具的实时变化。 要提供反馈，在Visual Studio Code中，在活动栏中，点击Microsoft Edge Tools，然后在CSS Mirror Editing部分，点击离开反馈链接。 ![css-mirror-editing-button.msft.png][2] **控制台中的所有错误和警告信息现在都有一个搜索网络图标** 在网络上搜索此信息的图标现在可用于控制台中的所有错误和警告。以前，这个图标只出现在一些常见的错误和警告中。现在，该图标已被添加到其余的错误和警告中。点击网络上的搜索此信息图标，使用相关的错误或警告字符串在网络上搜索。 更多信息，[请参阅在网络上搜索控制台错误。][3] ![console-message-search-web-button.png][4] **改进了定义User-Agent客户端提示的键盘访问** 从Microsoft Edge 92版本开始，你可以指定用户代理客户端提示。你可以在两个地方指定User-Agent Client Hints。 - 在网络条件工具中定义用户代理字符串时。 - 当在 "设置 "中添加一个自定义设备来模拟时。 在95版之前的Microsoft Edge中，当从 "设置 "的 "设备 "部分添加一个自定义设备来模拟时，用键盘选择 "用户代理客户端提示 "按钮会导致不正确的UI项目被激活。它没有展开用户代理客户端提示部分让你填入，而是选择了添加按钮。你开始定义的设备被立即添加，使用用户代理客户端提示部分的空字段。 在Microsoft Edge 95版本中，这个问题已经被修复。通过使用键盘选择用户代理客户端提示按钮，现在会展开一个表单，你可以在其中为自定义设备指定客户端提示。 要了解更多关于用户代理客户端提示的信息，请参阅[从你的网站上检测Microsoft Edge][5]。 ![keyboard-define-ua-client-hints.png][6] 要查看Chromium开源项目中这一功能的历史，请参见问题1243827：用户代理客户端提示表单可访问性。 **如果过滤器与组的标题相匹配，控制台过滤器现在会显示组的信息** 你可以使用console.group()来标记一组消息，为console消息提供一些组织。在早期版本的Microsoft Edge中，当试图在控制台中过滤分组的消息时，有几个问题。当过滤到一个组的标签时，控制台不会显示组内的单个消息。另外，即使标签与过滤器不匹配，过滤也不会隐藏组标签。 在微软Edge 95版本中，这些问题已被修复。现在过滤到一个标签会显示组的标签和组内的个别信息。当过滤器与组的标签不匹配时，整个组会被隐藏。 要了解更多关于DevTools中Console的group() API，请浏览[Console API参考：group][7]。 当过滤器字符串与组的标签相匹配时，该组及其成员将被显示出来。 ![filter-matches-group-label.png][8] 当过滤器字符串与组的标签不匹配时，该组和其成员都不会被显示。 ![filter-matches-group-label-asdf.png][9] 查看Chromium开源项目中该功能的历史，请参见问题[363796： ⒉控制台过滤器不适当地隐藏了分组内容，并且没有隐藏分组标题。][10] 下载微软Edge预览频道 如果你在Windows、Linux或macOS上，考虑使用[Microsoft Edge的Canary预览通道][11]作为你的默认开发浏览器。预览通道让你可以访问Microsoft Edge DevTools的最新功能。 [1]: http://guobacai.com/usr/uploads/2021/10/3333177038.jpg [2]: http://guobacai.com/usr/uploads/2021/10/2434389717.png [3]: https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/whats-new/2021/09/devtools#search-for-console-errors-on-the-web [4]: http://guobacai.com/usr/uploads/2021/10/3384986713.png [5]: http://guobacai.com/index.php/archives/24/ [6]: http://guobacai.com/usr/uploads/2021/10/3978135763.png [7]: https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/console/api#group [8]: http://guobacai.com/usr/uploads/2021/10/1679680922.png [9]: http://guobacai.com/usr/uploads/2021/10/1888293076.png [10]: https://bugs.chromium.org/p/chromium/issues/detail?id=363796 [11]: https://www.microsoftedgeinsider.com/download 标签: none