如何在 Chrome 中查詢 JavaScript 函式定義？

---

在當今時代，幾乎每個人都知道 Google Chrome 以及如何使用它來提高舒適度。但是對於開發者來說，必須具備使用 Chrome 的高階知識，因為 Chrome 可以幫助開發者以多種方式解決問題，例如輕鬆解決問題或除錯程式碼、檢查程式碼以及查詢程式碼中定義的 JavaScript 函式。

在本教程中，我們將學習如何在 Google Chrome 中查詢在 JavaScript 程式碼中定義的 JavaScript 函式。

以下是在 Google Chrome 中查詢 JavaScript 函式的三種方法。

• 使用開發者工具
• 使用檢查元素
• 使用檢視頁面原始碼

讓我們逐步討論每種方法的使用。

使用開發者工具

開發者工具對於開發人員的開發工作非常重要。

以下是使用開發者工具在程式碼中搜索特定關鍵字或 JavaScript 函式的步驟：

使用開發者工具的步驟

步驟 1 − 對於 Windows 作業系統，使用ctrl + shift + J 鍵組合，對於 macOS，使用cmd + optn + J 鍵組合，直接開啟開發者工具。下圖將顯示開發者工具的介面：

步驟 2 − 開啟開發者工具後，您可以根據您的作業系統使用以下鍵的組合。

Windows − ctrl + shift + F

macOS − cmd + optn + F

上述鍵組合將開啟搜尋欄，您可以在其中輕鬆搜尋特定關鍵字以及要查詢的 JavaScript 函式，如下面的影像所示：

在上述步驟中，我們學習瞭如何在 Google Chrome 的開發者工具中搜索 JavaScript 函式並獲得所需的結果。

使用檢查元素

檢查元素對於開發人員非常有用，因為他們可以使用它檢查瀏覽器內部的整個程式碼。

以下是使用檢查元素在程式碼中搜索特定關鍵字或 JavaScript 函式的步驟：

使用檢查元素的步驟

步驟 1 − 在第一步中，您需要開啟檢查元素。透過右鍵單擊瀏覽器視窗，將顯示您可以在瀏覽器上執行的操作列表，在該列表的底部，您會看到一個名為“檢查”的選項，如下面的影像所示：

步驟 2 − 單擊“檢查”選項，將開啟檢查元素以供使用。

開啟檢查元素工具後，您可以使用兩種方法查詢 JavaScript 函式。

手動瀏覽 body 標籤內的程式碼並檢查 script 標籤，然後在 script 標籤的程式碼中搜索所需的函式。由於這種搜尋函式的方式將非常耗時且冗長，因此您可以使用其他選項。

當您開啟檢查元素時，螢幕上將顯示搜尋選項，您可以在其中寫入所需的關鍵字或函式名稱以在程式碼中搜索它。

下圖將顯示使用上述兩種選項搜尋 JavaScript 函式的過程：

在上述步驟中，我們學習瞭如何使用檢查元素方法在 Google Chrome 中查詢 JavaScript 函式。現在，我們將瞭解檢視頁面原始碼方法的使用。

使用檢視頁面原始碼

這是在 Chrome 中搜索或查詢 JavaScript 函式的另一種方法。

以下是使用檢視原始碼在程式碼中搜索特定關鍵字或 JavaScript 函式的步驟。

使用檢視頁面原始碼的步驟

步驟 1 − 使用檢視頁面原始碼方法的第一步是開啟檢視頁面原始碼以訪問網站或網頁的程式碼，以便您可以遍歷程式碼以查詢所需的關鍵字或要搜尋的函式。

您可以透過右鍵單擊瀏覽器視窗來開啟檢視頁面原始碼。右鍵單擊後，將顯示一個列表，其中倒數第二個選項將是“檢視頁面原始碼”，單擊該選項，您將能夠訪問網頁的原始碼。下圖將顯示該選項在列表中的位置：

步驟 2 − 當您開啟“檢視頁面原始碼”選項時，瀏覽器視窗中當前網頁的整個原始碼將對您可見。在原始碼中，您需要搜尋 script 標籤，該標籤將位於 body 標籤的末尾。當 script 標籤搜尋完成後，您可以在 script 標籤的程式碼中進一步搜尋 JavaScript 函式。如下面的影像所示：

在本教程中，我們看到了三種搜尋或查詢 Google Chrome 中 JavaScript 函式的方法，這些方法非常有用，開發人員必須熟悉所有這些方法，因為它們使開發易於理解。