共用方式為


網路請求阻擋工具

使用 網路請求阻擋 工具,檢查當某些資源無法使用時,網頁的外觀與行為,例如圖片檔案、JavaScript 檔案、字型或 CSS 樣式表。 使用此工具測試封鎖特定網址模式的網路請求,觀察網頁的行為。

當網頁依賴於託管於 HTML 以外的其他伺服器上的 外部資源 時,有時這些伺服器可能會對部分使用者無法回應或無法使用。 當這種情況發生時,你網頁所依賴的某些資源可能無法被瀏覽器檢索。 當外部資源無法載入時,檢查你的網頁表現非常重要。 測試網頁是否能妥善處理遺失的資源,或是使用者看起來有問題。

在建立被封鎖的網路請求並測試網頁後,你可以編輯或刪除被封鎖的網路請求。

封鎖網路請求

要阻擋網路請求:

  1. 請前往你想要阻擋網路請求的網頁。 例如,在新分頁或視窗中開啟 無障礙測試示範頁面 。 此網頁包含您可以使用 網路請求封鎖 工具封鎖的圖片。

  2. 要開啟 DevTools,請右鍵點擊網頁,然後選擇 檢查。 或者,在 Windows、Linux) 按 Ctrl+Shift+I (macOS) 按 Command+Option+I (。

  3. 在 DevTools 的 活動欄,點擊 「網路請求封鎖 」標籤。如果該分頁看不到,請點擊 「更多工具 (「更多工具」圖示) 按鈕。

  4. 點擊 新增圖案 (新增圖案圖示) 按鈕。 啟用 網路請求阻擋 的勾選框會自動被勾選。

  5. 阻擋匹配請求的文字模式 中,輸入 *.jpg。 這會阻擋所有 JPEG 圖片的請求。

    你可以做以下任何一項:

    • 輸入完整的網址。
    • 只要輸入網域名稱,就能阻擋來自該網域的所有請求。
    • 將 URL 的部分替換為 *,以進行通配符模式匹配。

    例如,匹配 contoso.com 的網址如下:

    • https://contoso.com
    • https://subdomain.contoso.com
    • https://subdomain.contoso.com/path/to/resource

    並且 *.jpg 匹配的網址如下:

    • https://www.contoso.com/resource.jpg
    • http://third-party.com/6469272/163348534-b90ea1a3-c33cbeb1aed8.jpg
  6. 點擊 新增 按鈕:

    網路請求封鎖工具,顯示新的 *.jpg 封鎖模式

  7. 重新整理頁面。 所有 JPEG 圖片都會被阻擋,因此在渲染的網頁中,每張圖片都會以「破損圖片」圖示顯示為遺失。 被封鎖的網路請求數量會在 網路請求阻擋 工具中顯示:

    網路請求封鎖工具,封鎖所有 JPEG 圖片

另請參閱:

刪除被封鎖的網路請求

要刪除特定的網路封鎖請求模式:

  • 網路請求阻擋 表中,將滑鼠移到網路阻擋請求模式上,然後點擊 「移除 」 (「移除被阻擋的請求」圖示) 按鈕:

    移除被封鎖的請求

要一次刪除所有網路封鎖請求:

  • 在工具列中,點擊 「移除所有模式 」 (「移除所有被阻擋請求」圖示) 按鈕。

修改被封鎖的網路請求

要更改已封鎖的網路請求:

  • 網路請求封鎖 表中,將滑鼠移到被封鎖的網路請求上,然後點擊 編輯 (編輯被封鎖請求圖示) :

    編輯被封鎖的請求

切換網路請求阻擋

要切換網路請求阻擋,而不必刪除並重新建立所有被封鎖的網路請求:

  • 在工具列中,選擇或清除 啟用網路請求阻擋 的勾選框:

    切換網路請求阻擋

透過網路工具阻擋網路請求

你可以透過使用 網路請求阻擋 工具或使用 網路 工具來阻擋網頁所發出的網路請求。

使用 網路 工具阻擋網路請求:

  1. 請前往你想要阻擋網路請求的網頁。 例如,在新分頁或視窗中開啟 無障礙測試示範頁面

  2. 要開啟 DevTools,請右鍵點擊網頁,然後選擇 檢查。 或者,在 Windows、Linux) 按 Ctrl+Shift+I (macOS) 按 Command+Option+I (。 DevTools 開啟。

  3. 在 DevTools 的 活動欄,點選 網路 標籤。如果該分頁看不到,請點擊 「更多工具 (「更多工具」圖示) 按鈕。

  4. 在底部窗格的網路請求表中,找到你想要阻擋的網路請求。

  5. 右鍵點擊網路請求,然後點選 「封鎖請求網址 」來封鎖這個特定資源,或用 「封鎖請求網域 」來封鎖同一網域的所有資源:

    網路工具的阻擋