Here are some useful things that I've learned slowly that Firefox can do, in conjunction with the Web Design toolbar, to make life easier for a web designer. These tools will allow you to pick up on mistakes much more easily, and help in the design of your site.

Firefox

Here are all the things that Firefox can do on it's own, without any extensions.

Error Console

The error console can be reached by going to Tools > Error Console in Firefox. It lists warning and error messages about your site. It can also be reached by pressing the far right icon on the Web Designer toolbar (see below).

It's useful to detect where a error is in CSS especially, although it is also useful for use in debugging Javascript. If you are debugging a CSS Error, make sure you fix the first error in the sequence, as one syntax error will throw off a lot of code after it. Here I have deliberately created an error in one of my css files, so you can see what a CSS error looks like:

The error I created was a missing '}', in the definition above the '#visual-portal-wrapper' id.

View Source

The View Source page (right click, View Source) is a wonderful tool. It will pick up on basic html mistakes. Also, if one of the other tools has given you a line number to look at, it will highlight the line selected, as well as putting numbers to the left hand side. All useful little tools.

See the screenshot here to see an example of a coding error: (Click for full-size)

I have circled the area which the mistake is in in red. All the text colour is done by firefox, including the red part showing close to where I've gone wrong. I've also blanked out some things that could be used to identify the site which I was working on. Yes, I know that HTML is awful. It was very early in it's build stage. It looks a LOT nicer now. I even managed to get rid of the table :)

Page Info

The page info section is a little box, hidden under Tools > Page Info, which gives you detailed information on the web-page. Not as much as you can get using the Web Designer toolbar, but it comes in handy every now and then, especially if you want to examine a security certificate closely, or get information on how a form is working.

Here are a couple of screen shots:

Media lists all of the images, audio and video used on a page. It even gives you a preview box. (Info box can be resized to make it fit...)


The "Save As..." button allows you to download the media item.

Web Designer Toolbar

If you are a web designer or developer, and you don't have this toolbar, GET IT NOW!

It adds so much functionality to Firefox just for web designers, its untrue. I only have time to go through a couple of those functions. I'm picking the ones I find most useful during my work. But, there is much, much more, so explore it when you have the chance!

You can get the toolbar from here: http://chrispederick.com/work/webdeveloper/ or here: https://addons.mozilla.org/firefox/60/.

Disable Cache

It literally, stops the browser from caching anything, from images to css style sheets. This means, that you can just hit "CTRL + R" to refresh, instead of "CRTL + SHIFT + R" or "CRTL + F5" to skip the caches. This tool, however, does eat your bandwidth, so I would recommend only using it if your development server is in the same building / on the same LAN.

Display Element Information

This is a really useful tool. It will allow you to both highlight elements on your screen, as well as see information about them. A quick way to activate this is using the shortcut "CTRL + SHIFT + F". Alternately, click on "Information" and then "Display Element Information".

Here is a couple of screen-shots, currently showing information about my main content frame. I have cut this image up a bit, for those on low-resolution systems to be able to see it properly.

As you can see, the information is quite comprehensive. All attributes are shown from the element, including (if defined) style elements. Also, you can see just below the Web Developer tool bar a box showing all the containers (and styles) of the item I have selected. (The .body class is an artefact from whilst I was leaning CSS: its no longer used.)

The entire frame around my blog highlighted in red whilst the cursor was on it. The Information box popped up when I clicked inside the element.

Resize

This is a feature of the web Design toolbar that I can't work without. We now design all of our sites to work with 1024 x 768 (As you may have noticed with this site), but also try to make them compatible with 800 x 600, as far as possible. Resize allows you to resize your browser to a defined value. When it is first installed, the resize drop-down only has 800 x 600, but it's just the work of a few moments to add 1024 x 768.
(Click on "Options"in the tool bar, click on "Options..." and then the resize tab. Then click the add button. Or, if you have the latest version, Click on "Resize" in the tool bar, and then click on "Edit Resize Dimensions")

No more changing my screen resolution, just to check the site. Here (again!) is a screenshot, of the options window that is opened when you choose get to the resize area...

Here is a screenshot of the drop-down menu:

Conclusion

Hopefully that has given you enough information. There are a plethora of other useful extensions to Firefox for Web Designers / Developers. If you have the time, look through the "Developer Tools" category in the Firexfox extention repository. I would also recommend the "Professor X" extension, which allows you to see a detail of a webpage's head, and all the information inside very easily, without having to open and scan through the source, and nicely formatted. (Screenshot here)