Browsers are incredibly complex pieces of software that take instructions from just a few files and create every webpage you visit all the while making calls to servers and other operations. Luckily there’s a way to peal back and see the behind the scenes working of what makes a webpage.
On any web browser (Chrome, FireFox, Brave, Opera...) right-click and select the option
inspect afterwards a window will pop-up resembling something like this:
This is the console window are here you can see everything that makes up any webpage.
Ever want to see how all the components of a webpage work together and their styling? Well in the Inspector tab you can. Within the Inspector you can see all the HTML elements that make up the webpage and their different attributes along with their CSS stylings.
You can even add or delete elements and change the style to see how that would visually effect the page. While these changes are only local to you computer it is a good way to play around and see how different changes alter a page’s layout.
console.log(...) statements and errors will be printed here too. If you try to run your project but not UI is appearing check the console to see if there are any errors that came up.
When creating a UI there are ways to write incorrect code that will execute and run, but not produce any visual elements. That’s why the console can be a helpful tool when running your project locally.
Why is this Important?
The web inspector is a way to see how a webpage is put together. By observing how other webpages are made it can inform how you want to create, and subsequently nest, components together. Mozilla’s documentation on the Page Inspector goes into detail on each different tab and how it can be used.