查看網頁資源

本指南會指導您如何使用 Chrome 開發人員工具查看網頁資源。資源是頁面正確顯示所需的檔案。資源範例包括 CSS、JavaScript、HTML 檔案及圖片

本指南假設您已熟悉網頁開發Chrome 開發人員工具的基本概念。

開啟資源

如果您知道要檢查的資源名稱,可以使用「Command 選單」快速開啟資源。

  1. 按下 Control + P 鍵或 Command + P 鍵 (Mac)。「Open File」對話方塊會隨即開啟。

    「開啟檔案」對話方塊

    圖 1:「Open File」對話方塊

  2. 從下拉式選單中選取檔案,或是輸入檔案名稱,並在自動完成方塊中醒目顯示正確的檔案後按下 Enter 鍵。

    在「開啟檔案」對話方塊中輸入檔案名稱

    圖 2:在「開啟檔案」對話方塊中輸入檔案名稱

在「網路」面板中開啟資源

請參閱「檢查資源的詳細資料」。

在「網路」面板中檢查資源

圖 3:在「網路」面板中檢查資源

從其他面板顯示「網路」面板中的資源

下方的「瀏覽資源」一節說明如何查看開發人員工具 UI 各部分中的資源。如要檢查「Network」面板中的資源,請在資源上按一下滑鼠右鍵,然後選取「Reveal in Network」面板

顯示在「網路」面板中

圖 4 「在網路面板中顯示」選項

瀏覽資源

「網路」面板中的資源

請參閱記錄網路活動

網路記錄中的網頁資源

圖 5:網路記錄中的網頁資源

依目錄瀏覽

如何依目錄查看頁面資源:

  1. 按一下「Sources」分頁標籤,開啟「Sources」面板。
  2. 按一下「頁面」分頁標籤,顯示頁面資源。「Page」(頁面) 窗格隨即會開啟。

    頁面窗格

    圖 6:「Page」(頁面) 窗格

    以下是圖 6 中不可見的項目細目:

    • top 是主要文件的瀏覽情境
    • airhorner.com 代表網域。巢狀結構下的所有資源都來自該網域。 舉例來說,comlink.global.js 檔案的完整網址可能是 https://airhorner.com/scripts/comlink.global.js
    • scripts 是目錄。
    • (索引) 是主要的 HTML 文件。
    • iu3 是另一個瀏覽情境。這個結構定義可能是由主要文件 HTML 中的 <iframe> 元素所建立。
    • sw.js 是一個 Service Worker 的執行環境。
  3. 按一下資源,即可在「編輯器」中查看。

    在編輯器中查看檔案

    圖 7. 在「Editor」中查看檔案

依檔案名稱瀏覽

根據預設,「網頁」窗格會依目錄將資源分組。如要停用這個分組功能,並將每個網域的資源顯示為一般清單,請按照下列步驟操作:

  1. 開啟「頁面」窗格。請參閱依目錄瀏覽
  2. 按一下「More Options」圖示 更多選項,然後停用「Group By Folder」

    依資料夾分組

    圖 8. 「Group By Folder」(分組依據資料夾) 選項

    資源是按照檔案類型整理。在每個檔案類型中,資源會按照字母順序排列。

    停用「分組依據資料夾」後的「Pages」窗格

    圖 9. 停用「Group By Folder」(分組依據資料夾) 後的「Page」(頁面) 窗格

依檔案類型瀏覽

如何根據檔案類型將資源分組:

  1. 按一下「Application」分頁標籤。「Application」面板會隨即開啟。根據預設,「Manifest」窗格通常會先開啟。

    「應用程式」面板

    圖 10. 「Application」面板

  2. 向下捲動至「Frames」窗格。

    Frames 窗格

    圖 11. 「Frames」窗格

  3. 展開你感興趣的部分。

  4. 按一下資源即可查看。

    在「應用程式」面板中查看資源

    圖 11. 在「Application」面板中查看資源

在「網路」面板中按照類型瀏覽檔案

請參閱「依資源類型篩選」。

在網路記錄中篩選 CSS

圖 12. 在網路記錄中篩選 CSS