应用其他效果：启用自动深色主题、模拟焦点等

参考呈现标签页选项，了解可应用于网页的实用效果。

突出显示广告框架

若要查看框架是否被标记为广告，请按以下步骤操作：

1. 打开此演示中的呈现标签页，然后选中突出显示广告帧。
2. 查看以红色突出显示的广告框。

模拟聚焦的网页

如果您将焦点从页面切换到开发者工具，某些叠加层元素在焦点触发时会自动隐藏。例如，下拉列表、菜单或日期选择器。借助 check_box 模拟聚焦的页面选项，您可以对此类元素进行调试，使其获得焦点。

如需模拟聚焦的网页，请执行以下操作：

1. 打开包含要调试的元素的网页，例如带有搜索栏的 YouTube 网站。

2. 在该页面上，打开呈现标签页，然后勾选并清除模拟聚焦的网页。

   

您还可以依次点击元素 > 样式，在操作栏上的 :hov 按钮下找到同一选项。

停用本地字体

通过在 @font-face 规则中停用 local() 来源，检查本地字体替代项是否按预期工作。

开发者和设计人员通常在开发过程中使用同一字体的两个不同副本：

• 为设计工具使用本地字体，以及
• 代码的网络字体

停用本地字体可让您更轻松地执行以下操作：

• 调试和衡量网页字体的加载性能和优化
• 验证 CSS @font-face 规则的正确性
• 了解网页字体与其本地版本之间的所有差异

在 @font-face 规则中模拟缺失的 local() 来源：

1. 检查上述语句，依次打开 Elements > Computed，一直向下滚动，然后在渲染的字体下发现 Chrome 在本地文件中找到了 Courier New。

   

2. 打开渲染标签页，选中停用本地字体，然后refresh重新加载页面。

3. 观察在网上找到的 Roboto 中的句子。

   

启用自动深色模式

查看您的网站在深色模式下的显示效果，即使您未实现该模式也是如此。

Chrome 96 在 Android 设备上推出了自动深色主题的源试用。借助此功能，如果用户在操作系统中选择使用深色主题，浏览器会为浅色主题网站应用自动生成的深色主题。

如需启用自动深色模式，请执行以下操作：

1. 在此页面上，打开呈现标签页，然后勾选启用自动深色模式。
2. 在深色模式下观察此页面。

模拟视觉缺陷

每个人都应该能够访问并畅享网络。Google 致力于将这一目标变为现实。

借助 Chrome 开发者工具，您可以查看您的网站向有视觉缺陷的用户呈现的效果，从而针对他们优化网站。如需了解详情，请参阅模拟色觉缺陷。

如需模拟视觉缺陷，请执行以下操作：

1. 打开呈现标签页。

2. 在 Emulate vision deficiencies 下方，从下拉列表中选择以下一项：

   • 无模拟。
   • 视力模糊。
   • 降低对比度。
   • 红色盲（无法感知红色）。对红色的认知较低；对绿色、红色和黄色的认知程度较低。
   • 绿色盲（无法感知绿色）。对绿色的认知较低；对绿色、红色和黄色的认知程度比较低。
   • 蓝色盲（无法感知蓝色）。对蓝色的辨识度较低；混淆绿色和蓝色。
   • 全色盲（无法感知任何颜色）。部分或完全的色觉缺失。

停用 AVIF 和 WebP 图片格式

这些模拟可以让开发者更轻松地测试不同的图像加载场景，而无需切换浏览器。

假设您使用以下 HTML 代码，可以为新版浏览器投放 AVIF 和 WebP 格式的图片，并为旧版浏览器投放 PNG 后备图片。

<picture>
  <source srcset="test.avif" type="image/avif">
  <source srcset="test.webp" type="image/webp">
  <img src="test.png" alt="A test image">
</picture>

如需停用网页上的所有 AVIF 图片（或类似的 WebP 图片），请执行以下操作：

1. 打开 Rendering 标签页，选中停用 AVIF 图片格式。
2. refresh 重新加载页面并将鼠标悬停在 img src 上。当前图片 src (currentSrc) 现在是后备 WebP 图片。

同样，您也可以停用 WebP 图片。