{"id":34537,"date":"2023-03-22T12:40:31","date_gmt":"2023-03-22T07:10:31","guid":{"rendered":"https:\/\/jassweb.com\/solved\/solved-console-log-shows-the-changed-value-of-a-variable-before-the-value-actually-changes\/"},"modified":"2023-03-22T12:40:31","modified_gmt":"2023-03-22T07:10:31","slug":"solved-console-log-shows-the-changed-value-of-a-variable-before-the-value-actually-changes","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-console-log-shows-the-changed-value-of-a-variable-before-the-value-actually-changes\/","title":{"rendered":"[Solved] console.log() shows the changed value of a variable before the value actually changes"},"content":{"rendered":"

[ad_1]
\n<\/p>\n

\n
\n
<\/div>\n
\n
\n

Pointy’s answer has good information, but it’s not the correct answer for this question.<\/p>\n

The behavior described by the OP is part of a bug that was first reported in March 2010, patched for Webkit in August 2012, but as of this writing is not yet integrated into Google Chrome. The behavior hinges upon whether or not the console debug window is open<\/strong> or closed<\/strong> at the time the object literal is passed to console.log()<\/code>.<\/p>\n

Excerpts from the original bug report (https:\/\/bugs.webkit.org\/show_bug.cgi?id=35801<\/a>):<\/p>\n

\n

Description From mitch kramer 2010-03-05 11:37:45 PST<\/p>\n

1) create an object literal with one or more properties<\/p>\n

2) console.log that object but leave it closed (don’t expand it in the console)<\/p>\n

3) change one of the properties to a new value<\/p>\n

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.<\/p>\n

I should point out that if you open it, it will retain the correct value if that wasn’t clear.<\/p>\n<\/blockquote>\n

Response from a Chromium developer:<\/p>\n

\n

Comment #2 From Pavel Feldman 2010-03-09 06:33:36 PST <\/p>\n

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.<\/p>\n

We should make sure existing behavior is expected though.<\/p>\n<\/blockquote>\n

Much complaining ensued and eventually it led to a bug fix.<\/p>\n

Changelog notes from the patch implemented in August 2012 (http:\/\/trac.webkit.org\/changeset\/125174<\/a>):<\/p>\n

\n

As of today, dumping an object (array) into console will result in objects’ properties being
\n read upon console object expansion (i.e. lazily). This means that dumping the same object while
\n mutating it will be hard to debug using the console.<\/p>\n

This change starts generating abbreviated previews for objects \/ arrays at the moment of their
\n logging and passes this information along into the front-end. This only happens when the front-end
\n is already opened, it only works for console.log(), not live console interaction.<\/p>\n<\/blockquote><\/div>\n

<\/div>\n<\/div>\n

5<\/span> <\/p><\/div>\n<\/div>\n

[ad_2]<\/p>\n

solved console.log() shows the changed value of a variable before the value actually changes <\/p>\n","protected":false},"excerpt":{"rendered":"

[ad_1] Pointy’s answer has good information, but it’s not the correct answer for this question. The behavior described by the OP is part of a bug that was first reported in March 2010, patched for Webkit in August 2012, but as of this writing is not yet integrated into Google Chrome. The behavior hinges upon … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[320],"tags":[864,333,366],"class_list":["post-34537","post","type-post","status-publish","format-standard","hentry","category-solved","tag-google-chrome","tag-javascript","tag-variables"],"yoast_head":"\n[Solved] console.log() shows the changed value of a variable before the value actually changes - JassWeb<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jassweb.com\/solved\/solved-console-log-shows-the-changed-value-of-a-variable-before-the-value-actually-changes\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Solved] console.log() shows the changed value of a variable before the value actually changes - JassWeb\" \/>\n<meta property=\"og:description\" content=\"[ad_1] Pointy’s answer has good information, but it’s not the correct answer for this question. The behavior described by the OP is part of a bug that was first reported in March 2010, patched for Webkit in August 2012, but as of this writing is not yet integrated into Google Chrome. The behavior hinges upon ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jassweb.com\/solved\/solved-console-log-shows-the-changed-value-of-a-variable-before-the-value-actually-changes\/\" \/>\n<meta property=\"og:site_name\" content=\"JassWeb\" \/>\n<meta property=\"article:published_time\" content=\"2023-03-22T07:10:31+00:00\" \/>\n<meta name=\"author\" content=\"Kirat\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kirat\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-console-log-shows-the-changed-value-of-a-variable-before-the-value-actually-changes\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-console-log-shows-the-changed-value-of-a-variable-before-the-value-actually-changes\\\/\"},\"author\":{\"name\":\"Kirat\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#\\\/schema\\\/person\\\/65c9c7b7958150c0dc8371fa35dd7c31\"},\"headline\":\"[Solved] console.log() shows the changed value of a variable before the value actually changes\",\"datePublished\":\"2023-03-22T07:10:31+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-console-log-shows-the-changed-value-of-a-variable-before-the-value-actually-changes\\\/\"},\"wordCount\":379,\"publisher\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#organization\"},\"keywords\":[\"google-chrome\",\"javascript\",\"variables\"],\"articleSection\":[\"Solved\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-console-log-shows-the-changed-value-of-a-variable-before-the-value-actually-changes\\\/\",\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-console-log-shows-the-changed-value-of-a-variable-before-the-value-actually-changes\\\/\",\"name\":\"[Solved] console.log() shows the changed value of a variable before the value actually changes - JassWeb\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#website\"},\"datePublished\":\"2023-03-22T07:10:31+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-console-log-shows-the-changed-value-of-a-variable-before-the-value-actually-changes\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-console-log-shows-the-changed-value-of-a-variable-before-the-value-actually-changes\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-console-log-shows-the-changed-value-of-a-variable-before-the-value-actually-changes\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Solved] console.log() shows the changed value of a variable before the value actually changes\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#website\",\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/\",\"name\":\"JassWeb\",\"description\":\"Build High-quality Websites\",\"publisher\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#organization\",\"name\":\"Jass Web\",\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/jassweb.com\\\/wp-content\\\/uploads\\\/2021\\\/02\\\/jass-website-logo-1.png\",\"contentUrl\":\"https:\\\/\\\/jassweb.com\\\/wp-content\\\/uploads\\\/2021\\\/02\\\/jass-website-logo-1.png\",\"width\":693,\"height\":132,\"caption\":\"Jass Web\"},\"image\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#\\\/schema\\\/person\\\/65c9c7b7958150c0dc8371fa35dd7c31\",\"name\":\"Kirat\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/wp-content\\\/litespeed\\\/avatar\\\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400\",\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/wp-content\\\/litespeed\\\/avatar\\\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400\",\"contentUrl\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/wp-content\\\/litespeed\\\/avatar\\\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400\",\"caption\":\"Kirat\"},\"sameAs\":[\"http:\\\/\\\/jassweb.com\"],\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/author\\\/jaspritsinghghumangmail-com\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[Solved] console.log() shows the changed value of a variable before the value actually changes - JassWeb","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/jassweb.com\/solved\/solved-console-log-shows-the-changed-value-of-a-variable-before-the-value-actually-changes\/","og_locale":"en_US","og_type":"article","og_title":"[Solved] console.log() shows the changed value of a variable before the value actually changes - JassWeb","og_description":"[ad_1] Pointy’s answer has good information, but it’s not the correct answer for this question. The behavior described by the OP is part of a bug that was first reported in March 2010, patched for Webkit in August 2012, but as of this writing is not yet integrated into Google Chrome. The behavior hinges upon ... Read more","og_url":"https:\/\/jassweb.com\/solved\/solved-console-log-shows-the-changed-value-of-a-variable-before-the-value-actually-changes\/","og_site_name":"JassWeb","article_published_time":"2023-03-22T07:10:31+00:00","author":"Kirat","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kirat","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jassweb.com\/solved\/solved-console-log-shows-the-changed-value-of-a-variable-before-the-value-actually-changes\/#article","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/solved-console-log-shows-the-changed-value-of-a-variable-before-the-value-actually-changes\/"},"author":{"name":"Kirat","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31"},"headline":"[Solved] console.log() shows the changed value of a variable before the value actually changes","datePublished":"2023-03-22T07:10:31+00:00","mainEntityOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-console-log-shows-the-changed-value-of-a-variable-before-the-value-actually-changes\/"},"wordCount":379,"publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"keywords":["google-chrome","javascript","variables"],"articleSection":["Solved"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/jassweb.com\/solved\/solved-console-log-shows-the-changed-value-of-a-variable-before-the-value-actually-changes\/","url":"https:\/\/jassweb.com\/solved\/solved-console-log-shows-the-changed-value-of-a-variable-before-the-value-actually-changes\/","name":"[Solved] console.log() shows the changed value of a variable before the value actually changes - JassWeb","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/#website"},"datePublished":"2023-03-22T07:10:31+00:00","breadcrumb":{"@id":"https:\/\/jassweb.com\/solved\/solved-console-log-shows-the-changed-value-of-a-variable-before-the-value-actually-changes\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jassweb.com\/solved\/solved-console-log-shows-the-changed-value-of-a-variable-before-the-value-actually-changes\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jassweb.com\/solved\/solved-console-log-shows-the-changed-value-of-a-variable-before-the-value-actually-changes\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jassweb.com\/solved\/"},{"@type":"ListItem","position":2,"name":"[Solved] console.log() shows the changed value of a variable before the value actually changes"}]},{"@type":"WebSite","@id":"https:\/\/jassweb.com\/solved\/#website","url":"https:\/\/jassweb.com\/solved\/","name":"JassWeb","description":"Build High-quality Websites","publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jassweb.com\/solved\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jassweb.com\/solved\/#organization","name":"Jass Web","url":"https:\/\/jassweb.com\/solved\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/","url":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","contentUrl":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","width":693,"height":132,"caption":"Jass Web"},"image":{"@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31","name":"Kirat","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400","url":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400","caption":"Kirat"},"sameAs":["http:\/\/jassweb.com"],"url":"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/"}]}},"_links":{"self":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/34537","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/comments?post=34537"}],"version-history":[{"count":0,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/34537\/revisions"}],"wp:attachment":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/media?parent=34537"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/categories?post=34537"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/tags?post=34537"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}