如何在 Chrome DevTools 中調試 ajax 請求中加載的 js

Question

實際上，我是 Google Chrome DevTools 的忠實粉絲，但它是一個非常廣闊的學習領域。 我對此了解不多。 我知道如何調試點，搜索（Ctrl+Alt+F）和調試等基本的東西。

但是在我的一個項目中（它在 asp.net MVC 中），它在 Ajax 請求中請求不同的視圖，並且在該視圖中加載了一些 js。 我想調試它們，但我做不到。 實際上我不知道在哪里可以看到它們——尤其是在 ajax 調用之后加載的 JS（它不是內聯 javascript，而是一個單獨的 js 文件）。

我發現的一個解決方法是 - 如果我在那個 js 文件中放了 1 個“ debugger; ”，那么它會以一些 VM3012 或具有不同數字的類似名稱打開。 然后只有我可以看到文件。 但是我發布代碼時無法放置調試器。

任何人都知道然后請幫助。

非常感謝您的閱讀。

編輯

根據第一個答案，我已經嘗試過，但我可以看到普通 JS 文件的“在源面板中打開”選項。 但在我的情況下，我的請求是將一些查詢字符串傳遞給像assets/components/utility/mycustom.js?_=1528282662460這樣的 js 文件，我無法看到此類請求的選項。 對此幫助表示贊賞，但需要更多。

Answer 1

我知道已經3年了，但是...

您可以通過在代碼上方添加以下內容來命名動態加載文件中的一段 javascript 代碼：

//# sourceURL=my-file-name.js

通過這樣做，這段 javascript 將在源面板的文件樹中可用，也可以通過 DevTools 的 CTRL+P 快捷方式找到。

Answer 2

轉到開發工具的網絡選項卡。 可以通過js文件過濾，幫你找到需要的文件。 右鍵單擊所需的文件，然后選擇在源面板中打開。 您現在應該能夠按照習慣將斷點放在您喜歡的位置。