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.
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:
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.
Your cursor will turn into an eyedropper so you can quickly see the web color code you need.
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.
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."
4. Clear private data - under miscellaneous, you can clear browser cache, history, and data from here.
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.
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!