套用其他效果：啟用自動深色主題、模擬焦點等

Sofia Emelianova

參考這個「算繪」分頁選項，瞭解可套用至網頁的實用效果。

醒目顯示廣告頁框

如要查看頁框是否已標記為廣告，請按照下列步驟操作：

1. 開啟這個demo中的「算繪」分頁，然後勾選「醒目顯示廣告頁框」。
2. 請注意以紅色醒目顯示的廣告框。

模擬已聚焦的網頁

如果您將焦點從網頁切換至開發人員工具，部分疊加元素會在受到焦點觸發時自動隱藏。例如：下拉式選單、選單或日期挑選器。您可以使用 check_box「模擬聚焦網頁」選項來為這類元素偵錯，就像該元素位在焦點一樣。

如要模擬已聚焦的網頁：

1. 開啟含有要偵錯元素的網頁，例如 YouTube 網站的搜尋列。

2. 在頁面上，開啟「轉譯」分頁，然後勾選並清除「模擬已聚焦的網頁」。

   

你也可以在「元素」>動作列的「:hov」按鈕下方找到相同選項] >「樣式」。

停用本機字型

在 @font-face 規則中停用 local() 來源，檢查本機字型替代字體是否正常運作。

開發人員和設計人員通常會在開發期間使用兩種同一字型的不同副本：

• 設計工具的本機字型，以及
• 程式碼的網路字型

停用本機字型可讓您更輕鬆執行以下動作：

• 偵錯及評估字型載入效能和最佳化
• 驗證 CSS @font-face 規則是否正確
• 發現網路字型與本機版本之間的差異

模擬 @font-face 規則中缺少的 local() 個來源：

1. 檢查上方句子，然後開啟「元素」>在「Computed」下方向下捲動，然後在「Rendered Fonts」下方找到 Chrome 在本機檔案中找到的「Courier New」。

   

2. 開啟「算繪」分頁，勾選「停用本機字型」，然後refresh重新載入網頁。

3. 觀察網路上 Roboto 字型的句子。

   

啟用自動深色模式

查看網站在深色模式下的樣貌 (即使您未導入深色模式也一樣)。

Chrome 96 推出了 Android 版自動深色主題的來源試用。有了這項功能，如果使用者在作業系統中選擇深色主題，瀏覽器就會將自動產生的深色主題套用至淺色主題網站。

如何啟用自動深色模式：

1. 在這個頁面上，開啟「算繪」分頁，然後勾選「啟用自動深色模式」。
2. 請以深色模式查看這個頁面。

模擬視覺障礙

Google 致力提供各項工具，Google 致力實現這一點。

您可以使用 Chrome 開發人員工具，查看視力障礙使用者如何查看您的網站，進而改善網站。詳情請參閱「模擬色彩視覺缺陷」。

如何模擬視覺障礙：

1. 開啟「算繪」分頁。

2. 在「模擬視覺缺陷」下方，從下拉式選單中選取下列其中一個選項：

   • 不模擬。
   • 視力模糊。
   • 降低對比度。
   • 紅色盲 (看不到紅色)。紅色感知度低，綠色、紅色和黃色難以分辨。
   • 綠色盲 (看不到綠色)。對綠色的感知度低，無法分辨綠色、紅色和黃色。
   • 藍色盲 (看不到藍色)。對藍色的感知度低，無法分辨綠色和藍色。
   • 色盲 (無顏色)。部分或全部缺少色視。

停用 AVIF 和 WebP 圖片格式

這類模擬可讓開發人員更輕鬆地測試不同的圖片載入情境，而不必切換瀏覽器。

假設您具有下列 HTML 程式碼，可用於在新版瀏覽器上提供 AVIF 和 WebP 格式的圖片，並為舊版瀏覽器提供 PNG 備用 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. 開啟「算繪」分頁，勾選「停用 AVIF 圖片格式」。
2. refresh 重新載入頁面，並將滑鼠游標懸停在 img src 上。目前的圖片 src (currentSrc) 現為備用 WebP 圖片。

同樣地，您也可以停用 WebP 圖片。