We Keep Coding

How to set a breakpoint in standard/native JavaScript functions?

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.

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

Are you looking for the debugger statement?
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/debugger

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

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

Get javascript variables via developer tools

I was wondering if it's possible to get the variables I used in my files via developer tools (in chrome, safari or firefox).
For example, if I have declare a variable 'test-1' in a file 'file-1.js' I want to get that varibale via developer tools.
EDIT
And if it's possible to block it

Use debugger to get the variable value in the console.
Try this:
(function() {
var a = 100;
debugger; //write a in conseole and you will get 100
function test() {
var b = 200;
debugger;
//write b in conseole and you will get 200
}
test();
})()
To resume script execution press f8
To step over next function call press f10

You can set the variable to be watched in the browser debugger. You could also set a breakpoint on the function and then step through the many properties and variables of that function.
Here is how to do it in Fire Fox.
Examine, modify, and watch variables

Unable to reproduce TypeError: 'undefined' is not an object

Google Analytics shows that ~12% of our total users are affected by a Javascript bug of:
TypeError: 'undefined' is not an object
90% of the browsers are Safari 7534.48.3, 10% are Mozilla compatible agent. 75% of the errors come from iPhones, 23% from iPads. 1% from Macintosh, the other 2% is from iPod etc. None of the devices run Linux or Windows.
I have tried enabling debug mode in safari on both an iPhone and iPad but not able to reproduce the bug.
Here is a link to a page Google Analytics claims is showing the error. If anyone can consistently reproduce the error here I will be super happy because just a line number would be enough to get me started debugging.
Can anyone think of any other ways I can try to debug this? Thanks all
For the curious among us I'm using this code to send errors to GA -- Warning: Possible self promotion.
Update: TypeError: 'undefined' is not an object (evaluating 'safari.self.tab.canLoad')
Managed to get that out of it once when clicking around, mostly on an iphone whilst clicking "Change country.."
Update: Solved this by making sure the element was available in the dom. Turns out the ajax call on success was trying to write to an element that wasn't available.
I have kept a solid record of Unable to reproduce TypeError: 'undefined' is not an object here

Undefined
The undefined type has only one value: undefined. It’s the default value that all variables have after a declaration if no value is assigned to them. You can also assign the value undefined to any variable, but in general, this should be avoided, because if we need to mark a variable as not holding any meaningful value, we should use null.
Let declaredVar;
console.log(typeof declaredVar); // -> undefined
declaredVar = 5;
console.log(typeof declaredVar); // -> number
declaredVar = undefined;
console.log(typeof declaredVar); // -> undefined
The undefined value can also be returned by the typeof operator when a non-existent variable is used as an argument.
Console.log(typeof notDeclaredVar); // -> undefined
console.log(notDeclaredVar); // -> Uncaught ReferenceError: notDeclared is not defined

In your functions.js, you have this:
storage_get = function(key) {
var store = (window.SAFARI ? safari.extension.settings : localStorage);
var json = store.getItem(key);
if (json == null)
return undefined;
try {
return JSON.parse(json);
} catch (e) {
log("Couldn't parse json for " + key);
return undefined;
}
}
undefined is NOT a JavaScript keyword. It's a variable that (most of the time) happens to be undefined. You can't use undefined like this. Consider what would happen if you replaced it with pinkelephant, as that is the exact thing that's happening here.

Javascript error : object required

I am calling a javascript function in a button in aspx page like
OnClientClick= "printText(document.getElementById('PrintPayslipPart').innerHTML)"
and function is;
function printText(elem)
{
PrintPaySlip = window.open('RP_PrintPaySlip.html','PrintPaySlip','toolbar=no,menubar=yes,width=1000, Height = 700, resizable=yes,scrollbar=Yes');
PrintPaySlip.document.open();
PrintPaySlip.document.write("<html><head>");
PrintPaySlip.document.write("</head><body onload='print()'>");
PrintPaySlip.document.write(elem);
PrintPaySlip.document.write("</body></html>");
PrintPaySlip.document.close();
}
I am using .net 3.5 and ajaxcontrolltoolkit 3.5.40412.2
When clicking on button the error shows as "Microsoft JScript runtime error: Object required".

My guess is that either
PrintPayslipPart is not a valid id, and so the getElementById returns null.
PrintPaySlip is not a global variable, and your environment doesn't allow it to be
implicitly defined, which could be solved by declaring it local using var
var PrintPaySlip = window.open(...);
The second one seems more likely.
HTH

first thing i will suggest to you is have Firefox with error console installed and then test the site. At least it can help you find what exactly error is instead of "Microsoft JScript runtime error"
Trust me but Firefox + FireBug + Error Console make life much better for Web (JS) developer.

Javascript replace a function with a new one containing dynamic contents

My Javascript knowledge is less experienced, so I might use wrong descriptions in the following.
I have an object in a static .js file:
var Info = {
methodA: function() {
// Call methodB.
this.methodB('test');
},
methodB: function(value) {
// Do stuff
}
}
Now, in an .aspx file, I create a function methodC(value) with varying contents (depending on some data), which I want to insert instead of the above definition of methodB(value):
...
var methodC = function(value) {
// Do different stuff
}
...
My idea has so far been to replace methodB with methodC in the following fashion:
...
Info.methodB = methodC;
...
Using IE's buildin developer tool, I get the following error when calling this.methodB('test'); from Info.methodA():
Object doesn’t support this property
or method
Removing the 'this' from this.methodB('test') results in the error:
Object expected
I don't get any errors using FireBug - probably because I use various frameworks, which might catch the error.
How should I do this or should I use a completely different approach?
Regards, Casper

It should work, you are doing it the right way. The problem lays elsewhere.
update:
This should still work as long as you call methodA on an object, eg Info.methodA().
Maybe you are not understanding the error messages ?
"Object doesn’t support this property or method" means that in the expression "this.methodB()", this doesn't have a property named "methodB". So it means that this is not Info when the code of methodA is executed.
"Object expected" means that the variable methodB is unknown in the current execution context. Of course it is, since methodB is never a variable, only a property of Info.
To debug your problem, you need to know what is this when a code is executed, and why it's not what you think it should be. When you call Info.methodA(), this is set to be Info when methodA begins its execution.