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

參考這份「轉譯」分頁選項參考文件，找出可套用至您網頁的實用效果。

醒目顯示廣告頁框

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

1. 開啟此示範上的「顯示」分頁，然後勾選「醒目顯示廣告頁框」。
2. 請留意以紅色醒目顯示的廣告頁框。

模擬已聚焦的網頁

將焦點從頁面切換到開發人員工具時，有些疊加層元素是由焦點觸發時會自動隱藏。例如下拉式清單、選單或日期挑選器。check_box 「模擬聚焦的網頁」選項可讓您對目前聚焦的元素進行偵錯。

如何模擬已聚焦的網頁：

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

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

   

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

停用本機字型

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

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

• 設計工具的本機字型
• 程式碼適用的網路字型

停用本機字型可讓您更輕鬆地進行以下作業：

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

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

1. 檢查上述語句，依序開啟「Elements」 >「Computed」，然後向下捲動至「Rendered Fonts」下方的「Courier New」本機檔案。

   

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

3. 觀察網路上找到 Roboto 的句子。

   

啟用自動深色模式

查看網站在深色模式中的呈現效果 (即使網站並未實作)。

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

如何啟用自動深色模式：

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

模擬視覺障礙人士

Google 致力提供各項功能，Google 致力達成這個目標。

有了 Chrome 開發人員工具，您就可以瞭解視覺障礙的使用者如何瀏覽您的網站，進而改善網站品質。詳情請參閱「模擬色彩視覺障礙」。

如何模擬視覺障礙：

1. 開啟「轉譯」分頁。

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

   • 不模擬。
   • 視力模糊：
   • 降低對比度。
   • 紅色盲 (看不到紅色)：對紅色的認知較低；混淆綠色、紅色和黃色的感覺。
   • 綠色盲 (看不到綠色)：對綠色的認知較低，因為沒有綠色、紅色和黃色的混淆。
   • 藍色盲 (看不到藍色)：對藍色的認知較低；混淆綠色和藍調。
   • 全色盲 (看不到顏色)。缺少色覺部分或整體缺少色覺。

停用 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. 開啟「轉譯」分頁，然後勾選「停用 AVIF 圖片格式」。
2. refresh請重新載入頁面，然後將滑鼠遊標懸停在 img src 上。目前的圖片 src (currentSrc) 現已是備用 WebP 圖片。

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