18 Essential Chrome Extensions for Web Development

Written by Kevin Liew on 18 Apr 2012
122,539 Views • Web Development

Introduction

Chrome browser is one of the best browsers available online. As a web developer, I used to be a big fan of firefox because of the vast number of extension available for web development. Actually, the main reason I stick with firefox is due to the famous extension - Firebug. However, I found myself using chrome more often nowadays when I'm not developing website because of its speedy rendering speed, less bulky (my firefox has way too many web dev extensions installed) and chrome supports latest CSS3 3D transform and just good to view cutting edge website.

Based on the most recent usage share of web browsers, chrome has overtaken firefox and just a few percent behind Internet Explorer, but in fact, Chrome was able to overtake Internet Explorer for the first time few weeks ago! Now you know the trend and I see the need to create a post just to summarise the essential and useful Chrome extensions for web development.

  • FirebugFirebugFirebug Lite is not a substitute for Firebug, or Chrome Developer Tools. It is a tool to be used in conjunction with these tools. Firebug Lite provides the rich visual representation we are used to see in Firebug when it comes to HTML elements, DOM elements, and Box Model shading.
  • Firebug consoleFirebug consoleWith this extension you can use chrome API such as chrome.extension.*, chrome.tabs.* Extension developers may use it to test any javascript code against google API.
  • Check my linksCheck my links'Check My Links' is an extension developed primarily for web designers, developers and content editors to check broken links.
  • Regular Expression TesterRegular Expression TesterThis extensions should be used by developers to test regular expressions, also known as regex or regexp.
  • Live CSSLive CSSIt's the perfect tool for front end developers, modify the HTML, CSS or JavaScript code from your favorite IDE or text editor and see the changes on real time in your browser.
  • Form EditorForm EditorAn extension for editing custom request(GET or POST) to web server. You can modify form method and action, edit form data and extract forms from the web page.
  • Unix Time Stamp ConverterUnix Time Stamp ConverterConvert Unix Epoch timestamps to human readable dates (and dates to timestamps) quickly and easily with Utime.
  • Color PickColor PickThis extension is 'mainly meant for experienced web developers' who need to pick color on any web page, modify color value and inspect stylesheet to identify the color.
  • JSON PrettifierJSON PrettifierA JSON formatter to prettify the JSON with syntax highlighting, indentation and line break to increase readability.
  • Resolution TestResolution TestAn extension for developers to test web pages in different screen resolutions, with an option to define your own resolutions.
  • Web DeveloperWeb DeveloperAdds a toolbar button with various web developer tools. The official port of the Web Developer extension for Firefox.
  • YSlowYSlowMake your pages faster with Yahoo!'s page performance tool.
  • Screen CaptureScreen CaptureCapture visible content of a tab, a region of a web page, or the whole page as a PNG image.
  • IE TabIE TabEasily run Internet Explorer within Chrome. It works on windows operating system only.
  • Perfect PixelPerfect PixelThe extension help develop your websites with per pixel accuracy! You can overlay jpeg layout on top of the website.
  • Google Analytic DebuggerGoogle Analytic DebuggerPrints useful information to the JavaScript console by enabling the debug version of the Google Analytics Javascript (ga_debug.js).
  • ValidityValidityClick the icon in the address bar or press Alt+Shift+V to validate the current page. Results can be seen in Chrome's JS console.
  • Edit this cookieEdit this cookieEdit This Cookie is a cookie manager. You can add, delete, edit, search, protect and block cookies!
Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.

13 comments
Ankur 13 years ago
I was just looking for a syntax highlighter and now I have found even more great apps. Thanks
Reply
Kevin Liew Admin 13 years ago
more to come in the future :)
Reply
Terry 13 years ago
Great collection!

- http://gbin1.com
Reply
Xavier 13 years ago
Sublime Text <3
Reply
Alexander DiMauro 13 years ago
jQuery API Search, which lets you search the API from the omnibox, or jQuery API Browser which gives a dedicated search. Both are great for anyone using jQuery, which is most developers these days, no?
Reply
Ney Mendes 12 years ago
Great Tools. Thank you very much.
Reply
Alex 12 years ago
If you work with with forms, then Form Filler is a good one: https://chrome.google.com/webstore/detail/bnjjngeaknajbdcgpfkgnonkmififhfo/
Reply
Abel 12 years ago
Anybody knows a plugin to see the contents of the browser's sql views?I can see the database by "inspect element->Resources tab" but only tables are shown. The views exist as I can retrieve their contents by javascript and show them with an alert. Anybody knows about a plugin or some workaround to see these contents?

Thankyou!!
Reply
Julian Kingman 12 years ago
A couple really useful ones there that I wasn't using, thanks!
Reply
rob 12 years ago
Have a look at FormViewer - view/edit form values within the chrome developer tools -https://chrome.google.com/webstore/detail/form-viewer/gihginompkjijnipckobcjioandcmjgp
Reply
Petr 11 years ago
Thanks for sharing your list Kevin. I have put together my list of great browser extensions for front-end developers and designers.

http://ihatetomatoes.net/useful-extensions-for-front-end-developers/
Reply
GAM Software Solutions 11 years ago
Nice post sharing here.
Reply
M.Blum 8 years ago