I have this code
<div class="buttons">
<button>Press 1</button>
<button>Press 2</button>
<button>Press 3</button>
</div>
<script>
const buttonContainer = document.querySelector('.buttons');
console.log('buttonContainer', buttonContainer);
buttonContainer.addEventListener('click', event => {
console.log(event.target);
})
</script>
when open the console for the first time, it shows this:

where I can see the properties and methods of the variable.
When reloading the page, it changes to this:

Any one could explain to me why it happens? and how i can toggle between 2 of those options, I see very helpfull to see the list of the properties and methos of my variable when needed.
Thanks :)
its because that script is downloaded in parallel to parsing the page, and the rendering tree might not be parsed yet. to fix this, add defer prop to your script. That should make it execute after the parsing.