No one questioned the recognition of Google. Which began as a tool of the internet search engine that has turned into a huge media company that also has changed the way you live.Google Chrome is a browser alternative, which is growing and expanding rapidly to beat Opera in many ways. I love Google Chrome. Its functionality, simplicity, performance and speed are top notch, undoubtedly. Compared to the other major web browsers, Google Chrome is still relatively new. However, it's popularity continues to grow rapidly.
In this post, I have put together a bunch of best extensions for google chrome. If you are a graphic designer, you'll like at least three such tools, and maybe here you'll find some extensions that you do not have! Web Design / Graphics is indeed a difficult task, but with Google Chrome Extensions below can facilitate your work to make it faster and easier. hope this will be useful. So This is a list of 45 useful Google Chrome Extensions for Designers and Developers.
45 Best Google Chrome Extensions for Designers and Developers
1. Pixlr Express
Pixlr express is a smooth and modern photo editor, with all the effects, overlays and borders from the popular pixlr-o-matic but with more control. There are also lots of adjustments, stickers and a text tool.
Almost 250 effects. borders and overlays as well as focal blur/tilt shift and color splash tools. Several color adjustments and the basic crop, rotate and straighten tools.
2. Lorem Ipsum Generator
This is a Chrome Extension that generates random "Lorem Ipsum" text. It uses a minimalist and well looking design. Many other extensions of this type - in other browsers - simply complicate this task, using really extensive code, XHR, etc. The main purpose of this one, is to use the less amount of code (and also memory) and help the developer/user to get the job done.
You don't need a bazooka to kill a rat, right?
3. The Grids
Browser utility that helps web designers and developers imporove their site perfomace.
The Grids is a browser utility that helps web designers and developers improve their site performance. It allows quickly and easy generate custom modular grid right from your browser. Wide ranges of options will suite any professional needs.
4. Guides
Keep your elements in line with Guides! Check distances, alignments and more to make sure your websites are pixel-perfect.
5. Firebug Lite for Google Chrome
Firebug 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. It provides also some cool features like inspecting HTML elemements with your mouse, and live editing CSS properties.
6. 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 Web Developer extension for Firefox.
7. Palette for Chrome
Creates a color palette from any image. Just right-click on the image and select the 'Palette for Chrome' option.
Do you want to create a color palette that matches an image from your website? Or maybe you just want to grab some colors for inspiration? Then this is the extension for you!
Just right click on the desired image, select the 'Palette for Chrome' option, and choose the number of colors you want the palette to have.
A new tab will open, displaying the image and the resulting color palette. It's that easy!
8. Stylebot
Adapt the web's appearance. Stylebot allows you to quickly manipulate the appearance of any website (using custom CSS).
You pick an element and choose any changes you want to make from the editor. You can change the font size, color, margins, visibility and a lot more. The advanced users can also write the CSS manually.
Using Stylebot, you can personalize the look and feel of your favorite websites. It is also a great tool to learn CSS and for debugging your own site's design.
9. Stylish
Restyle the web with Stylish, a user styles manager. Stylish lets you easily install themes and skins for Google, Facebook,…
User styles are themes for web sites. User styles empower your browsing experience by letting you customize web sites. Take out irrelevant content, change colors, or completely redesign the entire site.
Stylish lets you easily manage user styles. Add, delete, enable, disable, and organize with a few clicks of a mouse, no code to edit, no obscure configuration to find. Stylish's companion website, userstyles.org, hosts tens of thousands of user styles made by other Stylish users that you can try.
10. Font Editor
Change and test fonts on a website.
Use this extension to test different fonts, font sizes and much more on any website.
Click on the *F* to minimize.
11. Sight
Sight is the Syntax Highlighter Chrome extension that makes reading code on the browser a joy.
You can choose the theme, font and enable line numbers on the options page.
12. WhatFont
The easiest way to identify fonts on web pages. What is the easiest way to find out the fonts used in a webpage? Firebug and Webkit Inspector are easy enough to use for developers. However, for others, this should not be necessary. With this extension, you could inspect web fonts by just hovering on them. It is that simple and elegant.
It also detects the services used for serving the web fonts. Supports Typekit and Google Font API.
13. Speed Tracer (by Google)
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.
Using Speed Tracer you are able to get a better picture of where time is being spent in your application. This includes problems caused by:
- Javascript parsing and execution
- Layout
- CSS style recalculation and selector matching
- DOM Event handling
- Network resource loading
- Timer fires
- XMLHttpRequest callbacks
- Painting
- and more ...
14. HTML Validator
HTML Validator is an extension to validate the HTML code of the current web page. Have it run automatically, click the icon for a menu or press any of the keyboard shortcuts (see below) to validate the current web page.
You can choose to get the validation results directly inline in the current web page or open them in a new tab with the W3C validator results, both for public URLs and local HTML (i.e.code in a page that is not globally accessible on the Internet).
15. CSSViewer
CSSViewer is a simple CSS property viewer for Google chrome originally made by Nicolas Huon as a FireFox addon.
16. Live CSS Editor
This extension provides a text box on any HTML page so that you can write CSS freely and immediately see the results. I use it every day for quick edits, product demos and other testing out new ideas.
The extension options allow you to set a default key command to open and close the editor; turn off the warning that is shown when you close the editor; and enable or disable the automatic saving of your changes when you close the editor.
17. CSS Reloader
CSS Reloader is a browser extension that allows you to reload CSS without reloading the page itself.
18. IE Tab Multi (Enhance)
IE Tab Multi is a most similar to original IE,Internet Explorer behavior.
You can see IE only site without leaving Chrome and you can run ActiveX controls.
This extension supports only Windows.
This extension supports Chrome 6 and above.
19. Refresh Monkey
Automatically refresh a page at set interval. Monitor the page for a change and get notified in case of change. And more.
20. 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. The resolutions list is completely customizable (add/delete/re-order).
21. Grayscale
With this extension you can make your pages show in grey-scale, this will help see potential problems with colours not having enough contrast. You can already see flaws—in terms of color design for good contrast—on your website.
22. Rulers, Guides, Eye Dropper and Color Picker
For UI developers. Pick any color from webpage using eye-dropper tool; display rulers, guides and grid on the page.
23. Pendule
Extended web developer tools for Chrome. Use this extension in addition to the built-in Developer Tools (Ctrl+Shift+I).
24. Greplin
The Greplin extension is easy-to-use: all you have to do is to login into your Greplin account and hit the icon installed in the toolbar.
As a result, you will see a list with icons of some very popular online services and social networks in a pop-up window
You can click on any of the displayed icons to say Greplin that you want it to build an index for your selected item.
25. ruul
A fantastically simple on-screen ruler for lining up and measuring type, line height, strokes and just about anything on the web.
26. Awesome Screenshot
Capture the whole page or any portion, annotate it with rectangles, circles, arrows, lines and text, blur sensitive info, one-click.
27. Check My Links
Check My Links is a link checker that crawls through your webpage and looks for broken links.
'Check My Links' is an extension developed primarily for web designers, developers and content editors.
When you're editing a web page that has lots of links, wouldn't it be handy to be able to quickly check that all the links on the page are working ok? That's where 'Check My Links' comes in.
28. Comps
Comps is an extension inspired by the PixelPerfect Firefox extension. It allows you to load images from your local computer and easily overlay them onto your website for comparing your code against a given design.
29. Google Similar Pages
Enjoying the page you're looking at and interested in other similar pages? Trying to find more pages about a topic you're researching, but having a hard time coming up with the right query on Google? Google Similar Pages can help!
Now you can quickly preview and explore other pages that are similar to the one you are browsing -- on the fly.
30. Aviary Screen Capture
Edit any photo on the web without leaving the page with Aviary's super simple photo editor. Just right-click and select "Edit image in Aviary" to access a variety of one-click editing options!
31. Instachrome
Collect articles on the web to read them later. Service provided by instapaper.com (You'll need an account). Simple button that provides quick saving method to store your articles.
32. Google Font Previewer for Chrome
Lets you choose a font from the Google Font API directory, and apply that font to the entire page or a specified CSS selector to see how it looks. Useful when you're designing a website and want to quickly find a font that will look good. If you always use the same fonts, you can star them for quick access.
33. HTML Instant
Edit HTML code in real-time. Just enter HTML, CSS, or Javascript in the left pane and you will get instant results as you type in the right pane. Great for editing on the fly and for teaching/learning HTML.
34. HTML Validation
This is a small extension giving the HTML validity of the current visited page.
35. Browser Compatibility Detector
Detects web page compatibility issues. Initiated by Google Chrome Team.
36. Neo Vision
Syntax-highlights source code files, like Neo scoping out the Matrix (played by the infallible **Keanu Reeves**). This one is better than all the others because...
- Plenty of good lookin' themes.
- Themes can be easily configured in the options with basic CSS.
- Relies on Google Code Prettify (http://code.google.com/p/google-code-prettify/) for quick and simple syntax highlighting.
- No beautifier/uncompressor included. Whitespace is preserved.
37. Chrome Sniffer
This extension will help web developer to inspect web framework / CMS and javascript library running on current browsing website. An icon will appear on address bar indicates the detected framework. Version detecting is being implemented.
38. Google Mail Checker
Displays the number of unread messages in your Google Mail inbox. You can also click the button to open your inbox.
39. LastPass
LastPass is a free online password manager and Form Filler that makes your web browsing easier and more secure.
40. MeasureIt!
Draw out a ruler that will help you get the pixel width and height of any elements on a webpage. Measure it!
41. SEO & Website Analysis
SEO report is an extension for Google Chrome™ done by WooRank that provides a very deep SEO report for any given website.
WooRank provides many SEO tips for your website to rank number 1 in Google™, Yahoo™ and Bing™. It is a powerful tool for internet marketing professionals, coders, designers, website usability expert, developers ( web development professionals ) and other digital professionals.
42. 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.
43. BuiltWith Technology Profiler
The BuiltWith Chrome Extension lets you find out what a website is built with by a simple click on the builtwith icon!
44. TabCloud
Save and restore window sessions over time and across multiple computers.
45. 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. The resolutions list is completely customizable (add/delete/re-order).
