1. Firebug
Firebug is something that we use regularly and it is a very powerful tool. You can edit, debug and monitor CSS, HTML, and JavaScript in real-time on any web page. However, we mainly use it to get accurate dimensions of web content which comes in very handy when having to re-design graphics to a specific size.
To begin using Firebug it couldn’t be easier. You simply click the button of the Firebug logo on the Firefox toolbar.
Get Firebug.
2. Web Developer
This tool by Chris Pederick is extremely useful for web development and has features for editing, debugging and so much more. With the amount of useful features it has to offer you can see why it is so highly rated by Firefox.
Get Web Developer.
3. HTML Validator
HTML Validator is a Firefox extension that will find errors in your code and display the number of errors in the status bar when browsing. Firefox makes the validation locally on your machine so it doesn’t have to send the HTML to a third party server. It is able to do this because the algorithms the extension is based on are embedded inside Firefox. These algorithms are called Tidy and OpenJade. When you install the extension it gives you the option of using one of the two algorithms. To better understand which one to choose you need to know how they differ.
Tidy
Advantages:
- Tidy shows more errors.
- Tidy shows errors about attributes values.
- Tidy reports useless empty tags
- Tidy has an accessibility checker of WAI level 1, 2, 3.
- Tidy has a feature to clean up a page. It is interesting to help people to find solutions for their errors.
OpenJade, the SGML Parser
Advantages:
- It is the same algorithm as the
- It gives the same errors as the W3c validator. This can be important if you want or need to have your pages W3c compliant.
- It is based on DTDs: a language that defines the HTML syntax. There are a lot of SGML DTDs, several types or versions of HTML, SVG or MathML.
- It gives better result for Strict HTML or XHTML validations.
Get HTML Validator.
4. Awesome Screenshot
Awesome Screenshot is exactly what the name suggests. It allows you to screenshot any web page you like effortlessly. It also gives you the option to select which parts of the screen you want to capture whether it be the entire page or visible part. The other impressive features of this software are the ability to annotate your images, erase sensitive information and share your screenshots.
Get Awesome Screenshot.
5. Page Speed
Page speed is an add-on for Firebug developed by Google. It analyses web pages and advises you on where improvements can be made that will speed up the website. The ability to be able to do this is very valuable as a web developer because it saves having to do trial and error to fix a sluggish website. As research proves that speed is crucial to satisfy users you should do your best to keep your websites performing at an optimal level which is where this very powerful tool comes into play.
Get Page Speed.
