Mozilla Firefox is a web browser widely known for its great variety of extensions and add ons, but Google Chrome has a very large library of them as well. In fact, many Firefox extensions have been ported over for use with Chrome. New ones have also been created to replicate the functionality of those not simply ported over to Google’s browser.
Extensions are very important to web developers as a great deal of their testing work is done inside of a browser. Many web developers were hesitant to switch over to Chrome because they were sacrificing their extension functionality. This is not the case anymore as there are many available for Chrome to help make web developers’ lives easier. Here are the top 10 Google Chrome extensions in no certain order:
MeasureIt! allows you to do exactly what its name implies. You can simply click on the ruler icon that is installed with the extension in order to draw out a ruler to measure an element on a web page. This will allow you to see the exact pixel width and height of any element present on a webpage. This is very helpful if you are looking at how another website is designed in terms of CSS elements or the exact size of a logo.
BuiltWith is a great extensions that quickly builds a profile of a website based on what technologies are used to build a webpage. This can aid web developers in deciding which technologies to implement in their own websites by looking at what other successful websites have chosen.
Validity checks its name of any HTML page put into the address bar. It is very convenient for web developers to use as it can work with both local and online pages. It will even work with a self installed W3C Validation Service to provide in-depth and always up to date validation.
IE Tab was originally released for Firefox, and has been brought over to Chrome. It simply will open up a tab in the browser with the selected URL using the Internet Explorer rendering engine instead of the the Google Chrome rendering engine. This allows for easy testing in a different browser without actually going into a different web browsing program.
Resolution Test is an extension that provides a simple way to test a website in multiple different resolutions. All you have to do is simply click on the Resolution Test icon, and select any resolution you want. The window will automatically resize so long as you don’t already have it maximized. This is imperative to test because not all people use the same resolution, and your website must look good and content must be readable in all types of resolutions.
Aviary is a screen capturing extension that allows for the taking of a screenshot inside of a browser and editing as well with tools provided by Aviary.com. This is great for seeing exactly what your site looks like in action, and then saving the changes you notice you have to make either with little notes or the moving of elements around in the screenshot. You can capture either the entire web page or just the visible portion, which you can then do basically whatever you with after.
Pendule adds loads of web developer functions to Google Chrome. With it, you can make a lot of changes to CSS and forms. You can even completely remove the CSS from the page you are viewing to just test the HTML of PHP code without any special styling.
This extension adds many SEO (Search Engine Optimizaion) functions to Google Chrome. It comes with many different tools including the ability to perform keyword research, NoFollow link highlighting, amount of pages indexed by search engines, amounts of backlinks, and much, much more. By analyzing the statistics presented by these tools, you can find out what sorts of web design and development techniques work better than others.
Eye Dropper is very similar to ColorZilla for Firefox. It is simply the eye dropper tool from any image manipulation program that allows you to select any color on a website. You can then copy the color’s identity in a few different forms for use in image manipulation programs or your web code.
Speed Tracer, which is a pun on the old cartoon Speed Racer, literally traces the speed in which websites and their elements load in your browser. You can use its many different statistics to identify potential speed problems with your website from any sort of element or coded event.
While there are many more extensions available for Google Chrome that might aid web developers, these are the core extensions that all should have installed on their browsers.
Do you have a favorite Chrome extension that helps you with web development? Please feel free to share it.
