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


当前回答

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

(添加断点)调试正常的js代码 < >脚本…</script>内部/嵌入HTML

步骤:

来源->页面->顶部->找到你的html ->点击->右侧显示html和js脚本->添加断点->调试

其他回答

我的处境以及我是如何改变的: 我有一个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有问题的人都有帮助。

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

< >脚本 ... (你的代码在这里) / / # sourceURL = somename.js > < /脚本

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

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

这是Chrome 71。

你必须将type="text/javascript"添加到脚本块中,以便将它们作为脚本拾取。例如: <script type="text/javascript">…你的代码在这里…> < /脚本

您谈论的是<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)。