18 Essential Chrome Extensions for Web Development

18 Essential Chrome Extensions for Web Development


18 Essential Chrome Extensions for 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!

Author: Kevin Liew

Kevin Liew is a web designer and developer and keen on contributing to the web development industry. He loves frontend development and absolutely amazed by jQuery. Feel free to say hi to me, or follow @quenesswebblog on twitter.

Share the love

12 comments

Ankur
Wed, 18th April 2012
I was just looking for a syntax highlighter and now I have found even more great apps. Thanks Reply
Kevin Liew Admin
Thu, 19th April 2012
more to come in the future :) Reply
Terry
Thu, 19th April 2012
Great collection!

- http://gbin1.com Reply
Xavier
Thu, 19th April 2012
Sublime Text <3 Reply
Alexander DiMauro
Tue, 24th April 2012
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
Mon, 14th May 2012
Great Tools. Thank you very much. Reply
Alex
Sat, 26th May 2012
If you work with with forms, then Form Filler is a good one: https://chrome.google.com/webstore/detail/bnjjngeaknajbdcgpfkgnonkmififhfo/ Reply
Abel
Thu, 29th November 2012
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
Fri, 8th February 2013
A couple really useful ones there that I wasn't using, thanks! Reply
rob
Fri, 22nd March 2013
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
Fri, 10th May 2013
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
Mon, 24th March 2014
Nice post sharing here. Reply

Leave a Comment

Please keep in mind that comments are moderated and rel="nofollow" is in use. You can use [code][/code] if you want to write codes. Don't spam us :) Thanks!

Advertisement