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

Sofia Emelianova
Sofia Emelianova

瀏覽「轉譯」分頁選項,探索可套用到網頁的實用效果。

醒目顯示廣告頁框

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

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

以紅色醒目顯示的廣告

模擬已聚焦的網頁

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

如要模擬已聚焦的網頁,請按照下列步驟操作:

  1. 開啟含有要偵錯的元素的網頁,例如 YouTube 網站及其搜尋列。
  2. 在網頁上開啟「算繪」分頁,然後檢查並清除「模擬已聚焦的網頁」

    模擬已聚焦的網頁

您也可以在「元素」>「樣式」的操作列中,找到相同的選項,位於 :hov 按鈕下方。

如要瞭解更多凍結元素的方式,請參閱「凍結畫面及檢查消失元素」。

停用本機字型

@font-face 規則中停用 local() 來源,確認本機字型替代方案是否正常運作。

開發人員和設計人員在開發期間通常會使用相同字型的兩個不同副本:

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

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

  • 偵錯及評估網頁字型載入效能和最佳化
  • 確認 CSS @font-face 規則的正確性
  • 找出網路字型與本機版本之間的差異
如果 Chrome 在你的裝置上找到這個字型,Chrome 就會將這句話以 Courier New 顯示。

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

  1. 檢查上述句子,開啟「Elements」>「Computed」,然後一直捲動至底部,在「Rendered Fonts」下方,發現 Chrome 在本機檔案中找到 Courier New

    轉譯的字型:本機

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

  3. 查看 Roboto 在網路上找到的句子。

    轉譯的字型:網路資源

啟用自動深色模式

即使未實作深色模式,網站也能呈現出來。

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

如要啟用自動深色模式,請按照下列步驟操作:

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

已啟用自動深色模式

模擬視覺障礙人士看到的內容

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

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

如要模擬視覺障礙人士看到的內容,請按照下列步驟操作:

  1. 開啟「Rendering」分頁
  2. 在「模擬視力缺陷」下方,從下拉式清單中選取下列其中一個選項:

    • 不模擬
    • 視力模糊
    • 降低對比度
    • 紅色盲 (看不到紅色)。對紅色的認知偏低;呈現綠色、紅色和黃色的混淆選項
    • 綠色盲 (無綠色)。對綠色的觀感不佳;呈現綠色、紅色和黃色的混淆選項
    • 突擊者 (不會顯示藍色)。對藍色的感知度低,無法分辨綠色和藍色。
    • 全色盲 (看不到顏色):部分或完全失去色覺辨認能力。

已選取藍色盲 (看不到藍色)。

停用 AVIF 和 WebP 圖片格式

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

假設您使用下列 HTML 程式碼,為新版瀏覽器提供 AVIFWebP 格式的圖片,並為舊版瀏覽器提供備用的 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. 請重新載入網頁,然後將滑鼠遊標懸停在 img src。目前的圖片 src (currentSrc) 現為備用 WebP 圖片。

模擬圖片類型

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