Console bugs (very new to JS)

Im just looking for clarification here regarding the f12 button.

1st question: what is it called? terminal?console?nodejs?

2nd question: it already has bugs on a blank file. is this normal? if not what do i do to get rid of these bugs? am i missing a plug in? I would understand to see bugs if I had a written document/project I was working on, but this is a completely blank document.

Most references to the f12 tool set call it refer to it collectively as the Web Dev Toolkit, and the one panel in that screenshot as the console. It’s useful for testing or debugging your javascript, while the Element Inspector does much the same for CSS.

And yes, it’s common to see errors when loading, whether a site you’re just visiting or even with no HTML page open at all. Some extensions Might be causing script errors, or the default home page might. For example, a missing favicon.ico will often show up as a 404 error in the console.

In this case, I’m guessing you’ve got an extension that fetches something (i get this error from a custom book lookup extension).

1 Like

thank you. do you know if there are different versions? for example this youtubers version looks much cleaner but it was also in 2019.

The user would have similar errors to what you are seeing if they had an extension installed that was logging warnings/errors/messages (extensions are written in JS, so if the extension log things to the console then you’ll see them there), or they were on a website and the JS on the website was logging info.

There’s a little button at the top with an icon that looks like :no_entry_sign:, if you click that it clears the console. You can also filter specific messages or types of message – eg if you have an extension you know logs things you don’t care about to the console you can hide those

1 Like

The Dev Tools are just another part of the browser, really, and they can change for many reasons: the browser devs might have planned enhancement track, the community backing the tools might have asked for changes, the CEO might have declared a thing to be done.

And to make things more fun, you can customize your own Dev Tools. I turn certain panes of entirely, and add a few I find useful (the React/Vue.js/Svelte panes, for specific framework development, for example).