1

I'm currently learning javascript. Therefore I'm often in the Brwoser's dev tool, in the console tab. Now there is something that I can't explain. The output in the console log is different after refreshing the webpage. Either it is like the upper window in my screenshot or like the lower window. In Chrome it is always like in the upper window. In Brave browser the chance is about 50/50 that it is like the upper or lower.

I have found out that the option "preserve log" change the output so that it is always like the upper screenshot. But I would like to turn off this option to get a cleared console after a refresh.

Does anyone know how to change this behavior of the browser?

I'm working on macOS 12.0.1 Monterey and Brave Broser: Version 1.32.106 Chromium: 96.0.4664.45 (Offizieller Build) (x86_64)
or
Chrome: Version 96.0.4664.55 (Offizieller Build) (x86_64)

enter image description here

Miracuru
  • 65
  • 6
  • 1
    Can you show the code that logs to the console? – skara9 Nov 20 '21 at 21:57
  • Thank you. The code is `"use strict";` `let jumbo = document.querySelector(".jumbotron");` `console.log(jumbo);` – Miracuru Nov 20 '21 at 22:36
  • Sorry I have a little formatting problems. As I don't know mini-Markdown yet. However. The site is reacheable with this [link](https://js.miracuru.ch/Uebungsordner/Document%20Object%20Model%20I/1%20BSI/) – Miracuru Nov 20 '21 at 22:39
  • 1
    I would say it's most likely because the console hasn't rendered the element at the time of the log. Not too sure though. – skara9 Nov 20 '21 at 23:01
  • Thank you @skara9. That would clarify. I had a guess that it could depend on loading time or render time. But it was more a vague guess. Think then I can't do much about this. Just reload a few times until the correct output is visible. – Miracuru Nov 20 '21 at 23:10
  • Yes it has definitively something to do with load / render time. I have written a small timeout and now it loads everytime perfectly. ` let jumbo = document.querySelector(".jumbotron"); let timeoutID = window.setTimeout("console.log(jumbo);", 500); ` @skara9 – Miracuru Nov 20 '21 at 23:40
  • Yeah, I was about to suggest that. Great that it works :) – skara9 Nov 21 '21 at 00:39
  • I use brave as well. came up to this situation, just hit refresh and it started showing normally. – dpthegrey Jun 06 '22 at 11:08

2 Answers2

1

I would like to share the solution to my problem. Now I'm a few lessons further in my course and got new commands. With the load EventListener it works:

let jumbo

window.addEventListener("load", e => {
    jumbo = document.querySelector(".jumbotron");
    console.log(jumbo);
});

The teacher mentioned also that there are also two other parameter or commands: "async" and "defer".

Miracuru
  • 65
  • 6
0

Click the gear in the top right corner of the console panel to show options. Untick "Preserve log". enter image description here

DustInComp
  • 1,742
  • 8
  • 18