Website Development Tools: Part 1 – Browsers

Website Development Tools: Part 1 – Browsers

This is part one of the series – Website Development tools where I will be covering browsers and some browser addons that will make your life a lot easier as a webmaster who does his own development. A browser is the software that lets you browse the internet. There are tons of choices available out there with Firefox, Chrome, Safari, Opera and evil Internet Explorer leading the frontier.
NCJ7DV6SEZY4

So, Which browser is right for me?

My browser of choice for development has been Mozilla Firefox but I have also used Google Chrome alongside. Firefox and chrome are both phenomenal browsers that keep you up to date with the latest html5 support. You can check your browser’s html5 support on this site: http://html5test.com/

Firefox and Chrome are two of my favorite browsers. If I was not doing development I would switch to chrome full time since it is very light and consumes significantly less memory space. I also like the fact that chrome uses multiple processes. If you are a heavy firefox user, you might have experienced how sometimes your entire browser freezes because of one tab. Chrome’s multiple processes deal with this issue very well and it doesn’t let the rest of your browser freeze because of one tab.

Both Chrome and Firefox have got some very good addons that you can use to analyze your competition, validate your page, pick a colour of an image and more. I will list a few addons/extensions below that I find useful in development and analysis. Most of them have got something similar available for the rest of the browsers.

You can jump to chrome extensions by clicking here.

Useful firefox addons for webmasters and developers

firefox sketch

I use SEOQuake and SEO Toolbar by Moz to do a quick analysis of my clients’ and their competition websites. Alexa Sparky on the bottom right gives me a quick peek at the amount of traffic any website is getting. I consider any website with a rank less than 50k pretty good in terms of traffic but again traffic is a relevant metric as some big companies have a very low Alexa rank.

Development

  1. Firebug
  2. YSlow
  3. Page Speed by google
  4. ColorZilla
  5. MeasureIt Pixel Perfect (Removed from list as current release is very unstable)
  6. DNS Flusher
  7. Firepicker
  8. Web Developer
  9. HTML Validator
  10. CSS Usage

Firebug is one of the best tools out there for web development. I have used it from the very beginning and I would definitely recommend it to new developers. Yslow by yahoo and google’s pagespeed are two very good addons if you are looking to improve your website’s pageload speed. They analyze your page and give you an appropriate set of instructions to speed up your page. ColorZilla lets you pick the colour of any image or element in your browser. MeasureIt allows you to measure real distance between two elements in pixels. It’s a very handy plugin if you are thinking of doing pixel perfect psd to html conversions. DNS Flusher – a utility that I found very late but when I got hold of it I was very pleased as it lets me flush dns cache of browser. Something that Firefox doesn’t allow at this stage. DNS Flusher will come into play when you have just changed your nameservers. If you are a developer, you must have experienced it already. Firepicker integrates a visual colourpicker inside firebug.  Web Developer is another addon that adds various developer tools to your browser. HTML Validator lets you check your html document for html validation errors. CSS Usage is another good utility that lets you clean your css code and generate a stylesheet that contains only the rules that are being used on your page.

General (handy) tools

  1. Password Exporter
  2. Context Menu Image Saver
  3. Link Properties Plus
  4. Go Mobile [Speed Boost]
  5. MD5 Reborned Hasher

Password Exporter allows you to generate an export file with all your passwords when you are migrating to another machine/OS (be careful with the generated password file). Context Menu Image Saver lets you save an image directly to custom location via context menu (menu that you get when you right click on a page). Link properties plus does just what it says and gives you a quick overview of any link. Go Mobile lets you browse mobile version of a website by asking firefox to act like a mobile browser. It can also be used for mobile testing. MD5 Reborned Hasher allows you to check your website for MD2, MD5, SHA1, SHA256, SHA384 or SHA512 sum of a downloaded file.

Useful Chrome extensions for Developers and Analysts

chrome-sketch

Chrome boasts of some equally useful extensions. I prefer some of the chrome’s SEO Extensions to their firefox counterparts.

SEO and general Analysis

  1. SEOQuake
  2. MozBar
  3. Pagerank Status
  4. Raven Tools
  5. Scraper
  6. Redirect Path

Development

  1. Firebug Lite for Google Chrome
  2. Web Developer
  3. Pagespeed Insights
  4. DivShot

General tools / utilities

  1. Google Dictionary
  2. Platen
  3. Evernote Web
  4. Techsmith Snagit {save and share screenshots easily}

If you think this list is incomplete and is missing some obvious extensions/addons that you like, please leave your comment below and I shall update the list. Please note that adding an extension may slow down your browser. I usually disable the extensions I do not need in a session. So, If I am doing development work, I turn SEO/Marketing related extensions off and vice-versa.

The following two tabs change content below.

Subscribe to the Tips & Tricks newsletter and get the best of our tricks in your inbox every month.

Post a Comment

Your email is kept private. Required fields are marked *

hits counter