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

by

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.

More Related Contents:

  1. Is Chrome’s JavaScript console lazy about evaluating objects?
  2. Why does Chrome debugger think closed local variable is undefined?
  3. Suppress Chrome ‘Failed to load resource’ messages in console
  4. How do you launch the JavaScript debugger in Google Chrome?
  5. Colors in JavaScript console
  6. Find out whether Chrome console is open
  7. $ Variable (Dollar Sign) in Chrome?
  8. How to disable JavaScript in Chrome Developer Tools?
  9. Javascript Debugging line by line using Google Chrome
  10. View list of all JavaScript variables in Google Chrome Console
  11. how to set DOM Breakpoints in chrome
  12. What is the source of the double-dollar sign selector query function in Chrome/Firefox?
  13. Restoring console.log()
  14. How to get list of network requests done by HTML
  15. Disable source maps in Chrome DevTools
  16. Access function location programmatically
  17. How to find what code is run by a button or element in Chrome using Developer Tools
  18. Chrome debugging – break on next click event
  19. What does the “System” category of records mean in Chrome Timeline profiling tool?
  20. Programmatically accessing function scope using Chrome DevTools console
  21. Link to chrome:// url from a webpage
  22. Chrome developer tools do not show all JavaScript files any more
  23. Can a website detect when you are using Selenium with chromedriver?
  24. How to launch html using Chrome at “–allow-file-access-from-files” mode?
  25. Uncaught SyntaxError: Unexpected token :
  26. Detecting the onload event of a window opened with window.open
  27. Chrome Extension how to send data from content script to popup.html
  28. Issue with window.close and chrome
  29. Accessing line number in V8 JavaScript (Chrome & Node.js)
  30. Choppy/Laggy scroll event on Chrome and IE

Leave a Comment