如何设置标准/本地JavaScript函数的断点？

Question

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

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

- kiewic

---

{btsdaf} - brk

Answer 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'));

- Nick stands with Ukraine

---

好的观点。我认为我也可以用实例方法做同样的事情，比如String.replace()。 - kiewic

Answer 2

你正在寻找调试器语句吗？

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

- SeldonSeen

---

对不起，我的意思是如何在内置的JavaScript函数中打断执行？ - kiewic

Answer 3

有三种方法可以设置断点并调试代码。

1. Chrome开发者工具/Firebug：

使用Chrome开发者工具或Firebug定位JavaScript的行，然后用鼠标设置断点。在Chrome中，您应该首先打开（ctrl+shirt+I）以打开开发者工具。

选择脚本选项卡或单击（ctrl+P）以打开所需文件。

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

每次在浏览器中执行代码时，都会触发断点。在监视部分，您可以看到每个表达式、所有作用域内的变量和调用堆栈。

2. 调试器

使用调试器语句，它每次都会触发，当难以找到代码执行时，它很有帮助。

debugger;

3. Webstorm IDE / Visual Studio Code

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 */
};

如需更多参考，请查看https://alistapart.com/article/advanced-debugging-with-javascript

- Dipak

Answer 4

在 Google Chrome 控制台中可用：

debug(console.log) // sets a breakpoint on "console.log" builtin
console.log("Hello")

它显示源代码窗格并显示：

已暂停在调试函数上

- Hugh Allen