如何在标准/原生 JavaScript 函数中设置断点？答案

【问题标题】：How to set a breakpoint in standard/native JavaScript functions?如何在标准/原生 JavaScript 函数中设置断点？
【发布时间】：2017-10-23 05:08:08
【问题描述】：

我可以在标准 JavaScript 函数上设置断点吗？例如，我可以在每次调用context.beginPath() 时暂停调试器吗？还是每次调用String.replace()？

更新：我所说的标准 JavaScript 函数是指 JavaScript 引擎中内置的函数。

【问题讨论】：

这可能没什么用，但你可以看看developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

标签： javascript javascript-debugger

【解决方案1】：

是的，您可以通过执行以下两个步骤来覆盖原始功能：

复制（真正参考）原始函数：

mylog = console.log;

用插入debugger 语句的副本覆盖原件：

console.log = function(){
    debugger;
    mylog.apply(this, arguments);
}

现在当调用console.log 时将执行断点。（请注意，您必须根据要覆盖的函数以不同的方式处理不同的函数参数）

这里是另一个使用实例方法的例子，例如String.prototype.replace：

let originalFunction = String.prototype.replace;
String.prototype.replace = function(...args) {
    debugger;
    return originalFunction.call(this, ...args);
}

console.log('foo bar baz'.replace('bar', 'BAR'));

【讨论】：

好点。我假设我也可以对实例方法做同样的事情，例如String.replace()

【解决方案2】：

您在寻找调试器语句吗？

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/debugger

【讨论】：

对不起，我的意思是我怎样才能破解内置的 JavaScript 函数？

【解决方案3】：

设置断点和调试代码的方法有 3 种。

1. Chrome 开发工具/Firebug：

使用 Chrome 开发者工具或 firebug 来定位 JavaScript，然后用鼠标设置断点。在 chrome 中，你应该先打开(ctrl+shirt+I)打开开发者工具。

选择脚本选项卡或单击 (ctrl+P) 打开所需的文件。

搜索要设置断点的行并设置断点。

下次在浏览器中执行代码时，断点被解雇。在观看部分，你可能会看到每一个表情，所有范围内的变量，以及调用堆栈。

2。调试器

使用调试器语句，它每次都会触发，并且在它出现时会有所帮助很难找到代码的执行。

debugger;

3. Webstorm IDE / Visual Studio 代码

Webstorm IDE/Visual Studio Code 具有调试代码的功能 IDE。

Javascript 是一种非常灵活的语言，可能会遵循覆盖现有 javascript 和调试方法的方式，然后请使用以下调试方式。

var fnSetAttribute = Element.prototype.setAttribute; 
Element.prototype.setAttribute = function(name, value) {
    if (name == 'clone') {
        debugger; /* break if script sets the 'clone' attribute */
    }
    fnSetAttribute.call(this,name,value); /* call original function to
    ensure those other attributes are set correctly */
};

【讨论】：