Author: Matt Blanco
Last Updated: 31 December 2022
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 (Arc, Chrome, Firefox, Safari, Brave, Opera, Edge, ...) right-click and select the option mentioning inspect. Afterwards, a window will pop up resembling something like this:
This is the console window where you can see everything that makes up any webpage.
Ever want to see how all the elements of a webpage work together and how they are styled? Well in the Inspector tab (Elements in Chromium-based browsers) you can. Here, you can see all the HTML elements that make up the page, their attributes, and their CSS styles.
You can even modify, add, and delete elements while also changing their styles to see how those changes would visually affect the page. While these tweaks are only local to your computer, it is a quick and simple way to experiment with how different changes alter a page’s layout.
A JavaScript console can be found within the Console tab. Here, you can run any JavaScript code you wish. All JavaScript code that runs in your page can also be called from this console, and any console.log() statements or errors will be printed here too.
If you try to run your project but no UI is appearing in the browser, check the console to see if there are any errors that came up.
When creating a UI, there are many ways to write incorrect code that will execute and run, but not produce any visual elements. That’s why this console can be a helpful tool when running your project locally.
The web inspector is a great 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.
This is just a general overview of two of the tabs. Firefox’s documentation on the Page Inspector goes into much more detail on other capability and how they can be used.