使用 網路請求阻擋 工具,檢查當某些資源無法使用時,網頁的外觀與行為,例如圖片檔案、JavaScript 檔案、字型或 CSS 樣式表。 使用此工具測試封鎖特定網址模式的網路請求,觀察網頁的行為。
當網頁依賴於託管於 HTML 以外的其他伺服器上的 外部資源 時,有時這些伺服器可能會對部分使用者無法回應或無法使用。 當這種情況發生時,你網頁所依賴的某些資源可能無法被瀏覽器檢索。 當外部資源無法載入時,檢查你的網頁表現非常重要。 測試網頁是否能妥善處理遺失的資源,或是使用者看起來有問題。
在建立被封鎖的網路請求並測試網頁後,你可以編輯或刪除被封鎖的網路請求。
封鎖網路請求
要阻擋網路請求:
請前往你想要阻擋網路請求的網頁。 例如,在新分頁或視窗中開啟 無障礙測試示範頁面 。 此網頁包含您可以使用 網路請求封鎖 工具封鎖的圖片。
要開啟 DevTools,請右鍵點擊網頁,然後選擇 檢查。 或者,在 Windows、Linux) 按 Ctrl+Shift+I (macOS) 按 Command+Option+I (。
在 DevTools 的 活動欄,點擊 「網路請求封鎖 」標籤。如果該分頁看不到,請點擊 「更多工具 」
按鈕。點擊 新增圖案 (
) 按鈕。 啟用 網路請求阻擋 的勾選框會自動被勾選。在 阻擋匹配請求的文字模式 中,輸入 *.jpg。 這會阻擋所有 JPEG 圖片的請求。
你可以做以下任何一項:
- 輸入完整的網址。
- 只要輸入網域名稱,就能阻擋來自該網域的所有請求。
- 將 URL 的部分替換為
*,以進行通配符模式匹配。
例如,匹配
contoso.com的網址如下:https://contoso.comhttps://subdomain.contoso.comhttps://subdomain.contoso.com/path/to/resource
並且
*.jpg匹配的網址如下:https://www.contoso.com/resource.jpghttp://third-party.com/6469272/163348534-b90ea1a3-c33cbeb1aed8.jpg
點擊 新增 按鈕:
重新整理頁面。 所有 JPEG 圖片都會被阻擋,因此在渲染的網頁中,每張圖片都會以「破損圖片」圖示顯示為遺失。 被封鎖的網路請求數量會在 網路請求阻擋 工具中顯示:
另請參閱:
- 在「檢查網路活動」中封鎖請求。
刪除被封鎖的網路請求
要刪除特定的網路封鎖請求模式:
在 網路請求阻擋 表中,將滑鼠移到網路阻擋請求模式上,然後點擊 「移除 」 (
) 按鈕:
要一次刪除所有網路封鎖請求:
- 在工具列中,點擊 「移除所有模式 」 (
) 按鈕。
修改被封鎖的網路請求
要更改已封鎖的網路請求:
在 網路請求封鎖 表中,將滑鼠移到被封鎖的網路請求上,然後點擊 編輯 (
) :
切換網路請求阻擋
要切換網路請求阻擋,而不必刪除並重新建立所有被封鎖的網路請求:
在工具列中,選擇或清除 啟用網路請求阻擋 的勾選框:
透過網路工具阻擋網路請求
你可以透過使用 網路請求阻擋 工具或使用 網路 工具來阻擋網頁所發出的網路請求。
使用 網路 工具阻擋網路請求:
請前往你想要阻擋網路請求的網頁。 例如,在新分頁或視窗中開啟 無障礙測試示範頁面 。
要開啟 DevTools,請右鍵點擊網頁,然後選擇 檢查。 或者,在 Windows、Linux) 按 Ctrl+Shift+I (macOS) 按 Command+Option+I (。 DevTools 開啟。
在 DevTools 的 活動欄,點選 網路 標籤。如果該分頁看不到,請點擊 「更多工具 」
按鈕。在底部窗格的網路請求表中,找到你想要阻擋的網路請求。
右鍵點擊網路請求,然後點選 「封鎖請求網址 」來封鎖這個特定資源,或用 「封鎖請求網域 」來封鎖同一網域的所有資源: