Best Chrome Extensions for Web Developers
I love Google Chrome. Its simplicity, speed and performance are top notch, undoubtedly. But sometimes, being too simple is also a problem, especially for us web designers who rely heavily on Firefox addons like Web Developer. I walked away from Chrome, yeah, just because it had no addon back in 2008.
But now, everything changes again. It has no surprise that other geeks are having the same love to Chrome and they decided to create Chrome Extension, which has similar function to Firefox Addon. I digged into those extensions and was very satisfied to them, therefore I decided to pick up 40 extensions which is extremely helpful for web designers and share with you guys.
So here they are for you, gear your Chrome and boost your productivity up.
Just as its name, ColorPicker is a convenient extension created mainly to pick and get color’s value from anywhere on the web page. Additionally, you can pick an area then click on the color palette to see how the area’s color changes without touching any code.
Having headache on finding color scheme from image? Chrome palette solves your problem efficiently by create up to 64 color palettes from website’s image for your design or inspiration needs.
Colour Tweaker can modify the color of the website as Color Picker does, but with a more specific method. Just input the CSS selector on this extension then tweak the color of the text, background and border color to your will.
No more guessing and tiring program switching, Font Editor allows you to modify and observe font setting like size, line height and variant lively.
As specified in its name, this extension allows you to preview font from Google Font Directory with text styling options which are size, style, weight and shadows. If you are satisfied with particular font, you can copy and paste the link and the CSS code provided in the extension to your website’s code to use the font.
Probably the must-have extension for web designer and developer. From viewing script to display object information, Web Developer aims to provide every piece of information you need from an existing website. The extension is also armed with useful tools like color picker, window resizer, validator, etc.
Lightweight and handy developer tool that’s similar to the Web Developer, but only equipped with necessary tools like style viewer, source viewer and validator.
Different from what it is in Firefox, Firebug Lite offers Firefox-like visual representation when it comes to HTML elements, DOM elements and Box Model Sharing. It also comes with the ability to inspect HTML elements with your mouse, and you can edit CSS properties with this extension lively.
Stylebot grants you the ability to style any website directly without touching CSS code, which saves a lot of typing work. The best feature of this extension is probably its ability to generate CSS code for your use everytime you make a change to the website.
Tired of pushing ‘Inspect Element’ everytime you want to know what CSS style is applied to certain element? CSS Viewer helps you by display essential information such as font, color and positioning of the element lively.
Reloads CSS stylesheet without refreshing entire website, which greatly saves your waiting time especially for designer with slow internet connection.
The coolest part of this extension is it lists out every implemented web technology such as frameworks and web standard with very detailed information.
Proved to be the most similar one to the original Internet Explorer, IE Tab Multi is your Internet Explorer within Chrome which supports tons of IE’s default feature like multi tabbing.
With Window Resizer, you can test your website’s screen resolution compatibility with standard or user-defined screen resolutions.
One of the best validator extension that can validate HTML code of online or localhost web page in either auto or manual mode. You can also choose to show the validation result in the web page or view it in a completely new tab.
With various theme and font options, Sight highlights the source code of the website into a more visually comfortable form.
Being bugged by PHP erros but don’t know what and where it is? PHP Console assists you by display errors, exceptions and debug messages in notification form.