Chrome DevTools 搜索網站中的所有 javascript 文件

Question

我正在處理一個從 CDN 加載 Javascript 的新客戶網站，因此 Javascript 未嵌入或內嵌於網頁源代碼中。 我想在每次執行getCurrentPosition()暫停，以確定它包含在哪個外部 JS 文件中。

我意識到我可以使用其他工具對 JS 文件的內容進行字符串搜索，但我寧願保留 Chrome 的調試工具。

我應該嘗試創建一個監視表達式還是有另一種方法來確定某個 JS 函數在何時何地被觸發？

Answer 1

您可以使用 Chrome DevTools 搜索所有文件。 找到你的函數並調試它：

1. 打開開發者工具 (F12)
2. 轉到來源選項卡
3. 按ctrl + shift + f (Win) 或cmd + option + f (Mac) 打開搜索所有文件
4. 搜索getCurrentPosition
5. 放置斷點（通過單擊行左側的行號）

Answer 2

1. 打開谷歌開發工具（F12）
2. 按 Ctrl + p

在打開的框中搜索所有文件（JS、CSS、...）。

在框中，您有 5 個選項：

首先選擇一個文件以使用選項 2-5

1. 輸入“文件名”並選擇它。
2. 鍵入 ':linenumber' 轉到特定行號（':10' 轉到第 10 行）。
3. 鍵入“@symbol”轉到特定符號（“@TestSymbol”轉到 TestSymbol 符號）。

在此選項中，如果您編寫@JSFunctionName 或@CSSClassName，則光標將導航到 JSFunctionName 或 CSSClassName。

4. 輸入 '!snippet' 轉到特定的代碼段（'!snippetTest' 轉到snippetTest 代碼段）。
5. 鍵入“>googleCommand”以轉到特定命令（“>清除控制台”清除控制台）。

Answer 3

一種方法是用包裝函數替換Geolocation.getCurrentPosition方法，以便您可以在其中設置斷點，然后檢查堆棧以查看誰在調用它。

Answer 4

如果您知道該方法在代碼中的哪個位置被調用，您可以設置斷點。 這將在運行時暫停 javascript 執行並允許您獲得堆棧跟蹤。

Answer 5

您可以在網頁上找到您需要的所有信息：https ://developer.chrome.com/devtools/docs/javascript-debugging

通過簡單地把它（從網頁復制）

打開一個站點，例如 Google Closure hovercard 演示頁面或 TodoMVC

1. 打開一個站點，例如 Google Closure hovercard 演示頁面或 TodoMVC Angular 應用程序

2. 打開開發者工具窗口。

3. 如果尚未選擇，請選擇來源。

使用斷點調試

斷點是腳本中有意停止或暫停的地方。 使用 DevTools 中的斷點來調試 JavaScript 代碼、DOM 更新和網絡調用。

添加和刪​​除斷點 在 Sources 面板中，打開 JavaScript 文件進行調試。 在下面的示例中，我們正在調試來自 TodoMVC 的 AngularJS 版本的 todoCtrl.js 文件。

單擊行間距為該行代碼設置斷點。 藍色標記將指示是否已設置斷點：

通過上面的簡單示例，您實際上可以“停止”函數getCurrentPosition()並對其進行調試。