The Firefox “Inspect Element” tool can help you investigate the underpinnings of a website’s operation, including the HTML and CSS elements it uses, its load on the network, the latency of its loading elements, and the files it puts in storage, such as cookies. Experienced developers may not find much new in this primer. Novices and everyday web users, however, should find a new, powerful side to Firefox’s capabilities and a deep well of files and operations that sit beneath every site on the Internet.
Installation
If you use Firefox, you don’t need to do anything further. If you want to begin using Firefox, and you’re on Windows, Linux, Mac, iOS, or Android, follow this link to find the latest version of the browser. Install the downloaded installer files as you normally would by double-clicking them or tapping if you’re on a smartphone. Major Linux distros likely come with Firefox pre-installed or have copies of Firefox in their Software center/package repositories which the user can easily install.
Opening “Inspect Element”
After installation of Firefox, you can find its inspector by right-clicking any element on a webpage. That will show you a dropdown menu such as this one pictured below where “Inspect Element” is located near the bottom of the list.
Inspector
Clicking “Inspect Element” will immediately open the inspector at the bottom of your screen. At this point the titles get a bit hazy since the inspector will have technically opened the “Inspector” part of its services. In any case the element that you clicked will be shown in the middle of the tool, and when you run your mouse over that element – like the
This makes it easy to know what elements you’re looking at. It also makes it easy to find the various properties of those elements. If you look to the right side of the “Inspector,” you will see the properties of that specific
Style Editor
You can continue on your journey to the realm of cascading style sheets (CSS) by following the toolbar at the top of the inspector. Click where it says “Style Editor” to open a new dialogue that shows three new panels at the bottom of your screen.
Here you can see the two style sheet files DuckDuckGo uses, the elements of the first selected style sheet, and that sheet’s various “@media” rules, which govern responsive design for smaller and larger screens. You can edit these style sheets just like you can in the “Inspector” section. In this case there are a lot of rules to choose from – 1262 rules in the first style sheet alone. If you navigate even further in the toolbar to the “Network Monitor,” you will find the website’s requests for those files and their statuses. Other elements such as images and fonts may also be present in that tab, and you can see all those requests and the size of each file after the request has been processed.
Performance
When you open the “Performance” tab, you’ll need to click the “Start Recording Performance” button to have the inspector gather information. In a few seconds it will discover the frames-per-second (FPS) your page runs at, document object model (DOM) events that took place, and style recalculations, alongside the time (usually in milliseconds) that it took those elements to load.
For this site you can see the highlighted DOM event, a mouseover, took 6.03 milliseconds in duration to load. The average FPS for this page was about 39. And the chart showing my range of response times reached 9000 milliseconds for some events.
Memory
In the “Memory” tab you will also need to click a button – “Take Snapshot” – to gather information. For me, it generated a map of events that shows approximately 600 Kb of strings, 1 Mb of objects, and 1 Mb of scripts finding their ways into memory. You can view those same elements in a couple different ways by clicking the dropdown menu where its says “Tree Map,” like you can see in this screenshot.
Storage
Finally, if you click the “Storage” tab, you can see permanent files a website may have placed on your computer. Relevant to most users, this includes cookies. You can see one loaded in the image below.
You can see in the right-side panel that this particular cookie expires in the middle of the next decade and that I accessed it during the session of writing this article.
Conclusion
There’s a lot to wade through when using the Firefox inspector. This introduction to its multiple parts should keep you busy for a while. Take some time to change a site’s HTML elements. Visit a few different websites to see their loading times. Find out how many cookies a particular page tries to store on your machine. At times, that information can give you pause. Hopefully, this journey of discovery will give you a greater understanding of what websites do so that they can function as you expect. It may be much more than you previously realized.
