6

Can I set a breakpoint on a standard JavaScript function? For example, can I pause the debugger every time context.beginPath() is called? Or every time that String.replace() is called?

UPDATE: What I meant by standard JavaScript function is functions built-in into the JavaScript engines.

kiewic
  • 15,852
  • 13
  • 78
  • 101
  • This maynot be useful but you can take a look at https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/toSource – brk Oct 23 '17 at 05:25

4 Answers4

12

Yes you can do this by overriding the original functionality by performing the following two steps:

Make a copy(reference really) of the original function:

mylog = console.log;

Override the original with your copy inserting the debugger statement:

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

Now when called console.log will perform a breakpoint. (Note you'll have to handle different function arguments differently depending on the function be overriden)

Here is another example using an instance methods, for example 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'));
kiewic
  • 15,852
  • 13
  • 78
  • 101
Nick is tired
  • 6,860
  • 20
  • 39
  • 51
  • Good point. I assume I can do the same with instance methods too, such as `String.replace()` – kiewic Oct 23 '17 at 05:24
0

Are you looking for the debugger statement?

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

SeldonSeen
  • 49
  • 3
0

There are 3 ways to set up a breakpoint and debug the code.

1. Chrome dev-tools / Firebug:

Using Chrome developer tools or firebug to locate the line of JavaScript, then set the breakpoint with the mouse. In chrome, you should first open(ctrl+shirt+I) to open developer tools.

Select the script tab or click on (ctrl+P) to open then desired file.

Search the line on which you wanted to set a breakpoint and set a breakpoint.

Whenever you execute your code next time in a browser, the breakpoint is fired. In watch section, you may see every expression, all variables in scope, and the call stack too.

2. Debugger

Using debugger statement, it fires every time and it helps when it hard to find the execution of code.

debugger;

3. Webstorm IDE / Visual Studio Code

Webstorm IDE/Visual Studio Code have the facility to debug a code from IDE.

Javascript is a really flexible language and probably following the way to override existing javascript and debug method then please use following a way of debugging.

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

For more reference please review https://alistapart.com/article/advanced-debugging-with-javascript

Dipak
  • 2,248
  • 4
  • 22
  • 55
-1

Works in Google Chrome Console:

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

It shows the Sources pane and says

Paused on debugged function

Hugh Allen
  • 6,509
  • 1
  • 34
  • 44