30 Chrome Extensions for Web Developers

Google Chrome is a popular web browser with huge extensions library. This is a list of 30 useful extensions for web developers and designers.

1. Web Developer

The popular tool for web developers with comprehensive tools for develop website.

web_developer

2. Web Developer Checklist

For web developers who wants to make sure they follow best practices. This extension allows you to very easily discover problem areas in your website.

Web Developer Checklist

3. CSS Shapes Editor

With this tool, you can create and adjust CSS Shapes values with an interactive editor overlapping the selected element.

CSS Shapes Editor

4. Responsive Web Design Tester

Nowaday, responsive web design is popular. This tool will help web designer to test website in size of smartphone, tablet or you can create custom size of devices.

Responsive Web Design Tester

5. PageSpeed Insights (by Google)

Google use page speed in web search ranking. To measure your site speed, you can use this extension created by Google. The PageSpeed Insights browser extensions allow you to evaluate the performance of your web pages and to get suggestions on how to improve them.

PageSpeed Insights (by Google)

6. ColorPick Eyedropper

When visit a beautiful website that has great color scheme. You can use this tool to select color values from webpage.

ColorPick Eyedropper

7. StayFocusd

StayFocusd increases your productivity by limiting the amount of time that you can spend on time-wasting websites. You can set one hour per day to allow yourself on Facebook or Youtube.

StayFocusd

8. SEO & Website Analysis

SEO & Website Analysis by WooRank provides a deep SEO analysis covering SEO, Mobile, Local and Usability. This SEO plugin provides a very deep SEO report for any given website.

SEO & Website Analysis

9. Form Filler

Forn Filler is an extension for web developer to test their form with quick and easy. This extension allows you to fill all form inputs (textboxes, textareas, radio buttons, dropdowns, etc.) with random/dummy data.

Form Filler

10. Page Ruler

This extension is useful when you want to measure size of objects on webpage by just drag a ruler.

Page Ruler

11. ColorZilla

ColorZilla is one of the popular color picker with advanced eyedropper, color picker, gradient generator, webpage color analyzer and picked color history.

ColorZilla

12. Wappalyzer

Wappalyzer is a browser extension that uncovers the technologies used on websites. It detects content management systems, eCommerce platforms, web servers, JavaScript frameworks, analytics tools and more.

Wappalyzer

13. IE Tab

IE Tab is popular for test website design in Internet explorer.

IE Tab

14. WhatFont

This extension is useful when you want to know what the fonts used in any web pages.

WhatFont

15. HTML5 Outliner

HTML5 Outliner generates a navigable page outline with heading and sectioning elements in easy way to read as table of content.

HTML5 Outliner

16. Font Playground

Preview your site with Google web fonts and get the css code. Use over 1000 free google web fonts and preview them with this extension. Go to your web page, click on “font playground extension”, select a font and preview the result.

Font Playground

17. YSlow

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

YSlow

18. Instant Wireframe

View website in wireframe. This extension generates any web pages as wireframe.

Instant Wireframe

19. Awesome Screenshot

Nice extension for capture web pages. You can cateure selected area or just capture the whole page.

Awesome Screenshot

20. Nimbus Screenshot

Nimbus Screenshot is another tool for capture web page with easy to use tools.

Nimbus Screenshot

21. Speed Dial 2

Speed dial 2 is ultimate replacement of new tab page with fast access to your most visited pages, bookmarks and browsing history.

Speed Dial 2

22. CSS Dig

CSS Dig finds and groups stylesheets and style blocks on most websites, providing an easy way to analyze the code and plan refactors.

CSS Dig

23. Live CSS Editor

When use this extension, you’ll see a little CSS box for writing CSS code. The web page change immediately when you write new CSS rule.

Live CSS Editor

24. CSS Reloader

This extension reload the page after CSS code changed. You don’t have to manually reload the page.

CSS Reloader

25. MeasureIt

Simple extension use to draw out a ruler to get the pixel width and height of any elements on a web page.

MeasureIt

26. SnappySnippet

SnappySnippet is a DevTools extension that allows you to easily extract CSS and HTML from selected element. Then send it to CodePen, jsFiddle or JS Bin with one click.

SnappySnippet

27. Page Analytics (by Google)

The Page Analytics Chrome Extension allows you to see how customers interact with your web pages, including what they click and don’t click.

Page Analytics (by Google)

28. Window Resizer

You can resize your browser window at the size of smartphone, tablet or any size you want with Window Resizer.

Window Resizer

29. Bootstrap Grid

Useful tool for bootstrap designers. This tool generate grid overlay on your web page.

Bootstrap Grid

30. PHP Console

Handle PHP errors/exceptions, dump PHP vars, execute PHP code remotely and do other cool things using this extension and it’s server side PHP library.

PHP Console