參考這份「轉譯」分頁選項參考文件,找出可套用至您網頁的實用效果。
醒目顯示廣告頁框
如要查看頁框是否已標記為廣告,請按照下列步驟操作:
模擬已聚焦的網頁
將焦點從頁面切換到開發人員工具時,有些疊加層元素是由焦點觸發時會自動隱藏。例如下拉式清單、選單或日期挑選器。check_box 「模擬聚焦的網頁」選項可讓您對目前聚焦的元素進行偵錯。
如何模擬已聚焦的網頁:
- 開啟要偵錯元素的網頁,例如 YouTube 網站及其搜尋列。
在網頁上開啟「轉譯」分頁,然後檢查並清除「模擬聚焦的網頁」。
你也可以在「元素」 >「樣式」的動作列下方,找到相同選項的 :hov
按鈕。
停用本機字型
如要檢查本機字型替代文字是否正常運作,請在 @font-face
規則中停用 local()
來源。
開發人員和設計人員通常會在開發期間使用兩種同一種字型的副本:
- 設計工具的本機字型
- 程式碼適用的網路字型
停用本機字型可讓您更輕鬆地進行以下作業:
- 偵錯與評估網頁字型載入效能及最佳化
- 驗證 CSS
@font-face
規則是否正確 - 找出網頁字型和本機版本之間的差異
在 @font-face
規則中模擬缺少的 local()
個來源:
檢查上述語句,依序開啟「Elements」 >「Computed」,然後向下捲動至「Rendered Fonts」下方的「Courier New」本機檔案。
開啟「轉譯」分頁,勾選「停用本機字型」,然後 重新載入頁面。
觀察網路上找到 Roboto 的句子。
啟用自動深色模式
查看網站在深色模式中的呈現效果 (即使網站並未實作)。
Chrome 96 針對 Android 裝置上的自動深色主題推出了來源試用。透過這項功能,如果使用者在作業系統中選擇使用深色主題,瀏覽器就會將自動產生的深色主題套用至淺色主題網站。
如何啟用自動深色模式:
- 在這個頁面中開啟「算繪」分頁,然後勾選「啟用自動深色模式」。
- 請以深色模式查看這個頁面。
模擬視覺障礙人士
Google 致力提供各項功能,Google 致力達成這個目標。
有了 Chrome 開發人員工具,您就可以瞭解視覺障礙的使用者如何瀏覽您的網站,進而改善網站品質。詳情請參閱「模擬色彩視覺障礙」。
如何模擬視覺障礙:
- 開啟「轉譯」分頁。
在「模擬視覺障礙」下方,從下拉式清單中選取下列其中一個選項:
- 不模擬。
- 視力模糊:
- 降低對比度。
- 紅色盲 (看不到紅色):對紅色的認知較低;混淆綠色、紅色和黃色的感覺。
- 綠色盲 (看不到綠色):對綠色的認知較低,因為沒有綠色、紅色和黃色的混淆。
- 藍色盲 (看不到藍色):對藍色的認知較低;混淆綠色和藍調。
- 全色盲 (看不到顏色)。缺少色覺部分或整體缺少色覺。
停用 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 圖片。