瀏覽「轉譯」分頁選項,探索可套用到網頁的實用效果。
醒目顯示廣告頁框
如要查看頁框是否已標記為廣告,請按照下列步驟操作:
模擬已聚焦的網頁
如果您將焦點從網頁切換至開發人員工具,部分疊加元素會在受到焦點觸發時自動隱藏。例如:下拉式選單、選單或日期挑選器。您可以使用
「模擬聚焦網頁」選項來為這類元素偵錯,就像該元素位在焦點一樣。如要模擬已聚焦的網頁,請按照下列步驟操作:
- 開啟含有要偵錯的元素的網頁,例如 YouTube 網站及其搜尋列。
在網頁上開啟「算繪」分頁,然後檢查並清除「模擬已聚焦的網頁」。
您也可以在「元素」>「樣式」的操作列中,找到相同的選項,位於 :hov
按鈕下方。
如要瞭解更多凍結元素的方式,請參閱「凍結畫面及檢查消失元素」。
停用本機字型
在 @font-face
規則中停用 local()
來源,確認本機字型替代方案是否正常運作。
開發人員和設計人員在開發期間通常會使用相同字型的兩個不同副本:
- 設計工具的本機字型,以及
- 程式碼的網路字型
停用本機字型可讓您更輕鬆執行以下動作:
- 偵錯及評估網頁字型載入效能和最佳化
- 確認 CSS
@font-face
規則的正確性 - 找出網路字型與本機版本之間的差異
模擬 @font-face
規則中缺少的 local()
個來源:
檢查上述句子,開啟「Elements」>「Computed」,然後一直捲動至底部,在「Rendered Fonts」下方,發現 Chrome 在本機檔案中找到 Courier New。
開啟「算繪」分頁,勾選「停用本機字型」,然後 重新載入網頁。
查看 Roboto 在網路上找到的句子。
啟用自動深色模式
即使未實作深色模式,網站也能呈現出來。
Chrome 96 推出了 Android 版自動深色主題的來源試用。有了這項功能,如果使用者在作業系統中選擇深色主題,瀏覽器就會將自動產生的深色主題套用至淺色主題網站。
如要啟用自動深色模式,請按照下列步驟操作:
- 在這個頁面中,開啟「算繪」分頁,然後勾選「啟用自動深色模式」。
- 請以深色模式查看此頁面。
模擬視覺障礙人士看到的內容
Google 致力提供各項工具,Google 致力實現這一點。
您可以使用 Chrome 開發人員工具,查看視力障礙使用者如何查看您的網站,進而改善網站。詳情請參閱「模擬色彩視覺障礙」。
如要模擬視覺障礙人士看到的內容,請按照下列步驟操作:
- 開啟「Rendering」分頁。
在「模擬視力缺陷」下方,從下拉式清單中選取下列其中一個選項:
- 不模擬。
- 視力模糊。
- 降低對比度。
- 紅色盲 (看不到紅色)。對紅色的認知偏低;呈現綠色、紅色和黃色的混淆選項
- 綠色盲 (無綠色)。對綠色的觀感不佳;呈現綠色、紅色和黃色的混淆選項
- 突擊者 (不會顯示藍色)。對藍色的感知度低,無法分辨綠色和藍色。
- 全色盲 (看不到顏色):部分或完全失去色覺辨認能力。
停用 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 圖片):
- 開啟「算繪」分頁,勾選「停用 AVIF 圖片格式」。
img src
。目前的圖片 src (currentSrc
) 現為備用 WebP 圖片。
請重新載入網頁,然後將滑鼠遊標懸停在
同樣地,您可以停用 WebP 圖片。