12 Useful Chrome Extensions for Web Developers & Designers

Google Chrome is a powerful web browser that’s made even better by its abilities to make use of extensions. These extensions can add more functionalities to the browser, going beyond just being able to look up website to the point that Chrome can do about anything you’d expect to do in other software applications. If you’re a web developer or designer looking to use Chrome at its best, check out the Chrome extensions outlined in this guest post!

Depending on what you tend to do in Chrome, there are different extensions available that can help you with just about anything. Check them out here and use them to turn Chrome into a veritable web development test bench.

Frontend Chrome Extensions

MagiCSS

MagiCSS lets you edit the CSS stylesheets of your web pages live, so you can preview changes as you enter them. This is a very useful tool for designers who are trying to get the exact look they’re going for. It also comes with syntax highlighting and code formatting, which is important when dealing with any kind of code.

Snappysnippet

Snappysnippet allows for easy HTML+CSS extraction of specific DOM elements. The resulting snippet can then be exported to tools like CodePen, jsFiddle, or JS Bin easily with just one click. It also lets you clean up and optimize HTML and CSS, and it also features a clean and well-designed user interface.

CSS Shapes Editor

CSS Shapes Editor allows web designers to wrap content around custom paths straight from the web browser. This is done by placing an interactive editor over the selected element, which lets you control it and get instant visual feedback with each change.

CSS Dig

CSS Dig analyzes your CSS by letting you take a look at all your CSS properties, along with their frequency and variations that can reveal inconsistencies. You can also see how long your selectors are and if you’re using a lot of IDs as well.

CSS3 Generator

With the new emphasis on responsive web design, much of the work these days is done with HTML5 and CSS3. CSS3 Generator could save you time with your CSS3 work by giving you a wizard-like approach to sort out styles from a variety of effects and transitions. It also highlights which browsers and versions support the selected effect and if there are specific IE filter codes available.

Live Editor Extensions

PageEdit

Perhaps the quintessential live editor, or at least close to it, PageEdit provides a WYSIWYG interface. This is particularly useful for those who do not know much HTML, CSS, and Javascript code. But even if you know your code, you may still find this helpful as it lets you edit pages without having to mess around with the code, which is good if you happen to have tons of work to go through, all at once.

WordPress Style Editor

For those who use the WordPress blogging content management system (CMS), the WordPress Style Editor can come in quite handy. The problem with WordPress sites is that there’s no preview function for its native editor, so you have to save changes and refresh your website to see if those changes worked. With the WordPress Style Editor, you can potentially get past that by saving the CSS changes made in developer tools in the WordPress stylesheet directly.

Validator & Performance Editor

Web Developer Checklist

As the name suggests, the Web Developer Checklist helps with your web development work by analyzing web pages for violations of best practices. If you’d like to make sure that you’re doing the right thing every single time, this extension can help you maintain your consistency for all the designs you do.

Validity

Validity validates the current web page quickly and easily right from an icon on the address bar or with the hotkey combination Alt+Shift+V. Errors then pop up through Chrome’s JS console, and you can then tackle each issue accordingly.

Bootlint This Page

If you use Bootstrap as a framework for most of your web design work, then Bootlint This Page can help you inject the Bootlint tool into a web page and automatically scan it for common Bootstrap-related errors with one click. You can address issues when necessary afterwards.

Perfmap

Short for performance map, Permap measures one of the most overlooked aspects of a website: its speed. This is done by creating a front-end performance heatmap that shows just how many resources are being consumed by the page, which then lets you find out which parts to tweak and optimize to squeeze out the last bit of performance you can without sacrificing quality.

Check My Links

Check My Links lets you check web pages for broken links, a function that can never be understated. Few things can ruin a website’s SEO and credibility more than an abundance of broken links, and this extension can help you prevent that.

And the best thing about all these extensions is that they’re all free and available for your web browser, so you can basically run them on any computer. If you use your Google account to log in to Chrome, you can choose to have the extensions installed in a new installation of Chrome. Check them out for yourself, test them and we hope they’ll help you perform your web dev and design tasks more efficiently.

Any other extensions you use that make your work more efficient? Let us know about them and we’ll keep updating the story. Should you be looking for useful content to build your own website, check out the resources available on websitesetup.org.

Guest Post

Vincent Sevilla

Web Designer, Websitesetup.org

Vincent Sevilla is a web designer for Websitesetup, a company that provides an easy, step-by-step guide for web developers building their own websites. He has a background in online marketing and is a big fan of creative design.



Add your comment