若要检查 Microsoft Edge DevTools 的最新功能以及 Microsoft Visual Studio Code 和 Visual Studio 的 Microsoft Edge DevTools 扩展,请阅读这些公告。
若要随时了解最新并获取最新的 DevTools 功能,请下载 Microsoft Edge 的预览体验成员预览版。 无论你使用的是 Windows、Linux 还是 macOS,都应考虑使用 Canary (或其他预览频道) 作为默认开发浏览器。 Microsoft Edge 的 Beta 版、Dev 版和 Canary 版本作为单独的应用运行,与 Microsoft Edge 的稳定发布版本并排运行。 请参阅 Microsoft Edge 预览体验成员频道。
有关最新公告, 请在 Twitter 上关注 Microsoft Edge 团队。 若要报告 DevTools 问题或请求新功能,请在 MicrosoftEdge/DevTools 存储库中提交问题。
波浪下划线突出显示“元素”工具中的代码问题和改进在大多数现代 IDE 中,文本下的波浪下划线表示语法错误。在 Microsoft Edge 版本 91 或更高版本中,“元素”工具的 DOM 视图中的 HTML 下会显示波浪下划线。 波浪下划线指示与辅助功能、兼容性、性能等相关的代码问题和建议。
若要打开 “问题” 工具并详细了解问题及其解决方法,请执行以下操作:
长按 Shift,然后单击波浪下划线。
或者,右键单击波浪下划线,然后选择“ 在问题中显示”。
在 “元素” 工具中选择带下划线的错误:
在 “问题” 工具中显示错误详细信息:
另请参阅:
使用“问题”工具查找和修复问题通过信息性工具提示了解 DevToolsDevTools 工具提示功能可帮助你了解所有不同的工具和窗格。 将鼠标悬停在 DevTools 的每个大纲区域上,了解有关如何使用该工具的详细信息。 若要打开工具提示,请执行以下任一操作:
选择“ 自定义和控制 DevTools (...) >帮助>切换 DevTools 工具提示。按 Ctrl+Shift+H (Windows、Linux) 或 Command+Shift+H (macOS) 。打开命令菜单 ,然后键入 工具提示。然后将鼠标悬停在 DevTools 的每个大纲区域上:
若要关闭工具提示,请按 Esc。
更新:此功能已发布,不再具有试验性。
注意:从 2022 年 5 月开始, 活动栏不支持工具提示。
服务辅助角色更新时间线在 Microsoft Edge 版本 91 或更高版本中,如果你是渐进式 Web 应用或服务辅助角色开发人员,请在应用程序工具中将服务辅助角色的更新生命周期显示为时间线。 此功能可帮助你了解服务辅助角色在以下每个阶段花费的时间:
安装WaitActivate有关Chromium开源项目中此功能的实时更新,请参阅问题1066604。
另请参阅:
服务辅助角色生命周期。服务辅助角色改进 - 适用于渐进式Web 应用和服务辅助角色的 DevTools 调试工具。渐进式Web 应用不再显示非方形图标的警告在 Microsoft Edge 版本 90 或更低版本中,如果 PWA 的 Web 应用清单包含非方形图标,则会在每个非方形图标的 “错误和警告” 部分中显示警告。 在 Microsoft Edge 版本 91 或更高版本中,如果至少提供一个方形图标,则应用程序工具中的“清单”部分不显示任何警告。 如果未提供任何方形图标,将显示以下警告消息:
Most operating systems require square icons. Please include at least one square icon in the array.在 Microsoft Edge 版本 90 或更低版本中,每个非方形图标都显示错误:
在 Microsoft Edge 版本 91 或更高版本中,提供至少一个正方形图标时不会显示任何错误:
若要查看 Web 应用清单中的错误和警告,请选择“应用程序工具>”“应用程序”部分“>清单”。 错误和警告列在 “错误和警告” 标题下。
有关Chromium开源项目中此功能的实时更新,请参阅问题1185945。
另请参阅:
使用 Web 应用清单将渐进式 Web 应用集成到操作系统中PWABuilder:映像生成器 - 为各种平台创建应用图标,以包含在 Web 应用清单中。基于Chromium的浏览器中现在支持本地化的 DevTools从 Microsoft Edge 版本 81 开始,Microsoft Edge DevTools UI 以你自己的语言显示。 许多开发人员使用 StackOverflow 等开发人员工具,并使用其母语Visual Studio Code。 为了提供 UI 语言的类似灵活性,Microsoft Edge DevTools 团队、Chrome DevTools 团队和 Google Lighthouse 团队协作,在所有基于Chromium的浏览器中提供相同的体验。
请参阅 更改 DevTools 语言设置。
有关Chromium开源项目中此功能的协作的详细信息,请参阅问题1136655。
使用键盘导航到 CSS 变量从 Microsoft Edge 版本 88 开始, “样式 ”窗格会显示 CSS 变量,并提供指向每个变量定义的