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


当前回答

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

其他回答

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

对于Firefox,您需要添加调试器;能够做什么@matt-ball建议的脚本标签。

所以在你的代码中,你在你想调试的行上面添加调试器,然后你可以添加断点。如果你只是在浏览器上设置断点,它不会停止。

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

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

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

(添加断点)调试正常的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有问题的人都有帮助。

我遇到了这个问题,但是我的内联函数是在一个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单击它可以让我遍历内联并将断点保留在那里以供以后使用。

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

虚拟机[n]无显著值,n on等于脚本ID。此信息可以在这里找到:Chrome“[VM]”