This question already has answers here:
Weird behavior with objects & console.log [duplicate]
(2 answers)
Closed 2 years ago.
If i run the following code on chrome or firefox directly into the console, on the first log the value of value2 is 0 in the inlined representation, but if I expand the representation to check the whole object, it is showed as 17. Is this a multi browser bug or I am missing something with javascript here? The reason I am asking this question here is because this behaviour is happening across different browsers, which makes me think there is some kind of catch on the language or the function that I am not aware of.
Actual code:
action = new Object();
action.value1 = 17;
action.value2 = 0;
console.log(action);
action.value2 = action.value1;
console.log(action);
Tested on MacOS Catalina with the latest version of both browsers.
EDIT-----------------
The problem is the first console.log prints value2 being 0 but when I expand the object details it is showed as 17. I attached a print to clarify the question.
PRINT OF THE CONSOLE RESULTS
I would expect the result to be 0 on the value2 of the first output even with the expanded view.
console.log has different inner working between chrome, firefox, nodejs, and other javascript engine.
In your screenshot, the browser does 2 things:
prints the short preview of the action object
prints the expandable reference of the action object
The short preview is a readable version snapshot of the object at the time console.log is called
The expendable reference only prints an expand icon at the time console.log is called.
When expanded, chrome will fetch the CURRENT value the object referenced by that expendable reference and print it. It doesn't print the value when console.log is called
Since the value when the console.log is called ({value1: 17, value2: 0}), and the current value ({value1: 17, value2: 17}) is different, it prints different thing.
Related
From the following code:
let n = 1234.567;
console.log(Object.getOwnPropertyNames(Number.prototype));
console.log(Object.getPrototypeOf(n));
console.log(Object.getPrototypeOf(5));
The first console.log prints the properties, but the second and third line just print {}. Why is this so? Is there a name to directly inspect the variable or number without having to refer to the base type, such as Number.prototype ?
The second and third line only appear to print empty objects due to how the Stack Snippet console operates - the actual browser console of Chrome, Firefox, Safari, or whatever browser you wish will be much more informative. When debugging things and logging objects, if you want the most informative interface, use the actual browser console.
Both of those lines really do point to Number.prototype:
console.log(
Object.getPrototypeOf(5) === Number.prototype
);
This question already has answers here:
console.log() shows the changed value of a variable before the value actually changes
(7 answers)
Closed 3 years ago.
I am sort of new to Javascript and wanting to clear something up, I have read something about Hoisting and feel this might be the reason and answer to my question but why does the log, log out the last assignment to my constant ?
const people = [
{
name: "Roger",
age: 29,
role: "Secret Agent"
},
{
name: "Jamie",
age: 35,
role: "Secret Agent"
}
]
console.log("people", people);
people[0].name = 'bob';
console.log("people", people);
Both results display bob and not Roger then Bob.
It would be great if somebody could explain why this happens.
This is an implementation quirk. Chrome (V8) and Firefox (SpiderMonkey) will resolve to the object at the time you expand the object in the console. Behind the scenes, the value might have changed. WebKit (Safari) will log it as it is. If you want to capture the object as it is at a certain point in time, use console.log(JSON.parse(JSON.stringify(obj)));
[1] https://developer.mozilla.org/en-US/docs/Web/API/Console/log#Logging_objects
P.S Javascript is littered with these kinds of quirks. Not to discourage you, but what should be is quite frequently not what it is. This example also draws close parallels to asynchronous programming in javascript which can be jarring to those coming from procedural backgrounds. To oversimplify, your value will change behind the scenes before you reach the next line and thus it's a good idea to understand the event loop, callbacks and subsequently promises and async/await.
Please look at this question: console.log() shows the changed value of a variable before the value actually changes. This is a bug that only happens with console.log. Unless you are relying on console logging for what you are trying to create, this shouldn't be a problem.
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));
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));
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));