【问题标题】:How to set a JavaScript breakpoint from code in Chrome?如何从 Chrome 中的代码设置 JavaScript 断点?
【发布时间】:2014-08-21 10:40:41
【问题描述】:

我想强制 Chrome 调试器在一行上中断通过代码,或者使用某种注释标签,例如console.break()

【问题讨论】:

  • 您尝试过debugger; 还是只是在开发人员工具栏中使用常规断点?
  • 您的意思是从代码本身设置断点,而不是使用开发人员工具中的脚本观察器设置断点?
  • 不是重复的。 “in Chrome”与“in code”是两个不同的东西,这个问题适用于许多非 XHR 场景。是 另一个问题中的答案中有 1 个回答了这个问题,但其他问题不适用。我从字面上搜索了“从代码 chrome 设置 javascript 断点”,这是第一个结果,另一个问题甚至不在第一页上。

标签: javascript debugging google-chrome breakpoints


【解决方案1】:

您可以在代码中使用debugger;。如果开发者控制台打开,执行将中断。它也适用于萤火虫。

【讨论】:

【解决方案2】:

在“脚本”选项卡上,转到您的代码所在的位置。在行号的左侧,单击。这将设置一个断点。

截图:

然后您将能够在右侧选项卡中跟踪您的断点(如屏幕截图所示)。

【讨论】:

  • 这没有回答问题,他希望能够在代码中
  • 如果你加载一个带有 Ajax 调用的 JS 脚本,它不会在这里显示,因此需要在代码中设置断点。
  • @FlorianMargaine,不再有“脚本”选项卡。请更新图片。
  • 在某些框架中,例如 Drupal,JS 会添加一个缓存清除查询字符串后缀。如果你刷新缓存,它通常会更新这个后缀,这可以清除你在之前加载时设置的任何断点。
【解决方案3】:

这是可能的,您可能想这样做的原因有很多。例如,在页面加载开始时调试 javascript 无限循环,这会阻止 chrome 开发人员工具集(或 firebug)正确加载。

参见第 2 节

http://www.laurencegellert.com/2012/05/the-three-ways-of-setting-breakpoints-in-javascript/

或者只是在所需的测试点将包含单词 debugger 的行添加到您的代码中。

【讨论】:

    【解决方案4】:

    正如其他人已经说过的那样,debugger; 是要走的路。 我编写了一个小脚本,您可以在浏览器的命令行中使用它在函数调用之前设置和删除断点: http://andrijac.github.io/blog/2014/01/31/javascript-breakpoint/

    【讨论】:

      【解决方案5】:

      【讨论】:

      • 这在点击处理程序中设置了一个断点,可能不是 OP 想要的
      • @PeterV 如果我只是想将我的代码打开到一个接近我正在调试的代码块的地方,我会发现它很有用......但不想调试一直......但是,如果只是为了打开调试器......那么有一个按键。
      【解决方案6】:

      debugger 是 EcmaScript 的保留关键字,并且从 ES5 开始具有可选语义

      因此,它不仅可以在 Chrome 中使用,还可以在 Firefox 和 Node.js 中使用via node debug myscript.js

      standard says:

      语法

      DebuggerStatement :
          debugger ;
      

      语义

      评估 DebuggerStatement 产品可能允许实现在调试器下运行时导致断点。如果调试器不存在或不活动,则此语句没有可观察到的效果。

      生产 DebuggerStatement : debugger ;评估如下:

      1. 如果实现定义的调试工具可用并启用,则
        1. 执行实现定义的调试操作。
        2. 让 result 是实现定义的 Completion 值。
      2. 其他
        1. 让结果为(正常、空、空)。
      3. 返回结果。

      ES6 没有变化。

      【讨论】:

        【解决方案7】:

        您也可以使用debug(function),在调用function 时中断。

        Command Line API Reference: debug

        【讨论】:

        • 非常好 - 目前似乎只有 Chrome,但无论如何这是我的主要平台。现在我只需要记住停止调用我的全局调试标志“debug”...
        • Chrome 调试器命令行 API 参考实际上包含了一些我不知道的非常有用的东西。谢谢!
        • @8ctopus:你确定吗?可以在 Chrome 开发工具控制台中尝试以下 sn-p 验证吗? function foo(){}debug(foo);foo();
        【解决方案8】:

        断点:-

        断点将停止执行,并让您检查 JavaScript 值。

        检查值后,您可以继续执行代码(通常使用播放按钮)。

        调试器:-

        调试器;停止 JavaScript 的执行,并调用调试函数。

        调试器语句暂停执行,但它不关闭任何文件或清除任何变量。

        Example:-
        function checkBuggyStuff() {
          debugger; // do buggy stuff to examine.
        };
        

        【讨论】:

          【解决方案9】:

          您也可以设置debug(functionName) 来调试功能。

          https://developers.google.com/web/tools/chrome-devtools/javascript/breakpoints#function

          【讨论】:

            【解决方案10】:

            有很多方法可以调试 JavaScript 代码。以下两种方法被广泛用于通过代码调试 JavaScript

            1. 使用console.log() 打印出浏览器中的值 安慰。 (这将帮助您了解某些点的值 你的代码)

            2. 调试器关键字。将debugger; 添加到您想要的位置 调试,然后打开浏览器的开发者控制台并导航到 来源标签。

            有关调试 JavaScript 代码的更多工具和方法,请参阅this link by W3School

            【讨论】:

              【解决方案11】:

              如果您只是想终止并停止 javascript 代码,我不推荐 debugger;,因为 debugger; 只会暂时冻结您的 javascript 代码,而不是永久停止它。

              如果您想在您的命令中正确终止和停止 javascript 代码,请使用以下命令:

              throw new Error("This error message appears because I placed it");

              【讨论】:

                【解决方案12】:

                这个要点Git pre-commit hook to remove stray debugger statements from your merb project

                如果想在提交时删除 debugger 断点可能有用

                【讨论】:

                • 虽然此链接可能会回答问题,但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改,仅链接答案可能会失效。 - From Review
                猜你喜欢
                • 1970-01-01
                • 2011-07-06
                • 2012-06-05
                • 1970-01-01
                • 1970-01-01
                • 1970-01-01
                • 1970-01-01
                相关资源
                最近更新 更多