Develop Reference

Object property value changes before code exectuion [duplicate]

I was helping a colleague debug some code today and I noticed a strange behavior with console.log() in Google Chrome:
It appears that if you:
Create a nested array (e.g., [[345,"test"]])
Log the array to the console with console.log().
Modify one of the inner array values, then console.log() will output the later value -- not the values of the array at the time the console.log() was executed.
JavaScript:
var test = [[2345235345,"test"]]
console.log(test);
test[0][0] = 1111111;
// outputs: [[1111111,"test"]]
var testb = {};
testb.test = "test";
console.log(testb);
testb.test = "sdfgsdfg";
// outputs: {"testb":"test"}
var testc = ["test","test2"];
console.log(testc);
testc[0] = "sdxfsdf";
// outputs: ["test","test2"]
JSFiddle Example
This behavior does not happen in Firefox.
Also to note, if I stepped through his code line by line in the Chrome debugger, then console.log() would output the correct values.
Is there an explanation for this strange phenomenon or is it just a bug with Google Chrome?
EDIT:
I've narrowed down the steps to reproduce the inconsistent console.log() behavior:
If you add this script to your page:
var greetings=['hi','bye'];
console.log(greetings);
setTimeout(function(){
greetings.push('goodbye');
},3000);
and open it in a new window with the Chrome console window already open, then the console.log() output will be different than if you load the page with the console window closed. Here's a JSFiddle that demonstrates that.
In the first case, with the console window already open, console.log() will output the current value of the array (i.e., two items).
In the second case, with the console window initially closed and opened only after the page loads, console.log() will output the later values of the array (i.e., three items).
Is this a bug in Google Chrome's console.log() functionality?

After a lot of digging, I found that this has been reported as a bug, fixed in Webkit, but apparently not yet pulled into Google Chrome.
As far as I can tell, the issue was originally reported here: https://bugs.webkit.org/show_bug.cgi?id=35801 :
Description From mitch kramer 2010-03-05 11:37:45 PST
1) create an object literal with one or more properties
2) console.log that object but leave it closed (don't expand it in the console)
3) change one of the properties to a new value
now open that console.log and you'll see it has the new value for some reason, even though it's value was different at the time it was generated.
I should point out that if you open it, it will retain the correct value if that wasn't clear.
Response from a Chromium developer:
Comment #2 From Pavel Feldman 2010-03-09 06:33:36 PST
I don't think we are ever going to fix this one. We can't clone object upon dumping it into the console and we also can't listen to the object properties' changes in order to make it always actual.
We should make sure existing behavior is expected though.
A fix was implemented two and a half years later on August 9th, 2012 for Webkit ( http://trac.webkit.org/changeset/125174 ), but it does not appear to have made it into Chrome yet.
As of today, dumping an object (array) into console will result in objects' properties being
read upon console object expansion (i.e. lazily). This means that dumping the same object while
mutating it will be hard to debug using the console.
This change starts generating abbreviated previews for objects / arrays at the moment of their
logging and passes this information along into the front-end. This only happens when the front-end
is already opened, it only works for console.log(), not live console interaction.

I found a workaround for this bug/feature.
console.log(JSON.parse(JSON.stringify(myObject)));
Edit: Unfortunately this won't work for non-primitive values like functions. Use another clone utility here.
jQuery example:
console.log($.extend({}, myObject));

Window object containing variable property before declaration (with value) [duplicate]

I was helping a colleague debug some code today and I noticed a strange behavior with console.log() in Google Chrome:
It appears that if you:
Create a nested array (e.g., [[345,"test"]])
Log the array to the console with console.log().
Modify one of the inner array values, then console.log() will output the later value -- not the values of the array at the time the console.log() was executed.
JavaScript:
var test = [[2345235345,"test"]]
console.log(test);
test[0][0] = 1111111;
// outputs: [[1111111,"test"]]
var testb = {};
testb.test = "test";
console.log(testb);
testb.test = "sdfgsdfg";
// outputs: {"testb":"test"}
var testc = ["test","test2"];
console.log(testc);
testc[0] = "sdxfsdf";
// outputs: ["test","test2"]
JSFiddle Example
This behavior does not happen in Firefox.
Also to note, if I stepped through his code line by line in the Chrome debugger, then console.log() would output the correct values.
Is there an explanation for this strange phenomenon or is it just a bug with Google Chrome?
EDIT:
I've narrowed down the steps to reproduce the inconsistent console.log() behavior:
If you add this script to your page:
var greetings=['hi','bye'];
console.log(greetings);
setTimeout(function(){
greetings.push('goodbye');
},3000);
and open it in a new window with the Chrome console window already open, then the console.log() output will be different than if you load the page with the console window closed. Here's a JSFiddle that demonstrates that.
In the first case, with the console window already open, console.log() will output the current value of the array (i.e., two items).
In the second case, with the console window initially closed and opened only after the page loads, console.log() will output the later values of the array (i.e., three items).
Is this a bug in Google Chrome's console.log() functionality?

After a lot of digging, I found that this has been reported as a bug, fixed in Webkit, but apparently not yet pulled into Google Chrome.
As far as I can tell, the issue was originally reported here: https://bugs.webkit.org/show_bug.cgi?id=35801 :
Description From mitch kramer 2010-03-05 11:37:45 PST
1) create an object literal with one or more properties
2) console.log that object but leave it closed (don't expand it in the console)
3) change one of the properties to a new value
now open that console.log and you'll see it has the new value for some reason, even though it's value was different at the time it was generated.
I should point out that if you open it, it will retain the correct value if that wasn't clear.
Response from a Chromium developer:
Comment #2 From Pavel Feldman 2010-03-09 06:33:36 PST
I don't think we are ever going to fix this one. We can't clone object upon dumping it into the console and we also can't listen to the object properties' changes in order to make it always actual.
We should make sure existing behavior is expected though.
A fix was implemented two and a half years later on August 9th, 2012 for Webkit ( http://trac.webkit.org/changeset/125174 ), but it does not appear to have made it into Chrome yet.
As of today, dumping an object (array) into console will result in objects' properties being
read upon console object expansion (i.e. lazily). This means that dumping the same object while
mutating it will be hard to debug using the console.
This change starts generating abbreviated previews for objects / arrays at the moment of their
logging and passes this information along into the front-end. This only happens when the front-end
is already opened, it only works for console.log(), not live console interaction.

I found a workaround for this bug/feature.
console.log(JSON.parse(JSON.stringify(myObject)));
Edit: Unfortunately this won't work for non-primitive values like functions. Use another clone utility here.
jQuery example:
console.log($.extend({}, myObject));

How to use chrome's debugger to locate a specific function? [duplicate]

Chrome's Developer Tools rock, but one thing they don't seem to have (that I could find) is a way to find a JavaScript function's definition. This would be super handy for me because I'm working on a site that includes many external JS files. Sure grep solves this but in the browser would be much better. I mean, the browser has to know this, so why not expose it? What I expected was something like:
Select 'Inspect Element' from page, which highlights the line in the Elements tab
Right-click the line and select 'Go to function definition'
Correct script is loaded in the Scripts tab and it jumps to the function definition
First off, does this functionality exist and I'm just missing it?
And if it doesn't, I'm guessing this would come from WebKit, but couldn't find anything for Developer Tool feature requests or WebKit's Bugzilla.

Lets say we're looking for function named foo:
(open Chrome dev-tools),
Windows: ctrl + shift + F, or macOS:
cmd + optn + F. This opens a window for searching across all scripts.
check "Regular expression" checkbox,
search for foo\s*=\s*function (searches for foo = function with any number of spaces between those three tokens),
press on a returned result.
Another variant for function definition is function\s*foo\s*\( for function foo( with any number of spaces between those three tokens.

This landed in Chrome on 2012-08-26
Not sure about the exact version, I noticed it in Chrome 24.
A screenshot is worth a million words:
I am inspecting an object with methods in the Console. Clicking on the "Show function definition" takes me to the place in the source code where the function is defined. Or I can just hover over the function () { word to see function body in a tooltip. You can easily inspect the whole prototype chain like this! CDT definitely rock!!!
Hope you all find it helpful!

You can print the function by evaluating the name of it in the console, like so
> unknownFunc
function unknownFunc(unknown) {
alert('unknown seems to be ' + unknown);
}
this won't work for built-in functions, they will only display [native code] instead of the source code.
EDIT: this implies that the function has been defined within the current scope.

2016 Update: in Chrome Version 51.0.2704.103
There is a Go to member shortcut (listed in settings > shortcut > Text Editor). Open the file containing your function (in the sources panel of the DevTools) and press:
ctrl + shift + O
or in OS X:
⌘ + shift + O
This enables to list and reach members of the current file.

Another way to navigate to the location of a function definition would be to break in debugger somewhere you can access the function and enter the functions fully qualified name in the console. This will print the function definition in the console and give a link which on click opens the script location where the function is defined.

Different browsers do this differently.
First open console window by right clicking on the page and selecting "Inspect Element", or by hitting F12.
In the console, type...
Firefox
functionName.toSource()
Chrome
functionName

in Chrome console:
debug(MyFunction)
MyFunction()

I find the quickest way to locate a global function is simply:
Select Sources tab.
In the Watch pane click + and type window
Your global function references are listed first, alphabetically.
Right-click the function you are interested in.
In the popup menu select Show function definition.
The source code pane switches to that function definition.

I had a similar problem finding the source of an object's method. The object name was myTree and its method was load. I put a breakpoint on the line that the method was called. By reloading the page, the execution stopped at that point. Then on the DevTools console, I typed the object along with the method name, i.e. myTree.load and hit Enter. The definition of the method was printed on the console:
Also, by right click on the definition, you can go to its definition in the source code:

In Google chrome, Inspect element tool you can view any Javascript function definition.
Click on the Sources tab. Then select the index page. Search for the
function.
Select the function then Right-click on the function and select
"Evaluate selected text in console."

If you are already debugging, you can hover over the function and the tooltip will allow you to navigate directly to the function definition:
Further Reading:
Chrome DevTools > JavaScript Debugging Reference

You encounter VM defined JS function ,you can try this command in Chrome console panel below.
Like this:
foo function name is window.P.execute
>window.P.execute.toString()
<'function(d,h){function n(){var a=null;e?a=h:"function"===typeof h&&(p.start=w(),a=h.apply(f,wa(d,k,l)),p.end=w());if(b){H[d]=a;a=d;for(da[a]=!0;(z[a]||[]).length;)z[a].shift()();delete z[a]}p.done=!0}var k=g||this;"function"===typeof d&&(h=d,d=E);b&&(d=d?d.replace(ha,""):"__NONAME__",V.hasOwnProperty(d)&&k.error(q(", reregistered by ",q(" by ",d+" already registered",V[d]),k.attribution),d),V[d]=k.attribution);for(var l=[],m=0;m<a.length;m++)l[m]=\na[m].replace(ha,"");var p=B[d||"anon"+ ++xa]={depend:l,registered:w(),namespace:k.namespace};d&&ya.hasOwnProperty(d);c?n():ua(l,k.guardFatal(d,n),d);return{decorate:function(a){U[d]=k.guardFatal(d,a)}}}'
so we got full function code.

Google Chrome console.log() inconsistency with objects and arrays

I was helping a colleague debug some code today and I noticed a strange behavior with console.log() in Google Chrome:
It appears that if you:
Create a nested array (e.g., [[345,"test"]])
Log the array to the console with console.log().
Modify one of the inner array values, then console.log() will output the later value -- not the values of the array at the time the console.log() was executed.
JavaScript:
var test = [[2345235345,"test"]]
console.log(test);
test[0][0] = 1111111;
// outputs: [[1111111,"test"]]
var testb = {};
testb.test = "test";
console.log(testb);
testb.test = "sdfgsdfg";
// outputs: {"testb":"test"}
var testc = ["test","test2"];
console.log(testc);
testc[0] = "sdxfsdf";
// outputs: ["test","test2"]
JSFiddle Example
This behavior does not happen in Firefox.
Also to note, if I stepped through his code line by line in the Chrome debugger, then console.log() would output the correct values.
Is there an explanation for this strange phenomenon or is it just a bug with Google Chrome?
EDIT:
I've narrowed down the steps to reproduce the inconsistent console.log() behavior:
If you add this script to your page:
var greetings=['hi','bye'];
console.log(greetings);
setTimeout(function(){
greetings.push('goodbye');
},3000);
and open it in a new window with the Chrome console window already open, then the console.log() output will be different than if you load the page with the console window closed. Here's a JSFiddle that demonstrates that.
In the first case, with the console window already open, console.log() will output the current value of the array (i.e., two items).
In the second case, with the console window initially closed and opened only after the page loads, console.log() will output the later values of the array (i.e., three items).
Is this a bug in Google Chrome's console.log() functionality?

After a lot of digging, I found that this has been reported as a bug, fixed in Webkit, but apparently not yet pulled into Google Chrome.
As far as I can tell, the issue was originally reported here: https://bugs.webkit.org/show_bug.cgi?id=35801 :
Description From mitch kramer 2010-03-05 11:37:45 PST
1) create an object literal with one or more properties
2) console.log that object but leave it closed (don't expand it in the console)
3) change one of the properties to a new value
now open that console.log and you'll see it has the new value for some reason, even though it's value was different at the time it was generated.
I should point out that if you open it, it will retain the correct value if that wasn't clear.
Response from a Chromium developer:
Comment #2 From Pavel Feldman 2010-03-09 06:33:36 PST
I don't think we are ever going to fix this one. We can't clone object upon dumping it into the console and we also can't listen to the object properties' changes in order to make it always actual.
We should make sure existing behavior is expected though.
A fix was implemented two and a half years later on August 9th, 2012 for Webkit ( http://trac.webkit.org/changeset/125174 ), but it does not appear to have made it into Chrome yet.
As of today, dumping an object (array) into console will result in objects' properties being
read upon console object expansion (i.e. lazily). This means that dumping the same object while
mutating it will be hard to debug using the console.
This change starts generating abbreviated previews for objects / arrays at the moment of their
logging and passes this information along into the front-end. This only happens when the front-end
is already opened, it only works for console.log(), not live console interaction.

I found a workaround for this bug/feature.
console.log(JSON.parse(JSON.stringify(myObject)));
Edit: Unfortunately this won't work for non-primitive values like functions. Use another clone utility here.
jQuery example:
console.log($.extend({}, myObject));

Find JavaScript function definition in Chrome

Chrome's Developer Tools rock, but one thing they don't seem to have (that I could find) is a way to find a JavaScript function's definition. This would be super handy for me because I'm working on a site that includes many external JS files. Sure grep solves this but in the browser would be much better. I mean, the browser has to know this, so why not expose it? What I expected was something like:
Select 'Inspect Element' from page, which highlights the line in the Elements tab
Right-click the line and select 'Go to function definition'
Correct script is loaded in the Scripts tab and it jumps to the function definition
First off, does this functionality exist and I'm just missing it?
And if it doesn't, I'm guessing this would come from WebKit, but couldn't find anything for Developer Tool feature requests or WebKit's Bugzilla.

Lets say we're looking for function named foo:
(open Chrome dev-tools),
Windows: ctrl + shift + F, or macOS:
cmd + optn + F. This opens a window for searching across all scripts.
check "Regular expression" checkbox,
search for foo\s*=\s*function (searches for foo = function with any number of spaces between those three tokens),
press on a returned result.
Another variant for function definition is function\s*foo\s*\( for function foo( with any number of spaces between those three tokens.

This landed in Chrome on 2012-08-26
Not sure about the exact version, I noticed it in Chrome 24.
A screenshot is worth a million words:
I am inspecting an object with methods in the Console. Clicking on the "Show function definition" takes me to the place in the source code where the function is defined. Or I can just hover over the function () { word to see function body in a tooltip. You can easily inspect the whole prototype chain like this! CDT definitely rock!!!
Hope you all find it helpful!

You can print the function by evaluating the name of it in the console, like so
> unknownFunc
function unknownFunc(unknown) {
alert('unknown seems to be ' + unknown);
}
this won't work for built-in functions, they will only display [native code] instead of the source code.
EDIT: this implies that the function has been defined within the current scope.

2016 Update: in Chrome Version 51.0.2704.103
There is a Go to member shortcut (listed in settings > shortcut > Text Editor). Open the file containing your function (in the sources panel of the DevTools) and press:
ctrl + shift + O
or in OS X:
⌘ + shift + O
This enables to list and reach members of the current file.

Another way to navigate to the location of a function definition would be to break in debugger somewhere you can access the function and enter the functions fully qualified name in the console. This will print the function definition in the console and give a link which on click opens the script location where the function is defined.

Different browsers do this differently.
First open console window by right clicking on the page and selecting "Inspect Element", or by hitting F12.
In the console, type...
Firefox
functionName.toSource()
Chrome
functionName

in Chrome console:
debug(MyFunction)
MyFunction()

I find the quickest way to locate a global function is simply:
Select Sources tab.
In the Watch pane click + and type window
Your global function references are listed first, alphabetically.
Right-click the function you are interested in.
In the popup menu select Show function definition.
The source code pane switches to that function definition.

I had a similar problem finding the source of an object's method. The object name was myTree and its method was load. I put a breakpoint on the line that the method was called. By reloading the page, the execution stopped at that point. Then on the DevTools console, I typed the object along with the method name, i.e. myTree.load and hit Enter. The definition of the method was printed on the console:
Also, by right click on the definition, you can go to its definition in the source code:

In Google chrome, Inspect element tool you can view any Javascript function definition.
Click on the Sources tab. Then select the index page. Search for the
function.
Select the function then Right-click on the function and select
"Evaluate selected text in console."

If you are already debugging, you can hover over the function and the tooltip will allow you to navigate directly to the function definition:
Further Reading:
Chrome DevTools > JavaScript Debugging Reference

You encounter VM defined JS function ,you can try this command in Chrome console panel below.
Like this:
foo function name is window.P.execute
>window.P.execute.toString()
<'function(d,h){function n(){var a=null;e?a=h:"function"===typeof h&&(p.start=w(),a=h.apply(f,wa(d,k,l)),p.end=w());if(b){H[d]=a;a=d;for(da[a]=!0;(z[a]||[]).length;)z[a].shift()();delete z[a]}p.done=!0}var k=g||this;"function"===typeof d&&(h=d,d=E);b&&(d=d?d.replace(ha,""):"__NONAME__",V.hasOwnProperty(d)&&k.error(q(", reregistered by ",q(" by ",d+" already registered",V[d]),k.attribution),d),V[d]=k.attribution);for(var l=[],m=0;m<a.length;m++)l[m]=\na[m].replace(ha,"");var p=B[d||"anon"+ ++xa]={depend:l,registered:w(),namespace:k.namespace};d&&ya.hasOwnProperty(d);c?n():ua(l,k.guardFatal(d,n),d);return{decorate:function(a){U[d]=k.guardFatal(d,a)}}}'
so we got full function code.