How to Use the Firefox “Inspect Element” Tool to Examine a Site | Tips & Tricks
tag I hover over in the screenshot below – the “Inspector” will highlight that visual element on your screen in the webpage itself.
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
If you scroll through that right-side panel, you can see the properties it inherited from other elements. You can even change the properties in that window and see them appear on the webpage in real time.
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.
Image credit: Firefox Quantum home page by DepositPhotos
Comments are closed.