使用搜尋工具尋找頁面的原始程式檔

使用搜尋工具來尋找網頁的特定來源檔案，包括 HTML、CSS、JavaScript 和影像檔。

網頁主要是瀏覽器用來顯示內容的 HTML 檔案。但除了 HTML 檔案之外，網頁通常還需要其他資源，例如 CSS、JavaScript 或影像檔，才能提供更豐富的內容。

在[來源]工具中，[導覽器] 窗格的 [頁面] 索引標籤會顯示網頁所下載的所有資源。但是，當有許多資源時，搜尋這些資源會變得很有用。若要在網頁的所有資源上執行文字和正則運算式搜尋，請使用搜尋工具。

使用鍵盤快速鍵開啟搜尋工具

若要快速開啟搜尋工具：

若要開啟 DevTools，請以滑鼠右鍵按一下網頁，然後選取 [ 檢查]。或者，按 Ctrl+Shift+I (Windows、Linux) 或 Command+Option+I (macOS) 。 DevTools 隨即開啟。
在 DevTools 中，按 Esc 以開啟 [隱藏式選單]，然後在 [隱藏式選單] 工具列上選取 [ 搜尋] 索引卷 標。如果看不到該索引標籤，請按一下 [更多] 索引卷標 ([更多] 索引卷 ) 按鈕，或按一下 [ 其他工具 () 按鈕。

或者，按 Ctrl+Shift+F (Windows、Linux) 或 Command+Option+F (macOS) 。

[搜尋] 工具會在[快速檢視]面板中開啟：

若要從命令功能表開啟搜尋工具：

若要開啟 DevTools，請以滑鼠右鍵按一下網頁，然後選取 [ 檢查]。或者，按 Ctrl+Shift+I (Windows、Linux) 或 Command+Option+I (macOS) 。 DevTools 隨即開啟。
按下 Ctrl+Shift+P (Windows、Linux) 或Command+Shift+P (macOS) ，以開啟 [命令] 功能表。
開始輸入搜尋，然後選取 [顯示搜尋]：

若要搜尋目前網頁及其資源檔中的文字：

搜尋工具會顯示相符資源的清單，並醒目提示對應的文字行。相符檔案和行的數目也會在工具底部指出。

根據預設，搜尋工具不會區分大小寫。不論小寫或大寫字元為何，搜尋字詞都會符合該字詞的出現次數。

若只要尋找符合特定案例的結果 (小寫或大寫字元) ，請按一下搜尋工具列中的 [ 比對大小寫 (Aa) ] 按鈕。

您可以使用正則運算式來尋找相符的結果。若要使用正則運算式，請按一下工具列中的 [使用正則表達式 (.*) ] 按鈕，然後在 [搜尋] 文字方塊中輸入有效的JavaScript 正則表達式：

不需要正斜線 (/) 通常以 JavaScript 分隔正則運算式模式的字元。

同樣地，在 JavaScript 正則運算式中，選擇性地出現在右斜線 (/) 後面的旗標不能在這裡使用。搜尋工具會比對結果， g 如同已提供、 i 和 m 正則運算式旗標一樣：

國旗	名稱	描述
`g`	全域	搜尋是全域的：即使在找到第一個相符專案之後，工具仍會繼續搜尋檔案，如同已提供正則運算式 `g` 旗標一樣。
`i`	忽略大小寫	搜尋預設會忽略大小寫，如同 `i` 已提供旗標一樣。若要停用此旗標，且只尋找符合特定案例的結果，請按一下搜尋工具列中的 [ 比對案例 (Aa) ] 按鈕。
`m`	多行	搜尋是多行的：此工具會獨立處理原始程式檔中的每一行，而 `^` 和 `$` 符號分別符合任何行的開始和結尾，就如 `m` 同已提供旗標一樣。

另請參閱:

進行搜尋之後，按一下結果行以開啟對應的檔案。來源工具會在主面板中開啟，並載入資源檔，捲動至相符的行：

網頁在完成載入之後可以繼續要求資源，因此在搜尋面板中顯示的結果可能會在一段時間後過時。

若要更新搜尋結果，請執行下列其中一項：

若要清除搜尋結果，請按一下工具列中的 [ 清除 () 按鈕。