Microsoft Edge 91 (中的开发人员工具中的新增) What's New In DevTools (Microsoft Edge 91)

以下各节列出了 Microsoft Edge DevTools 团队发布的通知。The following sections list the announcements from the Microsoft Edge DevTools team. 若要试用 DevTools、Microsoft Visual Studio代码扩展等中的新功能,请查看通知。To try new features in the DevTools, Microsoft Visual Studio Code extensions, and more, review the announcements. 若要在开发人员工具中了解最新且最的功能,请下载Microsoft Edge预览频道,并按照 Twitter 上的 Microsoft Edge DevTools 团队。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.

波浪下划线突出显示元素工具中的代码问题和改进Wavy underlines highlight code issues and improvements in Elements tool

在大多数新式 ID 中,文本下的波浪下划线指示语法错误。In most modern IDEs, wavy underlines under text indicate syntax errors. 在 Microsoft Edge 版本 91 或更高版本中,在"元素"工具的 DOM 视图中,在 HTML 下 显示波浪下划线In Microsoft Edge version 91 or later, wavy underlines display under HTML in the DOM view of the Elements tool. 波浪下划线表示与辅助功能、兼容性、性能等相关的代码问题和建议。The wavy underlines indicate code issues and suggestions related to accessibility, compatibility, performance, and so on. 若要详细了解如何查看和编辑问题,请导航到查找并修复 Microsoft Edge DevTools 问题工具中的问题For more information about how to review and edit issues, navigate to Find and fix problems with the Microsoft Edge DevTools Issues tool.

若要打开 问题 工具并了解有关该问题以及如何修复它,请完成以下操作之一。To open the Issues tool and learn more about the issue and how to fix it, complete one of the following actions.

  • 选择并按住 Shift ,然后选择任何波浪下划线。Select and hold Shift, and then choose any wavy underline.
  • 完成以下操作。Complete the following actions.
    1. 悬停在任何波浪下划线上。Hover on any wavy underline.
    2. 打开上下文菜单\(右键单击\)。Open the contextual menu (right-click).
    3. 选择 "在问题中显示"。Choose Show in Issues.

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

DevTools 工具提示功能可帮助你了解 DevTools 中所有不同的工具和窗格。The DevTools Tooltips feature helps you learn about all the different tools and panes in DevTools. 若要关闭工具提示,请选择 EscTo turn off Tooltips, select Esc. 若要打开工具提示,请完成以下操作之一。To turn on Tooltips, complete one of the following actions.

  • 选择 Ctrl + Shift + H \ (Windows/Linux) Cmd + Shift + H 或 \ (macOS) 。Select Ctrl+Shift+H (Windows/Linux) or Cmd+Shift+H (macOS).
  • 打开命令菜单, 然后键入 tooltipsOpen the Command Menu and then type tooltips.
  • Choose Customize and control DevTools \ (... ) > HelpToggle the > DevTools Tooltips.Choose Customize and control DevTools (...) > Help > Toggle the DevTools Tooltips.

此外,如果你打开焦点模式和 DevTools 工具提示实验,还可以选择活动栏底部的切换 DevTools 工具提示 \ (? ) 按钮Also, if you turn on the Focus Mode and DevTools Tooltips experiment, you may also choose the Toggle the DevTools Tooltips (?) button at the bottom of the Activity Bar.

若要显示有关如何使用 DevTools 的信息,请打开工具提示,然后将鼠标悬停在 DevTools 的每个大纲区域上。To display more information about how to use the DevTools, turn on Tooltips, and then hover on each outlined region of the DevTools.

将鼠标悬停在问题工具突出显示区域中的任何位置,以显示更多详细信息

服务工作者更新时间线Service worker update timeline

在 Microsoft Edge 版本 91 或更高版本中,如果您是渐进式 Web 应用或服务工作者开发人员,您可以在应用程序工具中将服务工作者的更新生命周期显示为 时间线In Microsoft Edge version 91 or later, if you are a Progressive Web App or Service Worker developer, you may display the update lifecycle of your Service Workers as a timeline in the Application tool. 此功能可帮助您了解服务工作者在下列每个阶段所花的时间。This feature helps you understand the time your Service Worker spends in each of the following stages.

  • 安装Install
  • WaitWait
  • 激活Activate

查看服务工作者的更新周期中的时间线

有关服务工作者的生命周期详细信息,请导航到"服务工作线程生命周期"。For more information about the lifecycle of your Service Workers, navigate to The Service Worker lifecycle. 有关在 DevTools 中为渐进式 Web 应用和服务工作者调试工具的信息,请导航到"服务工作器改进"。For more information about debugging tools for Progressive Web Apps and Service Workers in the DevTools, navigate to Service Worker improvements. 若要在 Chromium 开源项目中查看此功能实时更新,请导航到"问题1066604"。To review real-time updates on this feature in the Chromium open-source project, navigate to Issue 1066604.

渐进式 Web 应用不再显示非方形图标的警告Progressive Web Apps no longer display warnings for non-square icons

Microsoft Edge 版本 90或更早版本中,如果在 PWA 的 Web 应用程序清单中包含非**** 方形图标,则应用程序工具中的"清单"**** 部分将在"错误和警告"下显示每个非方形图标的警告。 ****In Microsoft Edge version 90 or earlier, if you included a non-square icon in the Web App Manifest of your PWA, the Manifest section in the Application tool displayed a warning under Errors and Warnings for each non-square icon. 在 Microsoft Edge 版本 91**** 或更高版本中****,如果至少提供一个正方形图标,则应用程序工具中的清单部分不会显示警告。In Microsoft Edge version 91 or later, the Manifest section in the Application tool displays no warnings if you provide at least one square icon. 如果未提供任何方形图标,则会显示一条警告消息。If you don't provide any square icons, a warning displays the following message.

Most operating systems require square icons.  Please include at least one square icon in the array.  

若要在 Web 应用程序清单中查看错误和警告,请导航到 "应用程序" 工具并选择"清单 " 部分。To review errors and warnings in your Web App Manifest, navigate to the Application tool and choose the Manifest section. 错误和警告列在"错误和警告 " 标题下。Errors and warnings are listed under the Errors and Warnings heading. 有关 Web 应用部件清单的信息,请导航到"使用 Web 应用清单"将 渐进式 Web 应用集成到操作系统中For more information about the Web App Manifest, navigate to Use the Web App Manifest to integrate your Progressive Web App into the Operating System. 若要创建要包括在 Web 应用清单中的图标,请导航到 PWABuilder Image GeneratorTo create icons to include in your Web App Manifest, navigate to the PWABuilder Image Generator. 若要在 Chromium 开源项目中查看此功能实时更新,请导航到"问题1185945"。To review real-time updates on this feature in the Chromium open-source project, navigate to Issue 1185945.

基于 Chromium 的浏览器现在支持本地化的 DevToolsLocalized DevTools now supported in Chromium-based browsers

Microsoft Edge 版本 81 开始,Microsoft Edge DevTools 以你自己的语言显示。Starting in Microsoft Edge version 81, Microsoft Edge DevTools displays in your own language. 许多开发人员使用 StackOverflow 等其他开发人员工具,并使用Visual Studio语言编写 Code,而不只是使用英语。Many developers use other developer tools like StackOverflow and Visual Studio Code in their native language, not just in English. Microsoft Edge DevTools 团队、Chrome DevTools 团队和 Google Lighthouse 团队协作,在所有基于 Chromium 的浏览器中提供相同的体验。The Microsoft Edge DevTools team, Chrome DevTools team, and the Google Lighthouse team collaborated to provide the same experience in all Chromium-based browsers. 若要详细了解如何在语言中使用 DevTools,请导航到"更改 DevTools 语言设置"。For more information about how to use DevTools in your language, navigate to Change DevTools language settings. 有关 Chromium 开放源代码项目中有关此功能的协作信息,请导航到1136655。For more information about the collaboration on this feature in the Chromium open-source project, navigate to 1136655.

Microsoft Edge 浏览器和 DevTools 设置为日语

使用键盘导航到 CSS 变量Use the keyboard to navigate to CSS variables

从**** Microsoft Edge 版本 88开始,"样式"窗格显示 CSS 变量并提供指向每个变量的定义的链接。Starting in Microsoft Edge version 88, the Styles pane displays CSS variables and provides a link directly to the definition of each variable. 在 Microsoft Edge 版本 91 或更高版本中,可以使用箭头键轻松导航到 CSS 变量。In Microsoft Edge version 91 or later, you may use the arrow keys to easily navigate to CSS variables. 若要在"样式 "窗格中打开 定义,请将鼠标悬停在变量上,然后选择 EnterTo open the definition in the Styles pane, hover on a variable, and then select Enter. 有关 CSS 变量详细信息,请导航到使用 CSS 自定义属性 (变量) 。 For more information about CSS variables, navigate to Using CSS custom properties (variables). 若要在 Chromium 开源项目中查看此功能实时更新,请导航到"问题1187735"。To review real-time updates on this feature in the Chromium open-source project, navigate to Issue 1187735.

--theme-body-background CSS 变量在样式窗格中突出显示

问题按严重性自动排序Issues are automatically sorted by severity

问题 工具 显示改进网站的建议,包括辅助功能、性能、安全性等。The Issues tool displays recommendations to improve your website, including accessibility, performance, security, and so on. 根据你的反馈,现在会自动按严重性对问题进行排序。Based on your feedback, issues are now automatically sorted by severity. 在每个反馈类别中,每个标记为"错误"的问题**** 首先出现,然后关注标记为"警告"的每个**** 问题,然后每个标记为"提示"的问题In each feedback category, each issue marked as an Error appears first, followed each issue marked as a Warning, then each issue marked as a Tip. 为了帮助你优化问题,为将来的更新计划了额外的筛选器选项。To help you refine your issues, extra filter options are planned for a future update. 若要详细了解如何查看问题,请导航到查找并 修复 Microsoft Edge DevTools 问题工具中的问题For more information about how to review issues, navigate to Find and fix problems with the Microsoft Edge DevTools Issues tool.

问题工具按严重性显示排序的问题

Microsoft Edge 开发人员工具Visual Studio代码版本 1.1.7Microsoft Edge Developer Tools for Visual Studio Code version 1.1.7

Microsoft Edge Tools for Visual Studio Code extension version 1.1.7 提供了来自 Microsoft Edge 版本 88的 DevTools。The Microsoft Edge Tools for Visual Studio Code extension version 1.1.7 provides the DevTools from Microsoft Edge version 88. 此扩展现在ARM设备,不再依赖于 Debugger for Microsoft Edge 扩展。This extension now supports ARM devices and no longer depends on the Debugger for Microsoft Edge extension. 版本 1.1.7 包括以下 Bug 修复和改进。Version 1.1.7 includes the following bug fixes and improvements.

  • 更新了目标关闭的可靠性。Updated the reliability of target closure.
  • 更新了侧面板,以在调试创建或销毁的目标时自动刷新。Updated the side panel to automatically refreshes when you debug targets that are created or destroyed.
  • 添加了一个新的上下文菜单,可让你更快地访问扩展设置和最新的 Changelog。Added a new contextual menu that gives you faster access to the extension settings and the latest Changelog.
  • 更新并简化了扩展文档(包括最新功能)的发布。Updated and simplified the release of extension documentation including the newest features.

若要手动更新到版本 1.1.7,请导航到"手动更新扩展"。To manually update to version 1.1.7, 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 预览频道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 中的“发送反馈”图标