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

来自 Microsoft Edge 开发人员工具团队公告Announcements from the Microsoft Edge DevTools team

以下各节列出了你可能错过的 Microsoft Edge DevTools 团队中的通知。The following sections are a list of announcements you may have missed from the Microsoft Edge DevTools team. 请查看公告以试用 DevTools、Microsoft Visual Studio代码扩展等中的新功能。Check out the announcements to try new features in the DevTools, Microsoft Visual Studio Code extensions, and more. 若要了解有关开发人员工具中的所有最新功能和最强大功能的最新动态,请下载 Microsoft Edge 预览频道在 Twitter 上关注我们To stay up to date on all the latest and greatest features in your developer tools, download the Microsoft Edge preview channels and follow us on Twitter.

对 DevTools 的辅助功能改进Accessibility improvements to the DevTools

DevTools 团队已对 Chromium 进行 170 项更改,以解决 DevTools 中的高影响颜色对比度、键盘和屏幕阅读器问题。The DevTools team has contributed 170 changes to Chromium to address high-impact color contrast, keyboard, and screen reader issues in the DevTools. 每个生成 Web 的开发人员都应能够使用 DevTools。Every developer building the web should be able to use the DevTools.

具有键盘导航和屏幕阅读器改进的 DevTools 中的性能工具

想要了解如何使网页可供所有用户访问?Want to learn how to make your web page accessible to all of your users? 下载 Microsoft Edge 的辅助功能见解Webhint 扩展以开始。Download the Accessibility Insights and webhint extensions for Microsoft Edge to get started.

如果使用屏幕阅读器或键盘在 DevTools 中导航,请通过向我们发推文或选择"发送反馈"图标向我们发送反馈If you use screen readers or the keyboard to navigate around the DevTools, send us your feedback by tweeting at us orchoosing the Send Feedback icon!

Chromium 问题 #963183Chromium issue #963183

以其他语言使用 DevToolsUsing the DevTools in other languages

许多开发人员使用其他开发人员工具(如 StackOverflow 和 Visual Studio Code)采用其本地语言,而不只是使用英语。Many developers use other developer tools, like StackOverflow and Visual Studio Code, in their native language, not just in English. 我们很高兴宣布 DevTools 的本地化,你现在可以使用英语之外 10 种语言之一:We’re excited to announce localization for the DevTools, which you are now able to use in one of 10 languages besides English:

中文 \ (Simplified) - 中文(简体)Chinese (Simplified) - 中文(简体)

繁体 (中文) - 中文(繁體)Chinese (Traditional) - 中文(繁體)

法语 –ç语French – français

德语 - 德语German - deutsch

意大利语 - 意大利语Italian - italiano

日语 - 日本語Japanese - 日本語

朝鲜语 - 한국어Korean - 한국어

葡萄牙语 - 图卢ê语Portuguese - português

俄语 – русскийRussian – русский

西班牙语 - 电子邮件ñolSpanish - español

DevTools 会自动匹配你在 中用于 Microsoft Edge 的语言 edge://settings/languagesThe DevTools automatically match the language you use for Microsoft Edge in edge://settings/languages.

如果你希望 Microsoft Edge 使用一种语言,并且你的 DevTools 保持为英语,请在 F1 DevTools中选择以打开设置并禁用匹配浏览器语言If you want Microsoft Edge to be in one language and your DevTools to remain in English, select F1 in the DevTools to open Settings and disable Match browser language.

德语的 DevTools

控制台 消息未本地化。Console messages are not localized. 只有 DevTools UI 中使用的字符串以你用于 Microsoft Edge 的语言显示。Only the strings used in the DevTools UI are displayed in the language you use for Microsoft Edge.

如果你想要以与可用版本不同的语言使用 DevTools,请通过我们的推文或选择"发送反馈"图标。If you want to use the DevTools in a different language than the ones that are available, tweet at us or choose the Send Feedback icon.

Chromium 问题#941561Chromium issue #941561

webhint Microsoft Edge 扩展webhint Microsoft Edge extension

Webhint Microsoft Edge 扩展允许你轻松扫描网页,并获取有关辅助功能、浏览器兼容性、安全性、性能等在 DevTools 中的反馈。The webhint Microsoft Edge extension allows you to easily scan your web page and get feedback on accessibility, browser compatibility, security, performance, and more within the DevTools. 有关详细信息,请参阅 https://webhint.ioRead more at https://webhint.io.

安装 Webhint 浏览器扩展时 DevTools 中的 Hints 工具

尝试 Microsoft Edge 中的 Webhint 浏览器扩展Try the webhint browser extension in Microsoft Edge. 安装扩展后,打开 DevTools 并选择 提示 工具。Once you install the extension, open the DevTools and choose the Hints tool. 从此处运行可自定义的网站扫描。From here, run a customizable site scan. 前往 webhint.io 了解更多信息。Head over to webhint.io to learn more.

3D 视图3D View

使用 3D 视图 通过浏览文档对象模型 \ (DOM) z 索引 堆栈上下文来调试 Web 应用程序。Use the 3D View to debug your web application by navigating through the Document Object Model (DOM) or the z-index stacking context.

DevTools 中的 3D 视图

若要访问 3D 视图,请选择 Ctrl + Shift + P ,键入3D 视图, 然后选择显示 3D 视图To access the 3D View, select Ctrl + Shift + P, type in 3D View and select Show 3D View.

Microsoft Edge 团队正在与 UI 上的 Chromium 团队合作,并将更多功能添加到 3D 视图,因此请 发送反馈The Microsoft Edge team is working with the Chromium team on the UI and adding more functionality to the 3D View, so please send your feedback.

Chromium 问题#987787Chromium issue #987787

Visual Studio代码扩展Visual Studio Code extensions

DevTools 团队还发布了一些适用于 Visual Studio Code 的扩展,让你可以直接从文本编辑器使用 DevTools 功能!The DevTools team has also released some extensions for Visual Studio Code that let you use the power of the DevTools directly from your text editor! 请查看以下扩展:Check out the extensions below:

Microsoft Edge 的元素Elements for Microsoft Edge

通过添加 Microsoft Edge \ (Chromium) Visual Studio 代码扩展,在 Visual Studio Code 内使用 Elements 工具。Use the Elements tool from within Visual Studio Code by adding the Elements for Microsoft Edge (Chromium) Visual Studio Code extension.

使用 Microsoft Edge Visual Studio元素的代码中的元素工具

有关详细信息,请查看 Microsoft Edge 元素Visual Studio代码扩展For more information, check out Elements for Microsoft Edge Visual Studio Code extension.

Microsoft Edge 调试程序Debugger for Microsoft Edge

使用 调试器 for Microsoft Edge Visual Studio代码扩展,直接从 Microsoft Edge 中调试在 Microsoft Edge 中Visual Studio JavaScript。With the Debugger for Microsoft Edge Visual Studio Code extension, debug JavaScript running in Microsoft Edge directly from Visual Studio Code.

Microsoft Edge 扩展调试器Visual Studio代码

有关详细信息,请查看如何从 Microsoft Edge Visual Studio代码For more information, check out how to debug Microsoft Edge from Visual Studio Code.

webhintwebhint

Webhint Visual Studio代码扩展在编写网页 webhint 时用于改进网页。The webhint Visual Studio Code extension uses webhint to improve your web page while you are writing it. 此扩展将运行,并基于分析报告工作区文件的 webhint 诊断。This extension runs and reports diagnostics on your workspace files based on webhint analysis.

Webhint Visual Studio代码扩展,用于分析 Visual Studio Code 中的 .tsx 文件

了解有关代码 webhint Visual Studio扩展的更多信息Learn more about the Visual Studio Code webhint extension.

Visual Studio集成Visual Studio integration

在 Visual Studio 2019 版本 16.2 或更高版本中,使用 Visual Studio 调试程序调试在 Microsoft Edge 中运行的 JavaScript。In Visual Studio 2019 version 16.2 or later, use the Visual Studio debugger to debug JavaScript running in Microsoft Edge. 下载Visual Studio 2019 以试用此功能!Download Visual Studio 2019 to try this feature out!

Visual Studio Microsoft Edge Canary、Dev 或 Beta 中启动 Web 应用的选项

详细了解如何从 Visual Studio调试 Microsoft Edge。Learn more about debugging Microsoft Edge from Visual Studio.

跟踪防护控制台消息Tracking prevention Console messages

跟踪防护是 Microsoft Edge 中一项独特的功能,可保护你免受之前未访问过的网站的跟踪。Tracking prevention is a unique feature in Microsoft Edge that protects you from being tracked by websites you have not visited before. 默认跟踪防护设置为平衡模式,可阻止第三方跟踪器和已知的恶意跟踪器,从而获得平衡隐私和 Web 兼容性的体验。The default tracking prevention setting is Balanced mode, which blocks 3rd party trackers and known malicious trackers for an experience that balances privacy and web compatibility. 为了让你深入了解阻止某些跟踪程序时网页的兼容性,当跟踪器被阻止时,控制台中添加了警告消息。 ****To give you more insight into the compatibility of your web page when certain trackers are blocked, warning messages were added in the Console when a tracker is blocked.

跟踪防护时控制台中的邮件阻止对跟踪器存储的访问

阅读有关跟踪防护以及隐私与 Web 兼容性之间平衡的详细信息Read more about tracking prevention and the balance between privacy and web compatibility.

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

以下各节宣布 Microsoft Edge 81 中提供的其他功能已参与开放源代码 Chromium 项目。The following sections announce additional features available in Microsoft Edge 81 that were contributed to the open source Chromium project.

设备模式下的 Moto G4 支持Moto G4 support in Device Mode

启用 设备工具栏后,从设备列表中模拟 Moto G4 视口 的尺寸。After enabling the Device Toolbar, simulate the dimensions of a Moto G4 viewport from the Device list.

模拟 Moto G4 视口

选择 "显示设备框架 "以在视口周围显示 Moto G4 硬件。Choose Show Device Frame to show the Moto G4 hardware around the viewport.

显示 Moto G4 硬件

相关功能:Related features:

  • 打开命令菜单并运行命令,在启用"显示设备框架"菜单后,为包含 Moto G4 硬件 (的视口拍摄 Capture screenshot) 。 ****Open the Command Menu and run the Capture screenshot command to take a screenshot of the viewport that includes the Moto G4 hardware (after enabling Show Device Frame).
  • 限制网络和 CPU 以更精确地模拟移动用户的 Web 浏览条件。Throttle the network and CPU to more accurately simulate a mobile user's web browsing conditions.

Chromium 问题#924693Chromium issue #924693

"Cookie"窗格中阻止的 CookieBlocked cookies in the Cookies pane

"应用程序"面板中的"Cookie"窗格现在显示带黄色背景的阻止的 Cookie。The Cookies pane in the Application panel now displays blocked cookies with a yellow background.

应用程序面板的Cookie窗格中阻止的 Cookie

Chromium 问题#1030258Chromium issue #1030258

网络和应用程序 工具中的 Cookie 表现在 包含"优先级 " 列。The Cookies tables in the Network and Application tools now include a Priority column.

注意

基于 Chromium 的浏览器(如 Microsoft Edge)是唯一支持 Cookie 优先级的浏览器。Chromium-based browsers, like Microsoft Edge, are the only browsers that support cookie priority.

Chromium 问题#1026879Chromium issue #1026879

Cookie 表中的所有单元格现在均可编辑 ,"大小 "列中的单元格除外,因为该列表示 Cookie 的网络大小(以字节为单位)。All cells in the Cookie tables are editable now, except cells in the Size column because that column represents the network size of the cookie, in bytes. 有关每列的说明,请导航到"字段"。For an explanation of each column, navigate to Fields.

编辑 Cookie 值

若要获取包含 Cookie 数据的表达式,请将鼠标悬停在网络请求上,打开上下文菜单 \ (右键单击) ,然后选择"复制复制"作为"Node.js fetch **** > 提取"。To get a fetch expression that includes cookie data, hover on a network request, open the contextual menu (right-click), and choose Copy > Copy as Node.js fetch.

作为提取Node.js复制

Chromium 问题#1029826Chromium issue #1029826

更准确的 Web 应用清单图标More accurate web app manifest icons

以前,应用程序面板中的"清单"窗格发送了自己的请求,以显示 Web 应用部件清单图标。Previously, the Manifest pane in the Application panel sent its own requests in order to display web app manifest icons. DevTools 现在显示与 Microsoft Edge 使用完全相同的清单图标。DevTools now shows the exact same manifest icon that Microsoft Edge uses.

清单窗格中的图标

Chromium 问题#985402Chromium issue #985402

将鼠标悬停在 CSS 内容属性上以显示未转义的值Hover on CSS content properties to display unescaped values

将鼠标悬停在 content 属性的值上可显示该值的未转义版本。Hover on the value of a content property to display the unescaped version of the value.

例如,在此 演示中 ,检查伪元素时,转义字符串 p::after 将显示在" 样式 "窗格中:For example, in this demo when you inspect the p::after pseudo-element an escaped string is displayed in the Styles pane:

转义字符串

当您将鼠标悬停在 content 该值上时,将显示未转义的值。When you hover on the content value, the unescaped value is displayed.

未转义值

控制台中更详细的源映射错误More detailed source map errors in the Console

控制台现在提供有关源映射无法加载或分析的原因的更多详细信息。The Console now provides more detail on why a source map failed to load or parse. 以前,它只是提供了一个错误,而没有解释错误。Previously it just provided an error without explaining what went wrong.

控制台中的源映射加载错误

用于禁用滚动过文件末尾的设置Setting for disabling scrolling past the end of a file

打开"设置",**** 然后禁用"首选项源 > **** > "" 允许滚动到文件末尾"以禁用默认 UI 行为,该行为允许你在"源"面板中的**** 文件末尾良好滚动。Open Settings and then disable Preferences > Sources > Allow scrolling past end of file to disable the default UI behavior that allows you to scroll well past the end of a file in the Sources panel.

禁用 允许滚动到文件的末尾

滚动过文件末尾现在在源面板中处于禁用状态

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

如果你使用的是 Windows 或 macOS,请考虑使用 Microsoft Edge 预览频道 作为默认开发浏览器。If you are on Windows 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.
原始页面位于此处,由 Kayce Basques\(Chrome DevTools & Lighthouse 的技术作家\)撰写。The original page is found here and is authored by Kayce Basques (Technical Writer, Chrome DevTools & Lighthouse).

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