如何在 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 文件的“在源面板中打开”选项。但在我的情况下，我的请求是将一些查询字符串传递给 js 文件，例如 assets/components/utility/mycustom.js?_=1528282662460，我无法看到此类请求的选项。感谢您提供此帮助，但需要更多帮助。

Answer 1

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

您可以通过在代码上方添加以下内容来命名动态加载文件中的一段javascript代码：

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

通过这样做，这段 javascript 将在源面板的文件树中可用，也可以通过 DevTools 的 CTRL+P 快捷方式找到。

Answer 2

转到开发工具的网络选项卡。可以通过js文件过滤，帮你找到需要的文件。右键单击所需的文件，然后选择在源面板中打开。您现在应该可以按照习惯将断点放在您喜欢的位置。