Chrome开发者工具来源未正确显示javascript文件

Question

我是JavaScript，jQuery和JSON浏览器调试的新手。但我知道chrome dev工具中的“Sources”选项卡应该让我在浏览器中查看我的JavaScript文件，这样我就可以设置和管理断点并有效地调试我的代码。

然而，当我按Ctrl + Shift + I打开chrome dev工具时，我无法在Sources选项卡下看到我的javascript文件列表。

我只是...的形式......

jslib.axd?=jquery-.7.2.min.js,query.validate.min.js,MyRegion.js,MyCountry.js,MyCategory.js

...看起来像是我所有javascript文件的连接列表。但我期待看到的是我的每个javascript文件的列表。

截图：

Answer 1

看起来您使用了压缩工具来组合所有的javascript文件。你看到的不是Chrome中的错误 - 它只是将你的所有脚本文件合并为一个。

如果您还在开发中，只需关闭您正在使用的任何工具来压缩它们（至少在您完成开发工作之前）。这将允许您的脚本在页面上单独加载。

然后您可以使用chrome dev工具查看列出的每个文件。

Answer 2

如果要设置断点。在代码中使用'debugger'，如下所示：

//code here
debugger;

我从不使用Chrome来调试javascript，但我相信你可以轻松地做到这一点。 Firefox中的Firebug非常棒，如果你将IE与'debugger'一起使用，你也可以在Visual Studio中进行调试。

希望得到这个帮助。

Answer 3

如果您使用chrome / firefox，只需按f12即可打开Web开发工具

现在转到源/脚本部分并选择要在其中添加断点的js文件

只需单击该行即可添加断点而不会运行它将进入断点的功能然后您可以通过F10调试单线并移动到下一个断点按F8