[{"data":1,"prerenderedAt":382},["ShallowReactive",2],{"/en/articles/object-log":3},{"id":4,"title":5,"body":6,"date":367,"description":368,"extension":369,"head":370,"image":16,"meta":371,"navigation":76,"ogImage":370,"path":372,"readingTime":373,"robots":370,"schemaOrg":370,"seo":374,"sitemap":375,"stem":376,"tags":377,"__hash__":381},"articles_en/en/articles/object-log.md","Why console.log Lies Sometimes",{"type":7,"value":8,"toc":355},"minimark",[9,17,20,23,26,31,34,91,94,97,105,108,118,122,173,176,198,204,208,211,222,225,229,232,237,271,275,294,298,318,322,329,332,335,339,345,348,351],[10,11,12],"p",{},[13,14],"img",{"alt":15,"src":16},"preview","/articles/object-log.jpg",[10,18,19],{},"You log an object.\nEverything looks fine.",[10,21,22],{},"Then you expand it in DevTools… and suddenly the values are different.",[10,24,25],{},"Confusing? Absolutely.",[27,28,30],"h2",{"id":29},"whats-really-happening","What's Really Happening?",[10,32,33],{},"When you do this:",[35,36,41],"pre",{"className":37,"code":38,"language":39,"meta":40,"style":40},"language-js shiki shiki-themes github-light github-dark github-dark","const user = { name: \"John\" };\n\nconsole.log(user);\n","js","",[42,43,44,71,78],"code",{"__ignoreMap":40},[45,46,49,53,57,60,64,68],"span",{"class":47,"line":48},"line",1,[45,50,52],{"class":51},"so5gQ","const",[45,54,56],{"class":55},"suiK_"," user",[45,58,59],{"class":51}," =",[45,61,63],{"class":62},"slsVL"," { name: ",[45,65,67],{"class":66},"sfrk1","\"John\"",[45,69,70],{"class":62}," };\n",[45,72,74],{"class":47,"line":73},2,[45,75,77],{"emptyLinePlaceholder":76},true,"\n",[45,79,81,84,88],{"class":47,"line":80},3,[45,82,83],{"class":62},"console.",[45,85,87],{"class":86},"shcOC","log",[45,89,90],{"class":62},"(user);\n",[10,92,93],{},"You might expect the console to capture a snapshot of the object at that exact moment.",[10,95,96],{},"But it doesn't.",[10,98,99,100,104],{},"Instead, DevTools logs a ",[101,102,103],"strong",{},"reference"," to the object — not a copy of it.",[10,106,107],{},"That means:",[109,110,111,115],"ul",{},[112,113,114],"li",{},"The console is not showing \"what the object was\"",[112,116,117],{},"It is showing \"what the object is now\"",[27,119,121],{"id":120},"a-simple-example","A Simple Example",[35,123,125],{"className":37,"code":124,"language":39,"meta":40,"style":40},"const user = { name: \"John\" };\n\nconsole.log(user);\n\nuser.name = \"Doe\";\n",[42,126,127,141,145,153,158],{"__ignoreMap":40},[45,128,129,131,133,135,137,139],{"class":47,"line":48},[45,130,52],{"class":51},[45,132,56],{"class":55},[45,134,59],{"class":51},[45,136,63],{"class":62},[45,138,67],{"class":66},[45,140,70],{"class":62},[45,142,143],{"class":47,"line":73},[45,144,77],{"emptyLinePlaceholder":76},[45,146,147,149,151],{"class":47,"line":80},[45,148,83],{"class":62},[45,150,87],{"class":86},[45,152,90],{"class":62},[45,154,156],{"class":47,"line":155},4,[45,157,77],{"emptyLinePlaceholder":76},[45,159,161,164,167,170],{"class":47,"line":160},5,[45,162,163],{"class":62},"user.name ",[45,165,166],{"class":51},"=",[45,168,169],{"class":66}," \"Doe\"",[45,171,172],{"class":62},";\n",[10,174,175],{},"Now when you expand the logged object in the console, you may see:",[35,177,179],{"className":37,"code":178,"language":39,"meta":40,"style":40},"{ name: \"Doe\" }\n",[42,180,181],{"__ignoreMap":40},[45,182,183,186,189,192,195],{"class":47,"line":48},[45,184,185],{"class":62},"{ ",[45,187,188],{"class":86},"name",[45,190,191],{"class":62},": ",[45,193,194],{"class":66},"\"Doe\"",[45,196,197],{"class":62}," }\n",[10,199,200,201,203],{},"Even though at the time of logging, the value was ",[42,202,67],{},".",[27,205,207],{"id":206},"why-does-this-happen","Why Does This Happen?",[10,209,210],{},"Because JavaScript objects are:",[109,212,213,216],{},[112,214,215],{},"Stored by reference",[112,217,218,219],{},"Not copied when passed to ",[42,220,221],{},"console.log",[10,223,224],{},"So DevTools keeps a pointer to the original object in memory.\nWhen the object changes later, the console view reflects that change.",[27,226,228],{"id":227},"how-to-log-a-snapshot-instead","How to Log a Snapshot Instead",[10,230,231],{},"If you want to freeze the value at log time:",[233,234,236],"h3",{"id":235},"option-1-json-trick","Option 1: JSON trick",[35,238,240],{"className":37,"code":239,"language":39,"meta":40,"style":40},"console.log(JSON.parse(JSON.stringify(user)));\n",[42,241,242],{"__ignoreMap":40},[45,243,244,246,248,251,254,256,259,261,263,265,268],{"class":47,"line":48},[45,245,83],{"class":62},[45,247,87],{"class":86},[45,249,250],{"class":62},"(",[45,252,253],{"class":55},"JSON",[45,255,203],{"class":62},[45,257,258],{"class":86},"parse",[45,260,250],{"class":62},[45,262,253],{"class":55},[45,264,203],{"class":62},[45,266,267],{"class":86},"stringify",[45,269,270],{"class":62},"(user)));\n",[233,272,274],{"id":273},"option-2-structuredclone-modern","Option 2: structuredClone (modern)",[35,276,278],{"className":37,"code":277,"language":39,"meta":40,"style":40},"console.log(structuredClone(user));\n",[42,279,280],{"__ignoreMap":40},[45,281,282,284,286,288,291],{"class":47,"line":48},[45,283,83],{"class":62},[45,285,87],{"class":86},[45,287,250],{"class":62},[45,289,290],{"class":86},"structuredClone",[45,292,293],{"class":62},"(user));\n",[233,295,297],{"id":296},"option-3-spread-shallow-copy","Option 3: Spread (shallow copy)",[35,299,301],{"className":37,"code":300,"language":39,"meta":40,"style":40},"console.log({ ...user });\n",[42,302,303],{"__ignoreMap":40},[45,304,305,307,309,312,315],{"class":47,"line":48},[45,306,83],{"class":62},[45,308,87],{"class":86},[45,310,311],{"class":62},"({ ",[45,313,314],{"class":51},"...",[45,316,317],{"class":62},"user });\n",[27,319,321],{"id":320},"important-note","Important Note",[10,323,324,325,328],{},"This behaviour only affects how DevTools ",[101,326,327],{},"displays"," objects.",[10,330,331],{},"Your actual code is not broken.",[10,333,334],{},"It is just showing a live view of memory.",[27,336,338],{"id":337},"final-thought","Final Thought",[10,340,341,342,344],{},"Next time you see a \"wrong value\" in ",[42,343,221],{},", don't panic.",[10,346,347],{},"Your code probably isn't broken.",[10,349,350],{},"The object just changed after you logged it.",[352,353,354],"style",{},"html pre.shiki code .so5gQ, html code.shiki .so5gQ{--shiki-light:#D73A49;--shiki-default:#F97583;--shiki-dark:#F97583}html pre.shiki code .suiK_, html code.shiki .suiK_{--shiki-light:#005CC5;--shiki-default:#79B8FF;--shiki-dark:#79B8FF}html pre.shiki code .slsVL, html code.shiki .slsVL{--shiki-light:#24292E;--shiki-default:#E1E4E8;--shiki-dark:#E1E4E8}html pre.shiki code .sfrk1, html code.shiki .sfrk1{--shiki-light:#032F62;--shiki-default:#9ECBFF;--shiki-dark:#9ECBFF}html pre.shiki code .shcOC, html code.shiki .shcOC{--shiki-light:#6F42C1;--shiki-default:#B392F0;--shiki-dark:#B392F0}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":40,"searchDepth":73,"depth":73,"links":356},[357,358,359,360,365,366],{"id":29,"depth":73,"text":30},{"id":120,"depth":73,"text":121},{"id":206,"depth":73,"text":207},{"id":227,"depth":73,"text":228,"children":361},[362,363,364],{"id":235,"depth":80,"text":236},{"id":273,"depth":80,"text":274},{"id":296,"depth":80,"text":297},{"id":320,"depth":73,"text":321},{"id":337,"depth":73,"text":338},"2026/06/26","Why does an object logged in the browser console sometimes show different values when expanded later?","md",null,{},"/en/articles/object-log","2",{"title":5,"description":368},{"loc":372},"en/articles/object-log",[378,379,380],"JavaScript","Debugging","Frontend","je_VzL2LaCfNmRCzgoSwEc14H8rQjoT1T5EIGzQ0R9w",1784925133103]