30+ Google Chrome extensions for developers and designers

Google Chrome is not an old browser, but if we look at the list of popular browser we can see that Chrome has already join the top 3. If you didn’t know so far, Google Chrome offers a massive list of free extensions that can be used by every user on the web. Also, Chrome is a open source browser and you can modify it as you want too!

To be honest, this post is written using Chrome so all I can say is that I love it! So, I thought I should take a peak on Chrome extension gallery and see what are the most powerful extensions for developers and designers. The list bellow is not complete so if you know others that might help out a developer or a designer please share it in the comments section.

Google Chrome extensions for web designers

HTML5 & CSS3 Validator
This tool provides a simple button and clicking on it will redirect you to the w3c validator page with you site already submitted. There you can see the HTML and CSS errors that you site might have.

View Chrome extension

MEASUREIT
This Google Chrome extension will help you measure (in pixels) any element on your or any other page. It will show you the height and width of the element

View Chrome extension

EYE DROPPER
This extension allows you to pick the color from any element on any webpage. It’s available for Google Chrome and Chromium (Linux version)

View Chrome extension

COLOR GENERATOR
Color Generator is a color extension that allows you to quickly generate colors using a custom popup, adjust hex color codes of any custom color, adjust rgb color values, adjust the hue, saturation and brightness or preview colors by inputing the values of that color.

View Chrome extension

CHANGE FONT
This is a Chrome extension that can force the browser to display a specific font. You can add the fonts you want. You can also browse a page at any time by right mouse button menu to change the current page font.

View Chrome extension

PALETTE FOR CHROME
This extension creates a palette from any image, you just need to right-click on the image and select “Palette for Chrome”. You can also inspect any color from the webpage to used it for your inspiration.

View Chrome extension

WHATFONT
This Google Chrome extension will help you inspect any element on the webpage just by hovering them. It’s simple and elegant and does the job great!

View Chrome extension

GOOGLE FONT PREVIEWER
Lets you chose a font from the Google Font API directory and simply apply it to the entire page or just a specified CSS selector to see how it looks. This is great when you are trying to find the right font for your website.

View Chrome extension

Google Chrome extensions for web developers

FIREBUG LITE
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. It provides also some cool features like inspecting HTML elemements with your mouse, and live editing CSS properties.

View Chrome extension

PENDULE
Extended web developer tools for Chrome. Use this extension in addition to the built-in Developer Tools (Ctrl+Shift+I). Main features include: View Selection source added to Google Chrome’s context menu, View CSS, Reload CSS, Disable all styles, Disable inline styles and more!

View Chrome extension

WEB DEVELOPER
The Web Developer extension adds a toolbar button to the browser with various web developer tools. This is the official port of the popular Web Developer extension for Firefox written by the same person.

View Chrome extension

WINDOW RESIZER
This extension resizes the browser’s window in order to emulate various resolutions. It is particularly useful for web designers and developers by helping them test their layouts on different browser resolutions.

View Chrome extension

RIPPLE MOBILE ENVIRONMENT EMULATOR
Ripple is a multi-platform mobile environment emulator that runs in a web browser and is custom-tailored to mobile HTML5 application development and testing.

View Chrome extension

BUILTWITH TECHNOLOGY PROFILER
BuiltWith is a web site profiler tool. Upon looking up a page, BuiltWith returns all the technologies it can find on the page. BuiltWith’s goal is to help developers, researchers and designers find out what technologies pages are using which may help them to decide what technologies to implement themselves.

View Chrome extension

WEB TECHNOLOGY NOTIFIER
Web Technology Notifier displays the technology that is executed by the Web server of the current page through an icon. Many modules and CMS can be identified, such as Phusion Passenger for Ruby applications (as Ruby on Rails and Sinatra frameworks), PHP based applications (like Zend Server or iPyramid), Zope (Python powered), Microsoft ASP.NET, and more.

View Chrome extension

LOREM IMPSUM GENERATOR
This Chrome extension generates Lorem Ipsum text in a minimalistic way.

View Chrome extension

AUTOFILL
The Autofill extension serves one purpose: autofill forms on page load. The autofill operation is done transparently (i.e., without any required interaction from the user) if a Web page contains the defined form fields.

View Chrome extension

JQUERYFY
This extension is used to embed jQuery into any page you want. It allows You to use jQuery in the console shell (You can invoke Chrome console by “Ctrl+Shift+j”) and to see the indication if jQuery has been already embeded to the current page.

View Chrome extension

JQUERY SHELL
jQuery Shell allows you to run JavaScript and jQuery 1.6.1 multi-line scripts in the context of the current web page. It is simple tool to use when experimenting with / learning JavaScript and jQuery commands.

View Chrome extension

JQUERY API SEARCH
Speed up your jQuery JavaScript programming with the jQuery API Search extension for Google Chrome. The extension integrates with the Chrome omnibox to provide autocompletions from the jQuery API, taking you quickly to relevant docs.

View Chrome extension

ONLINE PHP IDE
Free and simple online PHP editor for editing files on your FTP server within your browser. Uses edit_area module which is best for this purpose.

View Chrome extension

CHROME PHP
This extension is for debugging and logging PHP variables to the chrome console. It was inspired by FirePHP.

View Chrome extension

XDEBUG HELPER
Integration for PHP IDE like Netbeans or Eclipse With PDT.

View Chrome extension

PHP DOCUMENTATION
PHP documentation, the official PHP Manual for developpers. PHP.net

View Chrome extension

PHP CONSOLE
PHP Console is extension that displays errors/exceptions/debug messages handled by class PhpConsole and Lagger in Google Chrome console and in notification popups.

View Chrome extension

SEO (Search engine optimization) Chrome extensions

SITEMAP GENERATOR
Seo Tool for Sitemap Generation, broken links detector and duplicates detector. Free and online. Creates sitemap.xml file according to Google sitemap protocol. It is unlimited — proper sitemaps for more than 100,000 pages sites were created.

View Chrome extension

SPEED TRACER
Speed Tracer is a tool to help you identify and fix performance problems in your web applications. It visualizes metrics that are taken from low level instrumentation points inside of the browser and analyzes them as your application runs.

View Chrome extension

YSLOW
YSlow analyzes web pages and suggests ways to improve their performance based on a set of rules for high performance web pages.

View Chrome extension

PAGE LOAD TIME
This extension measures page load time and displays it in the toolbar. Web Timing API is used for precise measurement (Google Chrome version 6+ required).

View Chrome extension

PAGE SPEED TEST
This extension provides accurate timing data for navigation and page load events, for any page.

View Chrome extension

Other helpful Google Chrome Extensions

WEBSECURIFY
Websecurify Chrome Extension brings the power of the Websecurify Automated Web Application Vulnerability Discovery Engine right into your Google Chrome web browser.

View Chrome extension

REGULAR EXPRESSION CHECKER
Simple regular expression checker/tester.

View Chrome extension

CHECK MY LINKS
‘Check My Links’ quickly finds all the links on a web page, and checks each one for you. It highlights which ones are valid and which ones are broken, simple as that.

View Chrome extension

Leave a Reply