No matter how you slice it, web developers have a lot on their plates. From QA, design, and coding to ensuring the page gets noticed (whether through marketing or SEO methods), most web guys have to wear a lot of hats. For a long time now Firefox has had extensions that made the developer's life more manageable and sane, offering tools that were easy to use and accessible right in the browser window. These extensions have saved thousands of developers time and money.
Google Chrome now features a robust library of extensions as well and, like Firefox, many of these were designed to aid web developers the world over with many of the tasks associated with their work. In fact, many of these were ported from Firefox. These extensions range from those providing easy access to the coding to those that make testing pages in a wide variety of settings easier to those that make saving elements from a page quicker and more convenient than ever before.
Chrome's library of extensions cover every conceivable part of the web designing and development process, and we have built a list of the most helpful of them. Below are the 20 most useful Chrome extensions for the web developer, separated into common groups.
Extensions for Coding & Debugging:
These extensions help with the hard coding, whether it is CSS, PHP, or any other language encountered on the web.
As the name suggests, this extension enables the editing of PHP straight from the browser.
2. Firebug Lite
This extension allows you to see CSS that is both embedded and linked onto the page, as well as disable blocks of CSS at a time. It also has tools built in for other aspects of the web development process.
This extension is the Swiss Army knife of extensions, with its capabilities going beyond checking code. It adds an entire task bar to your browser, offering developers the ability to check a wealth of information about a page, look over and edit CSS, outline images based on alt information and other variables, and more.
This one adds a button to the Chrome interface that allows developers to check a page's HTML for errors without having to leave the page.
Extensions for Testing:
Beyond debugging pages for mistakes, there are other things to test for. The following extensions make this testing easier and more convenient.
6. IE Tab
With Internet Explorer remaining the most commonly used browser on the web, ensuring that web pages behave correctly in it continues to be a very important task for every web developer out there. This extension makes it possible to do so from within Google Chrome.
Visitors arrive to your page using a wide variety of screen resolutions. This extension enables developers to change the resolution of their browser window on the fly, making sure their pages look good even in the lowest of resolutions.
Similar to the Resolution test extension, this one is designed more for testing how a website will look on a variety of devices, including mobile phones such as the iPhone and phones using the Android OS.
9. Speed Tracer
This extension is designed for giving insight to a website's speed performance. The information this extension can give allows developers to correct any item or issue that would slow down their pages.
Extensions for Convenience
Web developers can sometimes feel overwhelmed in their work. All those tabs and all that repetition can take its toll. The following extensions are designed for easing the strain and making things manageable.
It can be easy to end up with several dozen tabs open at the same time, and this can cause some confusion and major errors that a developer would otherwise not have to worry about. TooManyTabs make it easier to determine which tab is which, meaning less time is spent trying to find tabs that may be hiding in plain sight.
11. Session Manager
Another one for tab happy developers, this one enables the saving and retrieving of all open tabs from a particular session. Having several saved sessions for varying parts of the development process can save a tremendous amount of time.
Testing out the layout of a page can sometimes require a lot of text. Instead of typing it all out, developers can use this extension to generate several paragraphs of filler text.
13. Eye Dropper
This extension can give a developer useful information on the colors a website is using, including RGB and Hex value.
Web developers repeat a lot of the same tasks over and over again in their work. With iMacros, these common, everyday tasks can be automated to save time, leaving developers free to focus on more important (and more interesting) work.
To finish the list, here are a few varied extensions that perform some odd jobs.
This extension displays the Page Ranks (Google, Alexa, etc.) of an open website in the browser.
This is a simple but useful extension that allows one to measure the size of a page element by “drawing” a ruler around it.
17. Image Cropper
This extension can crop any image from the web and save it as a PNG file. Useful for grabbing and reusing interesting elements on the web.
18. Pixlr Grabber
Similar to the Image Cropper, except this extension can grab chunks of an entire web page.
This extension can give one a breakdown of the technologies present on the page. This includes all widgets, frameworks, and advertising platforms, as well as which page analytics a webmaster is using.
This extension is similar to the Pixlr Grabber above, except this one allows one to edit her capture from within Google Chrome.
This list is really just a small sampling of the large library of useful Google Chrome extensions out there, and we encourage you to explore and find the extensions that are most suited for you. The above are a good place to start, and we hope you have found this list useful.
About the Author: Ken Hattori
Ken Hattori is a technology writer who has a passion for design, photography, letterpress, and just about anything that is appealing to the eye. Having spent some time living in Japan, he has developed a fascination with minimalistic and clean designs.