如何在 Chrome DevTools 中调试 ajax 请求中加载的 js

Question

事实上，我是 Google Chrome DevTools 的忠实粉丝，但它是一个非常广阔的学习领域。我对此了解不多。我知道如何找出调试点、搜索（Ctrl+Alt+F）和调试等基本内容。

但在我的一个项目（在 asp.net MVC 中）中，它在 Ajax 请求中请求不同的视图，并且在该视图中加载了一些 js。我想调试它们，但我无法做到。实际上我不知道在哪里可以看到它们 - 特别是在ajax调用后加载的JS（它不是内联javascript而是一个单独的js文件）。

我发现的一个解决方法是 - 如果我debugger;在该 js 文件中放入 1“”，那么它会以某个 VM3012 或具有不同数字的类似名称打开。然后只有我可以看到这些文件。但是当我发布代码时我无法放置调试器。

任何人都知道请帮忙。

非常感谢您的阅读。

编辑

根据第一个答案，我已经尝试过，但我可以看到普通 JS 文件的“在源面板中打开”选项。但就我而言，我的请求是将一些查询字符串传递到 js 文件，例如assets/components/utility/mycustom.js?_=1528282662460，我无法看到此类请求的该选项。感谢您的帮助，但还需要更多帮助。

Answer 1

我知道已经过去三年了，但是...

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

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

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