查看網頁資源

Kayce Basques

Twitter GitHub Glitch

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

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

開啟資源

如果您知道要檢查的資源名稱，可以使用「Command Menu」(指令選單) 快速開啟資源，

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

   

   圖 1. 「Open File」對話方塊

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

   

   圖 2：在「Open File」對話方塊中輸入檔案名稱

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

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

圖 3 在「Network」面板中檢查資源

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

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

圖 4 「Reveal in Network」面板選項

瀏覽資源

瀏覽「網路」面板中的資源

請參閱「記錄網路活動」。

圖 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. 按一下資源即可在「Editor」(編輯器) 中查看。

   

   圖 7. 在編輯器中查看檔案

依檔案名稱瀏覽

根據預設，「網頁」窗格會依目錄將資源分組。如要停用這項分組功能，並以平面清單的形式查看每個網域的資源：

1. 開啟「網頁」窗格。請參閱依目錄瀏覽。

2. 按一下「More Options」圖示 並停用「Group by Folder」。

   

   圖 8. 「Group by Folder」選項

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

   

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

依檔案類型瀏覽

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

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

   

   圖 10. 「Application」面板

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

   

   圖 11. 「Frames」窗格

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

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

   

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

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

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

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