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

以下部分列出了 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.

“新增功能”工具现在为“欢迎”What's New is now Welcome

Microsoft Edge DevTools 中的“新增功能”工具现在具有新的外观和新名称:“欢迎”。The What's New tool in the Microsoft Edge DevTools now has a new appearance and a new name: Welcome. 欢迎”工具仍会显示最新的 DevTools 新闻和更新。The Welcome tool still displays the latest DevTools news and updates. 它现在还包括指向 Microsoft Edge DevTools 文档的链接、提交反馈的方式等。It now also includes links to Microsoft Edge DevTools documentation, ways to submit feedback, and more. 若要在每次更新 Microsoft Edge 后显示“欢迎”工具,请选中标题下的“每次更新后打开选项卡”旁边的复选框。To display the Welcome tool after each update to Microsoft Edge, choose the checkbox next to Open tab after each update under the title. 若要关闭“欢迎”工具,请选择选项卡标题右侧的 XTo close the Welcome tool, choose the X on the right-side of the tab title. 如果你更喜欢原来的“新增功能”工具,请导航至“设置” > “试验”,并取消选中“启用‘欢迎’选项卡”旁边的复选框。If you prefer the original What's New tool, navigate to Settings > Experiments and remove the checkbox next to Enable Welcome tab.

突出显示“欢迎”工具

“样式”窗格中的可视字体编辑器Visual Font Editor in the Styles pane

在 CSS 中处理字体时,请使用新的可视字体编辑器When you work with fonts in CSS, use the new visual Font Editor. 你可以定义回退字体,并使用滑块定义字体粗细、大小、行高和间距。You may define fallback fonts, and use sliders to define font weight, size, line-height, and spacing. 字体编辑器可帮助你完成以下操作。The Font Editor helps you complete the following actions.

  • 在不同字体属性的单位之间切换Switch between units for different font properties
  • 在不同字体属性的关键字之间切换Switch between keywords for different font properties
  • 转换单位Convert units
  • 生成准确的 CSS 代码Generate accurate CSS code

若要启用此试验,请导航至“设置” > “试验”,然后选中“在‘样式’窗格中启用新的字体编辑器工具”旁边的复选框。To turn on this experiment, navigate to Settings > Experiments and choose the checkbox next to Enable new Font Editor tools within Styles pane. 有关详细信息,请导航至“在 DevTools 的‘样式’窗格中编辑 CSS 字体样式和设置”。For more information, navigate to Edit CSS font styles and settings in the Styles pane in DevTools. 若要在 Chromium 开源项目中查看此功能的历史记录,请导航至问题 1093229To review the history of this feature in the Chromium open-source project, navigate to Issue 1093229.

可视字体编辑器在“样式”窗格中突出显示

CSS 弹性框调试工具CSS Flexbox debugging tools

弹性框调试功能正在积极开发中。Flexbox debugging features are in active development. 若要启用以下两个功能的试验,请导航至“设置” > “试验”,然后选择“启用新的 CSS 弹性框调试功能”旁边的复选框。To turn on the experiment for the following two features, navigate to Settings > Experiments and choose the checkbox next to Enable new CSS Flexbox debugging features. 若要在 Chromium 开源项目中查看此功能的历史记录,请导航至问题 11363941139949To review the history of this feature in the Chromium open-source project, navigate to Issues 1136394 and 1139949.

新的弹性框 (flex) 图标有助于识别和显示 flex 容器New Flexbox (flex) icon helps identify and display flex containers

在“元素”工具中,新的弹性框 (flex) 图标可帮助你识别代码中的弹性框容器。In the Elements tool, the new Flexbox (flex) icon helps you identify Flexbox containers in your code. 选择弹性框 (flex) 图标可打开或关闭显示弹性框容器轮廓的覆盖效果。Choose the Flexbox (flex) icon to turn on or off the overlay effect that outlines a Flexbox container. 可在“布局”窗格中自定义覆盖的颜色,其位于“样式”和“已计算”旁边。You may customize the color of the overlay in the Layout pane, which is located next to Styles and Computed.

若要打开和关闭显示弹性框容器轮廓的覆盖效果,请选择弹性框 (flex) 图标。To turn on and off the overlay effect that outlines the Flexbox container, choose the Flexbox (flex) icon.

可在“布局”窗格中的“样式”和“已计算”旁边自定义覆盖的颜色。You may customize the color of the overlay in the Layout pane next to Styles and Computed.

使用 CSS 属性更改弹性框布局时显示对齐图标和可视化向导Display alignment icons and visual guides when Flexbox layouts change using CSS properties

当你编辑弹性框布局的 CSS 时,“样式”窗格中的 CSS 自动完成现在会在相关弹性框属性旁边显示有用的图标。When you edit CSS for your Flexbox layout, CSS autocompletes in the Styles pane now displays helpful icons next to relevant Flexbox properties. 若要尝试此新功能,请打开“元素”工具并选择一个 flex 容器。To try this new feature, open the Elements tool and select a flex container. 然后在“样式”窗格中添加或更改该容器上的属性。Then add or change a property on that container in the Styles pane.

自动完成菜单现在显示指示对齐属性效果的图标,例如 align-contentalign-itemsThe autocomplete menu now displays icons that indicate the effect of alignment properties such as align-content and align-items.

此外,DevTools 现在还会显示一条指导线,帮助你更好地查看 align-items CSS 属性。Additionally, DevTools now displays a guiding line to help you better review the align-items CSS property. gap CSS 属性也受支持。The gap CSS property is supported as well. 在下图中,gap CSS 属性设置为 gap: 12px;,并显示每个间隙的阴影图案。In the following figure, the gap CSS property is set to gap: 12px; and the hatching pattern for each gap is displayed.

使用新的“更多工具”按钮快速添加工具Add tools quickly with new More Tools button

现在,你有了一种在 Microsoft Edge DevTools 中打开更多工具的新方法。You now have a new way to open more tools in the Microsoft Edge DevTools. 在打开此试验后,“更多工具”图标将在主面板右侧显示为加号 (+)。After you turn on this experiment, the More Tools icon displays as a plus sign (+) to the right of the main panel. 若要显示要添加到主面板的其他工具的列表,请选择“更多工具”(+) 图标。To display a list of other tools to add to the main panel, choose the More Tools (+) icon. 若要启用此试验,请导航至“设置” > “试验”,然后选中“启用 + 按钮选项卡菜单以打开更多工具”旁边的复选框。To turn on this experiment, navigate to Settings > Experiments, and then choose the checkbox next to Enable + button tab menus to open more tools.

DevTools 中突出显示“更多工具”

辅助技术现在显示 CSS 建议的位置和计数Assistive technologies now announce position and count of CSS suggestions

编辑 CSS 时,你将获得功能的下拉列表。When you edit CSS, you get a dropdown of features. 辅助技术用户无法使用此功能,因为它是在 Microsoft Edge 版本 89 中公布的。This feature was not available to users of assistive technologies, since it is announced in Microsoft Edge version 89. 辅助技术用户现在可以在“样式”窗格中浏览 CSS 建议。A user of assistive technologies may now navigate CSS suggestions in the Styles pane. 在 Microsoft Edge 版本 88 及更早版本中,辅助技术公布了 Suggestion,因为用户在“导航”窗格中编辑 CSS 时浏览了建议列表。In Microsoft Edge version 88 and earlier, assistive technology announced Suggestion as a user navigated through the list of suggestions when editing CSS in the Styles pane. 在 Microsoft Edge 版本 89 中,辅助技术用户现在可以听到当前建议的位置和计数。In Microsoft Edge version 89, a user of assistive technology now hears the position and count of the current suggestion. 当用户浏览建议列表时,每条建议都会公布,例如建议 3/5。Each suggestion is announced as the user navigates through the list of suggestions, such as Suggestion 3 of 5. 若要了解有关在 DevTools 中编写 CSS 的详细信息,请导航至“更改 CSS”。To learn more about writing CSS in the DevTools, navigate to Change CSS. 若要在 Chromium 开源项目中查看此功能的历史记录,请导航至问题 1157329To review the history of this feature in the Chromium open-source project, navigate to Issue 1157329.

若要在启用此试验的情况下查看显示和朗读多条建议的视频,请导航至 YouTube 上的“Voiceover 公布 devtools 选项”。To view a video that displays and reads aloud several suggestions with this experiment turned on, navigate to Voiceover announcing devtools options on YouTube.

“样式”窗格中突出显示建议

模拟 Surface Duo 和 Samsung Galaxy FoldEmulate Surface Duo and Samsung Galaxy Fold

在以下设备上的 Microsoft Edge 中测试你的网站或应用的外观。Test the appearance of your website or app on the following devices in Microsoft Edge.

启用“试验 Web 平台功能”以访问新的 CSS 媒体屏幕跨越功能getWindowSegments JavaScript APITurn on Experimental Web Platform features to access the new CSS media screen-spanning feature and getWindowSegments JavaScript API. 导航至 edge://flags,然后切换“试验 Web 平台功能”旁边的标记。Navigate to edge://flags and toggle the flag next to Experimental Web Platform features. 为帮助增强用于双屏幕和可折叠设备的网站或应用,请在模拟设备时使用以下功能。To help enhance your website or app for the dual-screen and foldable devices, use the following features when emulating the device.

  • 跨越,即你的网站(或应用)跨两个屏幕显示。Spanning, which is when your website (or app) appears across both screens.
  • 呈现接缝,即两个屏幕之间的空间。Rendering the seam, which is the space between the two screens.

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

模拟双屏幕

Microsoft Edge Developer Tools for Visual Studio Code 1.1.2 版Microsoft Edge Developer Tools for Visual Studio Code version 1.1.2

适用于 Microsoft Visual Studio Code 的 Microsoft Edge Developer Tools for Visual Studio Code 扩展版本 1.1.2 自上一个版本以来有以下更改。The Microsoft Edge Developer Tools for Visual Studio Code extension version 1.1.2 for Microsoft Visual Studio Code has the following changes since the previous release. Microsoft Visual Studio Code 会自动更新扩展。Microsoft Visual Studio Code updates extensions automatically. 若要手动更新到版本 1.1.2,请导航至“手动更新扩展”。To manually update to version 1.1.2, 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.

来自 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.

捕获视区以外的节点屏幕截图Capture node screenshot beyond viewport

在 Microsoft Edge 版本 89 中,节点屏幕截图更为准确,即使节点中的内容在视区中不可见,也能捕获完整节点。In Microsoft Edge version 89, node screenshots are more accurate, capturing the full node even if content from the node is not visible in the viewport. 在“元素”工具中,将鼠标悬停在某个元素上,打开上下文菜单(右键单击),然后选择“捕获节点屏幕”。In the Elements tool, hover on an element, open the contextual menu (right-click), and choose Capture node screenshot. 若要在 Chromium 开源项目中查看此功能的历史记录,请导航至问题 1003629To review the history of this feature in the Chromium open-source project, navigate to Issue 1003629.

“元素”工具中的上下文菜单上突出显示“捕获节点屏幕截图”

“元素”工具更新Elements tool updates

支持强制 :target CSS 状态Support forcing the :target CSS state

现在可使用 DevTools 强制 :target CSS 伪类。You may now use DevTools to force the :target CSS pseudo-class. 当唯一元素(目标元素)具有与 URL 片段匹配的 id 时,将触发 :target 伪类。The :target pseudo-class is triggered when a unique element (the target element) has an id that matches a fragment of the URL. 例如,http://www.example.com/index.html#section1 URL 在带有 id="section1" 的 HTML 元素上触发 :target 伪类。For example, the http://www.example.com/index.html#section1 URL triggers the :target pseudo-class on an HTML element with id="section1". 若要尝试突出显示了第 1 部分的演示,请导航至“CSS :target 演示”。To try a demo with section 1 highlighted, navigate to CSS :target demo. 若要在 Chromium 开源项目中查看此功能的历史记录,请导航至问题 1156628To review the history of this feature in the Chromium open-source project, navigate to Issue 1156628.

使用“复制元素”复制元素Use Duplicate elements to copy elements

使用新的“复制元素”快捷方式克隆元素。Use the new Duplicate element shortcut to clone an element. 在“元素”工具中,将鼠标悬停在某个元素上,打开上下文菜单(右键单击),然后选择“复制元素”。In the Elements tool, hover on an element, open the contextual menu (right-click), choose Duplicate element. 将在选定元素下创建一个新元素。A new element is created under the selected element. 若要使用键盘快捷方式复制元素,请选择“Shift+Alt+Down Arrow”(Windows/Linux) 或“Shift+Option+Down Arrow”(macOS)。To duplicate the element with a keyboard shortcut, select Shift+Alt+Down Arrow (Windows/Linux) or Shift+Option+Down Arrow (macOS). 若要在 Chromium 开源项目中查看此功能的历史记录,请导航至问题 1150797To review the history of this feature in the Chromium open-source project, navigate to Issue 1150797.

“复制元素”在“元素”工具中某个元素的上下文菜单中突出显示

自定义 CSS 属性的颜色选取器Color pickers for custom CSS properties

样式”窗格现在显示自定义 CSS 属性的颜色选取器。The Styles pane now displays color pickers for custom CSS properties. 若要循环浏览颜色值的 RGBA、HSLA 和 Hex 格式,请按住 Shift 并选择颜色选取器。To cycle through the RGBA, HSLA, and Hex formats of the color value, hold Shift and choose the color picker. 若要在 Chromium 开源项目中查看此功能的历史记录,请导航至问题 1147016To review the history of this feature in the Chromium open-source project, navigate to Issue 1147016.

自定义 CSS 属性的颜色选取器

复制 CSS 类和属性Copy CSS classes and properties

现在,你可以通过上下文菜单中的几个新选项更快地复制 CSS 属性。You may now copy CSS properties quicker with a few new options in the contextual menu. 在“元素”工具中,选择一个元素。In the Elements tool, choose an element. 若要复制值,请在“样式”窗格中,将鼠标悬停在 CSS 类或 CSS 属性上,打开上下文菜单(右键单击),然后选择复制选项。To copy the value, in the Styles pane, hover on a CSS class or a CSS property, open a contextual menu (right-click), and choose the copy option.

CSS 类的复制选项。Copy options for a CSS class.

选项Option 详细信息Details
复制选择器Copy selector 复制当前选择器名称。Copy the current selector name.
复制规则Copy rule 复制当前选择器的规则。Copy the rule of the current selector.
复制所有声明Copy all declarations 复制当前规则下的所有声明,包括无效和有前缀的属性。Copy all declarations under the current rule, including non-valid and prefixed properties.

CSS 属性的复制选项。Copy options for a CSS property.

选项Option 详细信息Details
复制声明Copy declaration 复制当前行的声明。Copy the declaration of the current line.
复制属性Copy property 复制当前行的属性。Copy the property of the current line.
复制值Copy value 复制当前行的值。Copy the value of the current line.

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

Cookie 更新Cookies updates

用于显示 URL 解码的 Cookie 的新选项New option to display URL-decoded cookies

现在,你可以选择在“Cookie”窗格中显示 URL 解码的 Cookie 值。You may now opt to display the URL-decoded cookies value in the Cookies pane. 若要显示解码的 Cookie,请导航至“应用程序” > “Cookie”窗格,选择列表中的任何 Cookie,然后选中“显示解码的 URL”旁边的复选框。To display the decoded cookie, navigate to Application > Cookies pane, choose any cookie on the list, and choose the checkbox next to Show URL decoded. 若要在 Chromium 开源项目中查看此功能的历史记录,请导航至问题 997625To review the history of this feature in the Chromium open-source project, navigate to Issue 997625.

用于显示 URL 解码的 Cookie 的选项

筛选和清除可见的 CookieFilter and clear visible cookies

在 Microsoft Edge 版本 88 或更早版本中,“应用程序”工具只提供了一种使用“清除所有 Cookie”按钮清除所有 Cookie 的方法。In Microsoft Edge version 88 or earlier, the Application tool only provided a way to clear all cookies with the Clear all cookies button. 在 Microsoft Edge 版本 89 中,现在可以选择“清除筛选的 Cookie”以便仅删除筛选的 Cookie。In Microsoft Edge version 89, you may now choose Clear filtered cookies to delete only the filtered cookies. 若要筛选 Cookie,请导航至“应用程序” > “Cookie”,然后在“筛选器”文本框中键入。To filter cookies, navigate to Application > Cookies, and type in the Filter textbox. 若要删除显示的 Cookie,请选择“清除筛选的 Cookie”按钮。To delete the displayed cookies, choose the Clear filtered cookies button. 若要显示所有其他 Cookie,请清除筛选器文本。To display all other cookies, clear the filter text. 若要在 Chromium 开源项目中查看此功能的历史记录,请导航至问题 978059To review the history of this feature in the Chromium open-source project, navigate to Issue 978059.

仅清除可见的 Cookie

“存储”窗格中用于清除第三方 Cookie 的新选项New option to clear third-party cookies in the Storage pane

默认情况下,DevTools 现在仅清除第一方 Cookie。DevTools now clear only first-party cookies by default. 若要仅清除网站数据和第一方 Cookie,请导航至“应用程序” > “存储”,然后选择“清除网站数据”。To clear website data and first-party cookies only, navigate to Application > Storage, and then choose Clear site data.

若要清除网站数据和所有 Cookie,请导航至“应用程序” > “存储”。To clear website data and all cookies, navigate to Application > Storage. 选择“包括第三方 Cookie”旁边的复选框,然后选择“清除网站数据”。Choose the checkbox next to including third-party cookies, and then choose Clear site data.

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

用于清除第三方 Cookie 的选项

网络工具更新Network tool updates

保留“记录网络日志”设置Persist Record network log setting

在 Microsoft Edge 版本 88 或更早版本中,当网页刷新时,DevTools 将重置“记录网络日志”设置。In Microsoft Edge version 88 or earlier, DevTools reset the Record network log setting when a webpage refreshes. 在 Microsoft Edge 版本 89 中,DevTools 现在将保留“记录网络日志”设置。In Microsoft Edge version 89, DevTools now persist the Record network log setting. 若要在 Chromium 开源项目中查看此功能的历史记录,请导航至问题 1122580To review the history of this feature in the Chromium open-source project, navigate to Issue 1122580.

记录网络日志

“联机”选项现在是“无限制”选项Online option is now No throttling option

网络模拟选项“联机”现已重命名为“无限制”。The network emulation option Online is now renamed to No Throttling. 若要在 Chromium 开源项目中查看此功能的历史记录,请导航至问题 1028078To review the history of this feature in the Chromium open-source project, navigate to Issue 1028078.

“无限制”选项

“控制台”工具、“源”工具和“样式”窗格中新的复制选项New copy options in the Console tool, Sources tool, and Styles pane

在“控制台”和“源”工具中复制对象Copy object in the Console and Sources tool

现在,你可以在“控制台”和“”工具中复制对象值。You may now copy object values in the Console and Sources tools. 复制对象值的能力在处理大型对象时很有用。The ability to copy object values is useful when working with large objects. 若要在 Chromium 开源项目中查看此功能的历史记录,请导航至问题 11483531149859To review the history of this feature in the Chromium open-source project, navigate to Issues 1148353 and 1149859.

在“控制台”工具中,将鼠标悬停在某个对象上,打开上下文菜单(右键单击),然后选择“复制对象”。In the Console tool, hover on an object, open the contextual menu (right-click), and then choose Copy object.

在“”工具中,在断点处,将鼠标悬停在某个对象上,在“对象”弹出窗口中突出显示某个对象,打开上下文菜单(右键单击),然后选择“复制对象”。In the Sources tool, on a breakpoint, hover on an object, in the Object popup window, highlight an object, open the contextual menu (right-click), and then choose Copy object.

在“源”工具和“样式”窗格中复制文件名Copy file name in the Sources tool and Styles pane

现在,你可以使用上下文菜单复制文件名。You may now copy a file name using the contextual menu. 若要在 Chromium 开源项目中查看此功能的历史记录,请导航至问题 1155120To review the history of this feature in the Chromium open-source project, navigate to Issues 1155120.

在“”工具中,将鼠标悬停在某个文件名上,打开上下文菜单(右键单击),然后选择“复制文件名”。In the Sources tool, hover on a file name, open the contextual menu (right-click), and then choose Copy file name.

在“元素”工具 >“样式”窗格中,将鼠标悬停在某个文件名上,打开上下文菜单(右键单击),然后选择“复制文件名”。In the Elements tool > Styles pane, hover on a file name, open the contextual menu (right-click), and then choose Copy file name.

帧详细信息更新Updates to Frame details

帧详细信息中的服务工作进程信息Service Workers information in Frame details

DevTools 现在在父帧下列出一个专用的服务工作进程。DevTools now lists a dedicated service worker under the parent frame. 下图显示了服务工作进程的详细信息。In the following figure, service worker details are displayed. 若要显示服务工作进程详细信息,请导航至“应用程序” > “” > top > “服务工作进程”,然后选择一个服务工作进程。To display the service worker details, navigate to Application > Frames > top > Service Workers and then choose a service worker. 若要在 Chromium 开源项目中查看此功能的历史记录,请导航至问题 1122507To review the history of this feature in the Chromium open-source project, navigate to Issue 1122507.

帧详细信息中的服务工作进程信息

帧详细信息中的“测量内存”信息Measure Memory information in Frame details

performance.measureMemory() API 状态现在显示在“API 可用性”部分下。The performance.measureMemory() API status is now displayed under the API availability section. 新的 performance.measureMemory() API 估计整个网页的内存使用情况。The new performance.measureMemory() API estimates the memory usage of the entire webpage. 若要在 Chromium 开源项目中查看此功能的历史记录,请导航至问题 1139899To review the history of this feature in the Chromium open-source project, navigate to Issue 1139899.

测量内存

“性能”工具中丢弃的帧Dropped frames in the Performance tool

当你在“性能”工具中分析负载性能时,“”部分现在会将丢弃的帧标记为红色。When you analyze load performance in the Performance tool, the Frames section now marks dropped frames as red. 若要显示帧速率,请将鼠标悬停在丢弃的帧上。To display the frame rate, hover on a dropped frame. 若要在 Chromium 开源项目中查看此功能的历史记录,请导航至问题 1075865To review the history of this feature in the Chromium open-source project, navigate to Issue 1075865.

丢弃的帧

新的颜色对比度计算 - 高级感知对比度算法 (APCA)New color contrast calculation - Advanced Perceptual Contrast Algorithm (APCA)

高级感知对比度算法 (APCA) 取代了颜色选取器中的 AA/AAA 准则对比率。The Advanced Perceptual Contrast Algorithm (APCA) replaces the AA/AAA guidelines contrast ratio in the Color Picker. APCA 是一种计算对比度的新方法。APCA is a new way to compute contrast. 它基于对颜色感知的新式研究。It is based on modern research on color perception. 与 AA/AAA 准则相比,APCA 更依赖于上下文。Compared to AA/AAA guidelines, APCA is more context-dependent. 对比度是根据文本、颜色和上下文的以下空间属性计算的。The contrast is calculated based on the following spatial properties of the text, color, and context.

  • 文本的空间属性,包括字体粗细和大小。Spatial properties of text that include font weight and size.
  • 颜色的空间属性,包括文本和背景之间的感知对比度。Spatial properties of color that include perceived contrast between text and background.
  • 上下文的空间属性,包括环境光线、周围环境和预期用途。Spatial properties of context that include ambient light, surroundings, and intended purpose.

若要启用此试验,请导航至“设置” > “试验”,然后选中“启用新的高级感知对比度算法 (APCA) 以替换以前的对比率和 AA/AAA 准则”旁边的复选框。To turn on this experiment, navigate to Settings > Experiments and choose the checkbox next to Enable new Advanced Perceptual Contrast Algorithm (APCA) replacing previous contrast ratio and AA/AAA guidelines. 若要在 Chromium 开源项目中查看此功能的历史记录,请导航至问题 1121900To review the history of this feature in the Chromium open-source project, navigate to Issue 1121900.

颜色选取器中的 APCA

下载 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 国际许可证获得许可。This work is licensed under a Creative Commons Attribution 4.0 International License.