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

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

当前回答

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

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

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

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

注意:如果开发工具没有打开，Chrome不会在调试器上暂停。

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

单击Sources选项卡单击Show Navigator图标并选择文件双击左侧空白处的a行号。相应的行被添加到Breakpoints面板(4)。

2011-03-01 15:26:46

其他回答

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

2016-03-01 20:03:56

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

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

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

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

注意:如果开发工具没有打开，Chrome不会在调试器上暂停。

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

单击Sources选项卡单击Show Navigator图标并选择文件双击左侧空白处的a行号。相应的行被添加到Breakpoints面板(4)。

2011-03-01 15:26:46

我的处境以及我是如何改变的: 我有一个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，我点击脚本选项卡，并下拉列表如上所示。我可以清楚地看到scripts/common.js，但我不能在下拉菜单中看到当前的html页面test.html，因此我无法调试嵌入的javascript:

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

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

<script>
  document.write("something");
</script>

．．然后刷新/重新加载页面，瞧，它出现在下拉列表中，一切又恢复正常了。我希望这对任何在html页面上调试嵌入式javascript有问题的人都有帮助。

2012-04-11 22:25:28

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

2011-03-01 15:32:27

添加调试器;我的剧本对我很有用。

2018-03-28 09:19:41

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

推荐文章

最新文章

标签