How to Use the Firefox “Inspect Element” Tool to Examine a Site

firefox-inspect-element-featured

If you have ever wanted to know how your favorite websites are structured, a browser’s “Inspect” services can be a hidden blessing. We’ve covered Chrome’s “Inspect” tool, and Firefox comes with a similar offering, too.

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.

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.

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.

Firefox dropdown menu

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 <div> tag I hover over in the screenshot below – the “Inspector” will highlight that visual element on your screen in the webpage itself.

Firefox inspector inspect tab

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 <div> tag, including its settings for margin, padding, border, font size, and vertical alignment.

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.

Firefox inspector style tab

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.

Firefox inspector network tab

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.

Firefox inspector performance tab

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.

Firefox inspector memory tab

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.

Firefox inspector storage tab

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.

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

Leave a Comment

Yeah! You've decided to leave a comment. That's fantastic! Check out our comment policy here. Let's have a personal and meaningful conversation.

Sponsored Stories