如何调试Chrome DevTools

时间:2018-06-04 08:48:29

标签: javascript google-chrome google-chrome-devtools

实际上我是谷歌Chrome DevTools的忠实粉丝,但它是一个非常广泛的学习领域。我不太了解它。我知道如何调试点,搜索(Ctrl + Alt + F)和调试等基本的东西。

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

我找到的解决方法是 - 如果我放1" debugger;"在该js文件中,然后打开一些VM3012或具有不同数字的类似名称。然后只有我可以看到文件。但是当我发布代码时,我无法调试器。

任何机构都知道,请帮助。

非常感谢阅读。

修改

根据第一个答案,我已经尝试但我可以看到该选项"在源面板中打开"对于普通的JS文件。但在我的情况下,我的请求是将一些查询字符串传递给js文件,如assets/components/utility/mycustom.js?_=1528282662460,我无法看到这种请求的选项。这个帮助值得赞赏,但需要更多。

2 个答案:

答案 0 :(得分:0)

转到开发工具的网络标签。您可以按js文件进行过滤,以帮助您找到所需的文件。右键单击所需的文件,然后选择“在源中打开”面板。您现在应该可以像以前一样将断点放在您喜欢的位置。

答案 1 :(得分:0)

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

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

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

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