0

Try the following code (either with Edge/Chrome or Firefox, but not in the snippet). The console.log() just gives different outputs, why did this happen?

It's really strange to see this.

const para = document.querySelector('p'),
  text = para.childNodes.item(0),
  range = document.createRange()
range.setStart(text, 0)
range.setEnd(text, 1)
const clonedContents = range.cloneContents()
// - Chrome/Edge -
//  string: #docment-fragment
// - Firefox -
// DocumentFragment []
console.log('cloned contents: ', clonedContents)
// - Chrome/Edge -
// a real #docment-fragment
// - Firefox -
// DocumentFragment [ #text ]
console.log('cloned contents: ', range.cloneContents())
inContentsNode = clonedContents.childNodes.item(0)
// without this line, console.log would work as expected
para.after(inContentsNode)
<body>
  <p>a</p>
</body>

The output: Edge/Chrome: enter image description here Firefox: enter image description here

kakakali
  • 159
  • 1
  • 11
  • Different browser engine implementations. Chromium/Gecko – cSharp Apr 05 '23 at 05:24
  • It's just different consoles representing the same data but differently. There is no standard for what a console should show - it's implementation dependent. Is it a problem that you see the same thing in each but it's presented in a different manner? – VLAZ Apr 05 '23 at 05:24
  • @cSharp I mean different outputs within the same browser. – kakakali Apr 05 '23 at 05:25
  • @VLAZ Yeah! The first time I saw this, I even suspect that I misunderstood something with the `Range` object. Anyhow, this behavior is misleading. – kakakali Apr 05 '23 at 05:28
  • It's not really clear what you're asking. Could you please [edit] your question to show what you expect to see and what you actually see. If the console output doesn't translate well to text, please upload a screenshot. Explain why you expect to see a particular result – Phil Apr 05 '23 at 05:30
  • 1
    console.log (in newer browsers) shows a "live" value - when you call range.cloneContents() a second time, the first value becomes stale in the console (no longer valid) so is displayed as a string. Add a breakpoint/debugger; after the first console.log and you'll see that shows the expandable value. – freedomn-m Apr 05 '23 at 05:31
  • 2
    For anyone unclear: OPs code does 2x `console.log` of what appears to be the same thing `range.cloneContents()`. In the first it appears as `"#document-fragment"` but the second appears as `> #document-fragment` (expandable). – freedomn-m Apr 05 '23 at 05:32
  • 2
    Does this answer your question? [How can I make console.log show the current state of an object?](https://stackoverflow.com/questions/7389069/how-can-i-make-console-log-show-the-current-state-of-an-object) or [javascript console.log does not works as expected](https://stackoverflow.com/questions/33718904/javascript-console-log-does-not-works-as-expected) or [Why doesn't console.log take a snapshot of the passed variables](https://stackoverflow.com/questions/5223513/why-doesnt-console-log-take-a-snapshot-of-the-passed-variables) and probably many others – freedomn-m Apr 05 '23 at 05:35
  • @Phil I added the screenshots. (It's hard to see when using "Run with snippet". – kakakali Apr 05 '23 at 05:36
  • @freedomn-m Yeah, that answers my question. (This is really a `console.log` problem with object state. – kakakali Apr 05 '23 at 05:56

0 Answers0