Blog

SpinWeb is an Indianapolis-based digital agency, specializing in enterprise website design & digital marketing

5 Great Firefox Web Developer Extension Tools

Stephanie Fisher

Posted by Stephanie Fisher on 1/26/16 9:30 AM

Have you ever used the Web Developer Extension for Firefox? If you're not using Firefox, take a moment to download this browser and you can thank me later.

Once you're done, add the Web Developer Extension to your browser. Now we're ready to talk.

This is a set of tools you can use in your Firefox browser to inspect different elements and settings of a web page.

metal-gears.jpg

You don't have to be a developer to use these handy tools. Marketing assistants and web editors will find them extremely useful when checking settings or finding hidden information about a web page.

Performing a website audit? These tools are a must-have.

You can set up the toolbar to look like this:

toolbar.jpg

Or set it up like in one of the examples below.

Here are some of our favorite, frequently used Firefox Web Developer Tools:

1. Eyedropper -- find a web color.

eyedropper.jpg

Your cursor will turn into an eyedropper so you can quickly see the web color code you need.  

eyedropper-color.jpg


2. Images
- find image paths, dimensions, file sizes, alt tag information, and more.

For example, the Alt Tag attributes: Click on one of the options and you can see in your browser what all of your image alt tags are named. 

alt-attributes.jpg


3. Disable
- disable browser caching, pop-up blocker, and more.

Our support tech, Nathan, says "The tool I use most is disable browser caching, which is a big help when making lots of edits on websites. This way, I always know I'm seeing the most updated version of a page, rather than a cached version."

firefox-web-developer.jpg


4. Clear private data
 - under miscellaneous, you can clear browser cache, history, and data from here.

clear-private-data.jpg


5. View source
- if you need to see the source code of a web page, use this tool to open a new tab with the source code.

view-source.jpg

source-code.jpg

Basically, if you need to get information about any element of a web page, the web developer extension for Firefox is a great tool.

Explore the web developer tools to find more tools that would help you in your daily web work. Have a favorite developer tool you use all the time? Share it in the comments below!

Need help convincing your boss that you need marketing help?

Topics: website, web design, development

Let's Talk

Ready to get started

Seamlessly expedite sustainable experiences whereas clicks-and-mortar e-tailers. Credibly create cooperative testing procedures with high-quality applications. Synergistically enable granular convergence whereas client-based convergence.