DevTools 中的新增功能 (Microsoft Edge 90)What's New In DevTools (Microsoft Edge 90)

以下部分列出了 Microsoft Edge 开发人员工具团队的公告。The following sections list the announcements from the Microsoft Edge DevTools team. 若要试用开发人员工具、Microsoft Visual Studio Code 扩展等新功能,请查看公告。To try new features in the DevTools, Microsoft Visual Studio Code extensions, and more, review the announcements. 若要随时了解有关开发人员工具的最新和最强大功能,请下载 Microsoft Edge 预览频道在 Twitter 上关注 Microsoft Edge 开发人员工具团队To stay up to date with the latest and greatest features in your developer tools, download the Microsoft Edge preview channels and follow the Microsoft Edge DevTools team on Twitter.

在焦点模式下将工具组合在一起Group tools together in Focus Mode

焦点模式是一个试验界面,允许你根据自己的调试方案将不同工具组合在一起。Focus Mode is an experimental interface that allows you to group different tools together based on your own debugging scenarios. 左侧显示的新“活动栏”包括预定义的工具组,如“布局”和“调试”。The new Activity Bar displayed on the left includes predefined tool groups such as Layout and Debugging. 若要自定义每个工具组,请使用“关闭”(X) 图标关闭工具,或使用“更多工具”(+) 图标添加新工具。To customize each tool group, close tools with the Close (X) icon or add new tools with the More tools (+) icon.

若要启用试验,请导航至“启用试验功能”,然后选择“焦点模式和 DevTools 工具提示”和“启用 + 按钮选项卡菜单以打开更多工具”旁边的复选框。To turn on the experiment, navigate to Turn on experimental features and choose the checkboxes next to Focus Mode and DevTools Tooltips and Enable + button tab menus to open more tools. 有关此功能的详细信息,或者要用问题和想法进行评论,请导航到 DevTools:焦点模式 UIFor more information about this feature or to comment with questions and ideas, navigate to DevTools: Focus Mode UI.

显示“活动栏”

通过信息丰富的工具提示了解 DevToolsLearn about DevTools with informative tooltips

DevTools 工具提示功能可帮助你了解所有不同的工具和窗格。The DevTools Tooltips feature helps you learn about all the different tools and panes. 选择“活动栏”底部的“帮助”(?) 图标,以便在 DevTools 中切换工具提示。Choose the Help (?) icon at the bottom of the Activity Bar to toggle tooltips in the DevTools. 当工具提示打开时,请将鼠标悬停在 DevTools 的每个概述区域上,以了解有关如何使用工具的更多信息。When tooltips are on, hover over each outlined region of DevTools to learn more about how to use the tool. 若要启用试验,请导航至“启用试验功能”,然后选择“焦点模式和 DevTools 工具提示”和“启用 + 按钮选项卡菜单以打开更多工具”旁边的复选框。To turn on the experiment, navigate to Turn on experimental features and choose the checkboxes next to Focus Mode and DevTools Tooltips and Enable + button tab menus to open more tools. 有关此功能的详细信息,或者要用问题和想法进行评论,请导航到 DevTools:焦点模式 UIFor more information about this feature or to comment with questions and ideas, navigate to DevTools: Focus Mode UI.

选择“活动栏”中的“帮助”(?) 图标以显示工具提示

在“设置”中自定义键盘快捷方式Customize keyboard shortcuts in Settings

现在,你可以为 DevTools 中的任何操作自定义键盘快捷方式。You may now customize the keyboard shortcut for any action in the DevTools. 若要编辑键盘快捷方式,请完成以下操作。To edit a keyboard shortcut, complete the following actions.

  1. 打开 DevTools,然后选择“设置” > “快捷方式”。Open the DevTools, and then choose Settings > Shortcuts.
  2. 选择要自定义的操作。Choose the action you want to customize.
  3. 选择“编辑”(Choose the Edit (“编辑键盘快捷方式”图标)图标。) icon.
  4. 选择要绑定到操作的按键。Select the keys you want to bind to the action.
  5. 选中复选标记(Choose the checkmark (复选标记键盘快捷方式图标)图标。) icon.

有关自定义和编辑快捷方式的详细信息,请导航到“自定义 Microsoft Edge DevTools 中的键盘快捷方式”。For more information about customizing and editing shortcuts, navigate to Customize keyboard shortcuts in the Microsoft Edge DevTools. 若要在 Chromium 开源项目中查看此功能的实时更新,请导航至问题 174309To review real-time updates on this feature in the Chromium open-source project, navigate to Issue 174309.

在编辑模式下使用快捷方式在“DevTools 设置”的“快捷方式”上自定义键盘快捷方式

在编辑模式下使用快捷方式在“DevTools 设置”的“快捷方式”上自定义键盘快捷方式Customize keyboard shortcuts in the DevTools Settings on Shortcuts with a shortcut in edit mode

Microsoft Edge DevTools for Visual Studio Code 扩展更新 1.1.4Microsoft Edge DevTools for Visual Studio Code extension update 1.1.4

适用于 Microsoft Visual Studio Code 的 Microsoft Edge Developer Tools for Visual Studio Code 扩展版本 1.1.4 现在在每个 DevTools 实例旁边显示一个网站图标。The Microsoft Edge Developer Tools for Visual Studio Code extension version 1.1.4 for Microsoft Visual Studio Code now displays a favicon next to each of the DevTools instances. 来自 Microsoft Edge 的控制台消息现在显示在 Microsoft Visual Studio Code 的“输出”下的“DevTools 控制台”中。Console messages from Microsoft Edge now display in the DevTools Console under Output of Microsoft Visual Studio Code. Microsoft Visual Studio Code 会自动更新扩展。Microsoft Visual Studio Code updates extensions automatically. 若要手动更新到版本 1.1.4,请导航至“手动更新扩展”。To manually update to version 1.1.4, navigate to Update an extension manually. 你可以在 vscode-edge-devtools GitHub repo 上提交问题并参与提升扩展。You may file issues and contribute to the extension on the vscode-edge-devtools GitHub repo.

下图显示了来自 Microsoft Edge 的“控制台”工具中记录的示例网页的消息。The following figure displays messages from an example webpage logged in the Console tool in Microsoft Edge.

下图显示了来自 Microsoft Visual Studio Code 的“输出”下的“DevTools 控制台”中记录的示例网页的相同消息。The following figure displays the same messages from the example webpage logged in the DevTools Console under Output of Microsoft Visual Studio Code.

通过可视弹性框编辑器和多个覆盖改进了 CSS 弹性框编辑Improved CSS flexbox editing with visual flexbox editor and multiple overlays

DevTools 现在具有专用的 CSS 弹性框调试工具。DevTools now has dedicated CSS flexbox debugging tools. 如果将 display: flexdisplay: inline-flex CSS 样式应用于 HTML 元素,则“元素”工具中该元素旁边将显示 flex 图标。If the display: flex or display: inline-flex CSS style is applied to an HTML element, a flex icon displays next to that element in the Elements tool. 若要在网页上显示(或隐藏)弹性覆盖,请选择 flex 图标。To display (or hide) a flex overlay on the webpage, choose the flex icon. 若要在 Chromium 开源项目中查看此功能的历史记录,请导航至问题 11667101175699To review the history of this feature in the Chromium open-source project, navigate to Issues 1166710 and 1175699.

若要打开弹性框编辑器,请导航至“样式”窗格,然后选择 display: flexdisplay: inline-flex 样式旁边的新图标。To open the Flexbox editor, navigate to the Styles pane and choose the new icon next to the display: flex or display: inline-flex style. 弹性框编辑器提供了一种快速编辑弹性框属性的方法。The Flexbox editor provides a quick way to edit the flexbox properties.

此外,“布局”窗格中的“弹性框”部分将显示网页上的所有弹性框元素。In addition, the Flexbox section in the Layout pane displays all of the flexbox elements on the webpage. 你可以切换每个元素的覆盖。You may toggle the overlay of each element.

网络请求的键盘导航改进Keyboard navigation improvements for network requests

以前,在“发起程序”窗格中,你无法使用键盘上的箭头键展开或折叠请求链,这与“元素”工具中的 DOM 不同。Previously, you were not able to expand or collapse the chain of requests using the arrow keys on the keyboard in the Initiator pane, unlike the DOM in the Elements tool. 当在“网络”工具中选择网络请求时,“发起程序”窗格将显示发起当前选定请求的请求链。When a network request is selected in the Network tool, the Initiator pane displays the chain of requests that initiated the currently selected request.

在 Microsoft Edge 版本 90 中,在“发起程序”窗格中,你可以使用键盘上的箭头键展开或折叠请求链。In Microsoft Edge version 90, you may expand or collapse the chain of requests using the arrow keys on the keyboard in the Initiator pane. 链中的焦点网络请求现在也会突出显示。The focused network request in the chain is also now highlighted. 若要在“网络”工具中了解有关发起程序的更多信息,请导航至“显示发起程序和依赖项”。To learn more about initiators in the Network tool, navigate to Display initiators and dependencies. 若要在 Chromium 开源项目中查看此功能的历史记录,请导航至问题 11582761160637To review the history of this feature in the Chromium open-source project, navigate to Issues 1158276 and 1160637.

控制台中的筛选更加一致Filtering in the Console is more consistent

当使用控制台边栏进行筛选时,“日志级别”下拉列表中的筛选器不可用。While you filter with the Console Sidebar, the filters in the Log Levels dropdown are not available. 以前,“日志级别”下拉列表在你悬停时会突出显示,即使从控制台边栏中选择了筛选器也是如此。Previously, the Log Levels dropdown highlighted when you hovered on it, even while a filter from the Console Sidebar was chosen. 在 Microsoft Edge 版本 90 中,当你从控制台边栏中选择筛选器后将鼠标悬停在“日志级别”下拉列表上时,它不再突出显示。In Microsoft Edge version 90, the Log Levels dropdown no longer highlights when you hover on it while a filter from the Console Sidebar is chosen. 若要了解有关控制台中的筛选的更多信息,请导航至“筛选消息”。To learn more about filtering in the Console, navigate to Filter Messages.

来自 Chromium 项目的公告Announcements from the Chromium project

以下部分将公布 Microsoft Edge 中已组成开源 Chromium 项目的其他可用功能。The following sections announce additional features available in Microsoft Edge that were contributed to the open-source Chromium project.

控制台现在可对双引号字符进行转义The Console now escapes double quote characters

以前,控制台不在 JavaScript 字符串中输出有效的双引号 (") 字符。Previously, the Console did not output valid double quote (") characters in JavaScript strings. 从 Microsoft Edge 版本 90 开始,控制台将使用转义的双引号 (") 字符输出 JavaScript 字符串。Starting in Microsoft Edge version 90, the Console outputs JavaScript strings using escaped double quote (") characters. 若要在 Chromium 开源项目中查看此功能的历史记录,请导航至问题 1178530To review the history of this feature in the Chromium open-source project, navigate to Issue 1178530.

控制台将使用转义的双引号 () 字符输出 JavaScript 字符串

模拟 CSS 色域媒体功能Emulate the CSS color-gamut media feature

色域媒体查询会模拟浏览器和你正在测试的设备支持的大致颜色范围。The color-gamut media query emulates the approximate range of colors supported by the browser and the device you are testing. 模拟 CSS 媒体功能色域”下的下拉列表包含 DevTools 可能模拟的颜色空间。The dropdown under Emulate CSS media feature color-gamut contains color spaces that DevTools may emulate. 例如,若要触发 color-gamut: p3 媒体查询,请从下拉列表中选择“色域:p3”。For example, to trigger a color-gamut: p3 media query, choose color-gamut: p3 from the dropdown.

若要模拟 CSS 色域媒体功能,请完成以下操作。To emulate the CSS color-gamut media feature, complete the following actions.

  1. 打开“命令菜单”。Open the Command Menu.
  2. 键入 RenderingType Rendering.
  3. 运行“显示呈现”命令。Run the Show Rendering command.
  4. 导航到“模拟 CSS 媒体功能色域”并选择一个选项。Navigate to Emulate CSS media feature color-gamut and choose an option.

若要了解有关 color-gamut 功能的更多信息,请导航到“颜色显示质量:‘色域’功能”。To learn more about the color-gamut feature, navigate to Color Display Quality: the 'color-gamut' feature. 若要在 Chromium 开源项目中查看此功能的历史记录,请导航至问题 1073887To review the history of this feature in the Chromium open-source project, navigate to Issue 1073887.

模拟 CSS 色域媒体功能

改进了渐进式 Web 应用工具Improved Progressive Web Apps tooling

控制台中的 PWA 可安装性警告PWA installability warning in the Console

现在,“控制台”现在将显示更详细的渐进式 Web 应用 (PWA) 可安装性警告消息,其中包含指向“改进渐进式 Web 应用脱机支持检测”的链接。The Console now displays a more detailed Progressive Web Apps (PWA) installability warning message with a link to Improving Progressive Web App offline support detection.

“控制台”工具中的 PWA 可安装性警告

“清单”窗格中的 PWA 说明长度警告PWA description length warning in the Manifest pane

如果清单说明超过了 324 个字符,“清单”窗格现在将显示一条警告消息。The Manifest pane now displays a warning message if the manifest description exceeds 324 characters.

PWA 说明截断警告

若要在 Chromium 开源项目中查看此功能的历史记录,请导航至问题 96580211464501169689To review the history of this feature in the Chromium open-source project, navigate to Issues 965802, 1146450, and 1169689.

“网络”工具中新的“远程地址空间”列New Remote Address Space column in the Network tool

新的“远程地址空间”列显示每个网络资源的网络 IP 地址空间。The new Remote Address Space column displays the network IP address space of each network resource. 若要显示新的“远程地址空间”列,请完成以下操作。To display the new Remote Address Space column, complete the following actions.

  1. 导航到“网络”工具。Navigate to the Network tool.
  2. 在“请求”表中,将鼠标悬停在标题行上,然后打开上下文菜单(右键单击)。In the Requests table, hover on the header row, and open the contextual menu (right-click). 若要了解如何在“请求”表中添加或删除列,请导航到“添加或删除列To learn how to add or remove columns from the Requests table, navigate to Add or remove columns.
  3. 选择“远程地址空间”。Choose Remote Address Space.

现在,“请求”表将显示一个标题为“远程地址空间”的新列。The Requests table now displays a new column with the header named Remote Address Space. 若要在 Chromium 开源项目中查看此功能的历史记录,请导航至问题 1128885To review the history of this feature in the Chromium open-source project, navigate to Issue 1128885.

在“框架详细信息”视图中显示允许和禁止的功能Display allowed and disallowed features in the Frame details view

“框架详细信息”视图现在显示受“权限策略”控制的允许和禁止的浏览器功能列表。The Frame details view now displays a list of allowed and disallowed browser features controlled by the Permissions Policy. “权限策略”是一种 Web 平台 API,它允许(或阻止)网页在单个框架或其嵌入的 iframe 中使用浏览器功能。Permissions Policy is a web platform API that allows (or blocks) a webpage the use of browser features in an individual frame or in iframes that it embeds. 若要在 Chromium 开源项目中查看此功能的历史记录,请导航至问题 1158827To review the history of this feature in the Chromium open-source project, navigate to Issue 1158827.

基于权限策略允许和禁止的功能

“Cookie”窗格中新的“SameParty”列New SameParty column in the Cookies pane

应用程序”工具中的“Cookie”窗格现在显示每个 Cookie 的 SameParty 属性。The Cookies pane in the Application tool now displays the SameParty attribute for each cookie. SameParty 属性是一个新的布尔属性,用于指示在对相同第一方集的起源的请求中是否包含 cookie。The SameParty attribute is a new boolean attribute to indicate whether a cookie is included in requests to origins of the same First-Party Sets. 若要在 Chromium 开源项目中查看此功能的历史记录,请导航至问题 1161427To review the history of this feature in the Chromium open-source project, navigate to Issue 1161427.

“Cookie”窗格中的“SameParty”列

“控制台”工具中的 fn.displayName 属性现已弃用fn.displayName property in the Console tool is now deprecated

以前,fn.displayName 属性允许你控制要在 error.stack 和 DevTools 堆栈跟踪中显示的函数的调试名称。Previously, the fn.displayName property allowed you to control debug names for functions to display in error.stack and in DevTools stack traces. 从 Microsoft Edge 版本 90 开始,fn.displayName 属性现已弃用,并替换为 fn.name 属性。Starting in Microsoft Edge version 90, the fn.displayName property is now deprecated, and replaced by the fn.name property. 使用标准 Object.defineProperty 方法定义 fn.name 属性。Use the standard Object.defineProperty method to define the fn.name property. 若要了解有关 fn.name 的更多信息,请导航至 Function.nameTo learn more about fn.name, navigate to Function.name. 若要在 Chromium 开源项目中查看此功能的历史记录,请导航至问题 1177685To review the history of this feature in the Chromium open-source project, navigate to Issue 1177685.

用于控制函数的调试名称的 fn.name 属性示例

“元素”工具中的完整辅助功能树视图Full accessibility tree view in the Elements tool

此试验在“元素”工具中提供完整的辅助功能树视图This experiment provides a full accessibility tree view in the Elements tool. 辅助功能”窗格提供部分辅助功能树视图,其显示从根节点到被检查节点的直接上级链。The Accessibility pane provides a partial accessibility tree view, that displays the direct ancestor chain from the root node to the inspected node.
启用此试验并重新加载 DevTools 后,请选择以下按钮之一以在“元素”工具中切换网页上所有元素的显示。After you turn on this experiment and reload the DevTools, choose one of the following buttons to switch the display in the Elements tool for all elements on the webpage.

  • 若要显示完整的辅助功能树视图,请选择“切换到辅助功能树视图”。To display the full accessibility tree view , choose the Switch to Accessibility Tree view.
  • 若要显示 DOM 树视图,请选择“切换到 DOM 树视图”。To display the DOM tree view, choose the Switch to DOM Tree view.

若要启用试验,请导航至“启用试验功能”,然后选中“在‘元素’窗格中启用完整的辅助功能树视图”旁边的复选框。To turn on the experiment, navigate to Turn on experimental features and choose the checkbox next to Enable full accessibility tree view in Elements pane. 若要在 Chromium 开源项目中查看此功能的历史记录,请导航至问题 887173To review the history of this feature in the Chromium open-source project, navigate to Issue 887173.

下载 Microsoft Edge 预览频道Download the Microsoft Edge preview channels

如果你使用的是 Windows、Linux 或 macOS,请考虑使用 Microsoft Edge 预览频道作为默认开发浏览器。If you are on Windows, Linux, or macOS, consider using the Microsoft Edge preview channels as your default development browser. 预览频道使你能够访问最新的 DevTools 功能。The preview channels give you access to the latest DevTools features.

联系 Microsoft Edge DevTools 团队Getting in touch with Microsoft Edge DevTools team

使用以下选项讨论帖子中的新功能和更改,或与 DevTools 相关的任何其他内容。Use the following options to discuss the new features and changes in the post, or anything else related to DevTools.

  • 使用 DevTools 发送反馈 图标发送反馈。Send your feedback using the Send Feedback icon in DevTools.
  • 发推 @EdgeDevToolsTweet at @EdgeDevTools.
  • 我们想要的 Web 提交建议。Submit a suggestion to The Web We Want.
  • 若要提交有关本文的错误,请使用以下“反馈” 部分。To file bugs about this article, use the following Feedback section.

Microsoft Edge DevTools 中的“发送反馈”图标

备注

此页面的某些部分是根据 Google 创建和共享的作品所做的修改,并根据 Creative Commons Attribution 4.0 International License 中描述的条款使用。Portions of this page are modifications based on work created and shared by Google and used according to terms described in the Creative Commons Attribution 4.0 International License.
原始页面位于 此处,并由 Jecelyn Yeen \(开发人员支持者,Chrome DevTools\)制作。The original page is found here and is authored by Jecelyn Yeen (Developer advocate, Chrome DevTools).

Creative Commons License
本作品根据 Creative Commons Attribution 4.0 International License 获得许可。This work is licensed under a Creative Commons Attribution 4.0 International License.