1450409 - DOM elements in console, display their current value than the value they had while printing them.

Status: RESOLVED DUPLICATE of bug 754861

(DevTools :: Console, defect)

Description

[123survesh]

User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:59.0) Gecko/20100101 Firefox/59.0
Build ID: 20180316021607

Steps to reproduce:

(1)console.log(ANY DOM element);
    - check your output
(2)Make some changes to that DOM element, say add a class
    - check output of step1
(3)console.log(The DOM element from step 1)
   - compare outputs of step1 and step3

Try this code in your firefox console:
console.log(document.querySelector("div"));
document.querySelector("div").classList.add("classA");
console.log(document.querySelector("div"));


Actual results:

The outputs from step1 and step3 are the same. The DOM element printed in the console is updating its state/data, every time any change is being done to that DOM element.
It's hard to test that DOM element if it changes its state with respect to time in a log.


Expected results:

The outputs from step1 and step3 must depict the data in the DOM before and after the change respectively.
Say if the DOM element has no class named, "classA". 
I console.log it and now add the class "classA" to it and console.log it, there must be a difference between the two console.log outputs.

Comment 1

[Justin [:JW_SoftvisionQA]]

I can reproduce this issue. Placing in the correct component so the right team can look at this.

Comment 2

[Brian Grinstead [:bgrins]]

Thanks for reporting the issue. When I run this in the console:
 
  console.log(document.querySelector("div"));
  document.querySelector("div").classList.add("classA");
  console.log(document.querySelector("div"));

I see the following output (as you expect):

  <div id="root">
  <div id="root" class="classA">

However, if I then close and re-open the console then I see:

  <div id="root" class="classA">
  <div id="root" class="classA">

Note the same thing happens if the console.log statements happen in a page's script when the console was closed. I agree it's not good, but it happens because we don't store a deep clone of objects every time they get logged. The same happens with plain objects as well. This is Bug 754861 - there's more discussion there about the problem and potential solutions, so I'm going to duplicate this one to it.