如何从Chrome中的代码设置JavaScript断点?

时间:2012-04-06 23:44:49

标签: javascript debugging google-chrome breakpoints

我想强制Chrome调试器通过代码在行中断,或者使用某种评论标记,例如console.break()

12 个答案:

答案 0 :(得分:1080)

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

答案 1 :(得分:24)

设置按钮单击侦听器并调用debugger;

示例

$("#myBtn").click(function() {
 debugger;   
});

<强>演示

http://jsfiddle.net/hBCH5/

有关JavaScript调试的资源

答案 2 :(得分:22)

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

Command Line API Reference: debug

答案 3 :(得分:16)

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

答案 4 :(得分:7)

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

截图:

screenshot of breakpoint in chrome

然后,您就可以在右侧标签中跟踪断点(如屏幕截图所示)。

答案 5 :(得分:7)

Test Hello World是EcmaScript提供的保留关键字,自ES5起提供可选语义

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

standard says

  

语法

debugger
     

语义

     

评估DebuggerStatement生成可能允许实现在调试器下运行时导致断点。如果调试器不存在或处于活动状态,则此语句没有可观察到的影响。

     

生产DebuggerStatement:debugger;评估如下:

     
      
  1. 如果实现定义的调试工具可用并启用,那么      
        
    1. 执行实现定义的调试操作。
    2.   
    3. 让结果成为实现定义的完成值。
    4.   
  2.   
  3. 否则      
        
    1. 让结果为(正常,空,空)。
    2.   
  4.   
  5. 返回结果。
  6.   

ES6没有变化。

答案 6 :(得分:3)

这可能是您可能想要执行此操作的原因。例如,调试靠近页面加载开始的javascript无限循环,这会阻止chrome开发人员工具集(或firebug)正确加载。

第2节

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

或者只是在所需的测试点添加包含单词debugger的行。

答案 7 :(得分:3)

  

断点: -

     

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

     

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

     

调试器: -

     

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

     

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

public override void OnDetectRelatedMsiPackage(WPFBootstrapperEventArgs<Wix.DetectRelatedMsiPackageEventArgs> e)
{
    var existingPackageProductCode = e.Arguments.ProductCode;
    var existingPackageId = e.Arguments.PackageId;

    if (existingPackageId != HSMClientPackageID)
    {
        return;
    }

    InstallData.RelatedOperation = e.Arguments.Operation;
    if (InstallData.RelatedOperation == Wix.RelatedOperation.MajorUpgrade)
    {
        //requires reference to WiX Toolset\SDK\Microsoft.Deployment.WindowsInstaller.dll
        var installedPackage = new ProductInstallation(existingPackageProductCode);
        if (!installedPackage.IsInstalled)
        {
            //Log(string.Format("Migrating Package {0}, which is not installed, so marking it and it's features as Absent", existingPackageId));
            _packageStates[existingPackageId] = Wix.PackageState.Absent;
        }
        else
        {
            //Log(string.Format("Migrating features for MajorUpgrade of Package {0}", existingPackageId));

            _packageStates[existingPackageId] = Wix.PackageState.Present;

            foreach (var currentInstallFeature in installedPackage.Features)
            {
                switch (currentInstallFeature.State)
                {
                    case InstallState.Local:
                        //Log(string.Format("Migrating feature {1} of Package {0} - marking as Present", existingPackageId, currentInstallFeature.FeatureName));
                        _featureStates[currentInstallFeature.FeatureName] = Wix.FeatureState.Local;
                        break;
                    case InstallState.Absent:
                        //Log(string.Format("Migrating feature {1} of Package {0} - marking as Absent", existingPackageId, currentInstallFeature.FeatureName));
                        _featureStates[currentInstallFeature.FeatureName] = Wix.FeatureState.Absent;
                        break;
                    default:
                        //Log(string.Format("Migrating feature {1} of Package {0} - marking as Unknown", existingPackageId, currentInstallFeature.FeatureName));
                        _featureStates[currentInstallFeature.FeatureName] = Wix.FeatureState.Unknown;
                        break;
                }
            }
        }
    }
}

答案 8 :(得分:3)

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

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

答案 9 :(得分:0)

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

调试JavaScript
  1. 使用console.log()在浏览器中打印出值 安慰。 (这有助于您了解某些点的值 你的代码)

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

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

答案 10 :(得分:0)

如果您只是想杀死并停止javascript代码,我不建议使用debugger;,因为debugger;只会暂时冻结您的javascript代码而不是永久停止它。

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

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

答案 11 :(得分:-1)

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

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