In the Browser dev tools in console the output is different after refresh

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)

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".