如何设置断点在内联Javascript在谷歌Chrome?

当我在谷歌Chrome中打开开发人员工具时，我看到了各种各样的功能，如配置文件，时间线和审计，但基本功能，如能够在js文件和html和javascript代码中设置断点是缺失的!我尝试使用javascript控制台，它本身就有bug——例如，一旦遇到JS错误，除非刷新整个页面，否则我无法摆脱它。有人能帮忙吗?

205066 次浏览
小开

你是在谈论<script>标记中的代码，还是在HTML标记属性中，就像这样?

<a href="#" onclick="alert('this is inline JS');return false;">Click</a>

无论哪种方式，像这样的debugger关键字都可以工作:

<a href="#" onclick="debugger; alert('this is inline JS');return false;">Click</a>

如果开发工具没有打开，Chrome浏览器将不会暂停在debuggers。

你也可以在JS文件和<script>标签中设置属性断点:

  1. 单击来源选项卡
  2. 单击显示导航图标并选择a文件
  3. 双击左侧空白处的a行号。相应的行被添加到断点面板(4)。

enter image description here

小开
最佳答案

使用sources选项卡，可以在那里用JavaScript设置断点。在它下面的目录树中(其中有上下箭头)，您可以选择要调试的文件。您可以通过按下同一选项卡右侧的resume来摆脱错误。

小开

如果你看不到“脚本”选项卡，请确保你启动Chrome时设置了正确的参数。当我用参数--remote-shell-port=9222启动Chrome调试服务器端JavaScript时，我遇到了这个问题。我没有问题，如果我启动Chrome没有参数。

小开

在脚本选项卡上打开开发人员工具时，刷新包含脚本的页面。这将在文件列表中添加一个(程序)条目，显示页面的html(包括脚本)。从这里可以添加断点。

小开

我的情况和我做了什么来解决它:
我有一个javascript文件包括在HTML页面如下:
页面名称:test.html

<!DOCTYPE html>
<html>
<head>
<script src="scripts/common.js"></script>
<title>Test debugging JS in Chrome</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div>
<script type="text/javascript">
document.write("something");
</script>


</div>
</body>
</html>

现在进入Javascript调试器在Chrome，我点击脚本选项卡，并下拉列表如上所示。我可以清楚地看到脚本/ common.js，但是我可以在下拉菜单中看到当前的html页面test.html，因此我无法调试嵌入的javascript:

<script type="text/javascript">
document.write("something");
</script>

这令人费解。然而，当我从嵌入式脚本中删除过时的type = " text / javascript "时:

<script>
document.write("something");
</script>
< p > . .刷新/重新加载页面，瞧，它出现在下拉列表中，一切正常 我希望这对任何在html页面上调试嵌入式javascript有问题的人都有帮助
小开

使用Visual Studio(2012)我有同样的问题，切换到IIS Express解决了问题!

script标记的type属性没有被考虑在内。

由于某些原因，Visual Studio开发服务器没有提供Chrome启用断点所需的一切。

小开

我遇到了这个问题，但是我的内联函数是在一个angularJS视图中。因此，在加载时，我无法访问内联脚本来添加调试，因为只有index.html在调试器的sources选项卡中可用。

这意味着，当我打开特定的视图与我的内联(没有选择在这)是不可访问的。

我能击中它的唯一方法是把一个错误的函数或调用内联JS函数。

我的解决方案包括:

function doMyInline(data) {
//Throw my undefined error here.
$("select.Sel").debug();


//This is the real onclick i was passing to
angular.element(document.getElementById(data.id)).scope().doblablabla(data.id);
}

这意味着当我点击我的按钮，我就会在chrome控制台提示。

Uncaught TypeError: undefined is not a function

这里重要的事情是这个的来源:VM5658:6点击它允许我通过内联和保持断点在那里为以后。

极其复杂的到达方式。但是当处理动态加载视图的单页应用程序时，它是有用的。

VM[n]没有重要的值，而n on等于脚本ID。这个信息可以在这里找到:Chrome“(VM)”

小开

调试ajax返回的html内部脚本的另一个直观的简单技巧是临时将console.log("test")放在脚本中。

触发事件后，打开开发人员工具中的控制台选项卡。 您将看到源文件链接显示在"test"调试打印语句的右侧。只需单击源代码(类似VM4xxx)，现在就可以设置断点了。< / p >

附注:此外，你可以考虑把“调试器”声明，如果你正在使用chrome，就像什么是由@Matt球的建议

小开

这是上面Rian Schmits的回答的扩展。在我的例子中，我在JavaScript代码中嵌入了HTML代码，除了HTML代码，我看不到其他任何东西。也许Chrome调试已经改变了多年，但右键单击Sources/Sources选项卡给了我将文件夹添加到工作区。我可以添加我的整个项目，这让我可以访问我所有的JavaScripts。你可以找到更多的细节在此链接。我希望这能帮助到一些人。

小开

你也可以给你的脚本一个名字:

< p > <代码> & lt; script> ．.． (你的代码在这里) / / # sourceURL = somename.js 代码& lt; / script> < / > < / p >

当然，用一些名字替换“someename”;)然后你会在chrome调试器“Sources > top > (no domain) > someename .js”中看到它作为一个正常的脚本，你将能够像其他脚本一样调试它

小开

在我的脚本中添加debugger;对我来说是有效的。

小开

我也有同样的问题，如何调试JavaScript是在<script>标签。但后来我在Sources选项卡下找到了它，名为“(index)”，带圆括号。单击行号以设置断点。

enter image description here

这是Chrome 71。

小开

我知道问题不是关于Firefox，但我不想添加这个问题的副本来自己回答它。

对于Firefox，您需要添加debugger;，以便能够执行@matt-ball为script标记建议的操作。

因此，在代码中，在要调试的行上方添加debugger，然后可以添加断点。如果你只是在浏览器上设置断点，它不会停止。

如果这不是添加Firefox答案的地方，那么这个问题是关于Chrome的。不要:(如果没有答案，请告诉我应该把它贴在哪里，我会很高兴地把它移到哪里。：）

小开
你必须将type="text/javascript"添加到脚本块中，以便将它们作为脚本拾取。例如: <script type="text/javascript"> ...your code here... </script> < / p >
小开

对于像我这样的人:只是想

  • (添加断点)调试正常的js代码
    • <script> ... </script>内/嵌入式html

步骤:

    <李> Sources→Page→Top→找到你的HTML ->点击→右侧显示HTML和js脚本->添加断点->调试
    • enter image description here

提交答案