Advertisements

Chrome Extensions that I use for Web Development

Lately, I been working on an application to track news, my focus has been to code the function of reading RSS feeds, parse the feed’s data into the database and then building a view to display the new news items. For this, I have been working with PHP in the backend and Javascript/JQuery on the front end.

I like to use Chrome for all my web development work, I assume you are probably very familiar with Chrome and know that there are literally hundreds of Chrome extensions available for web designers, what I want to do is to let you know what Chrome Extension works best for me.

Advanced Rest Client

Advanced Rest Client – The web developers helper program to create and test custom HTTP requests.

Advanced REST client - Chrome Web Store

Feed Intent Viewer

Feed Intent Viewer – Web Intent to view RSS and Atom feeds as pretty-printed XML.

Feed Intent Viewer

Chrome Logger

Formerly known as ChromePHP, Chrome Logger is an extension for debugging server-side applications in Chrome.

Chrome Logger - Chrome Web Store

DomFlags

DomFlags is a DevTools extension that allows you to create keyboard shortcuts/bookmarks to DOM elements so that inspecting can be achieved much quicker.

chrome_extension_domflags

Validity

Validity – Quickly validate your HTML docs.

Validity - Chrome Web Store

Flat Colors Guide

Flat Colors Guide – An extension for quick access to flat color schemes.

Flat Colors Guide - Chrome Web Store

Web Developer Checklist

Web Developer Checklist – An essential checklist for launching a new site.

Web Developer Checklist

Dimensions

Dimensions is an open-source extension for measuring screen dimensions. It’s a handy tool for when you’ve been given a new graphical UI mockup; just open it in Chrome, activate Dimensions and start measuring.

Dimension

45to75

45to75 is a simple character counter for optimizing line-length between 45 and 75 characters, thus ensuring that text line lengths meet their standards.

45to75 - Chrome Web Store

Minimalist Markdown Editor

The Minimalist Markdown Editor app is perhaps the ‘simplest and slickest’ Markdown editor currently available for Chrome. It allows you to view the markup as you type and also features a one-click HTML conversion tool.

Minimalist Markdown Editor - Chrome Web Store

Window Resizer

Yes, there are many Chrome extensions available that allow you to test your responsive designs at different resolutions, this one just happens to be my favorite. Window Resizer does exactly what you would expect, it re-sizes the browser’s window in order to emulate various resolutions.

Window Resizer - Chrome Web Store

Sourcegraph

Sourcegraph allows you to browse Github code just as though you were using an IDE. It adds instant documentation and type tooltips to the code view on GitHub, and it also makes every identifier a jump-to-definition link.

Sourcegraph - Chrome Web Store

jQuery Audit

jQuery Audit is a Developer Tools extension for easily auditing jQuery.

jQuery Audit - Chrome Web Store

PHP Console

PHP Console is an extension that allows you to handle PHP errors & exceptions, dump variables and also remotely executes PHP code.

PHP Console - Chrome Web Store

ModHeader

ModHeader is an extension that can add and modify the HTTP request headers sent to web servers.

ModHeader - Chrome Web Store

EnjoyCSS

The EnjoyCSS extension allows you to access all of the handy CSS3 tools from the EnjoyCSS website all within the comfort of an extension. You can create ‪2D‬ & ‪3D‬ transforms, multiple complex ‪transitions‬, multiple linear and radial ‪‎gradients‬, text shadows and everything else you can think of.

EnjoyCSS - Chrome Web Store

SnappySnippet

SnappySnippet will grab the CSS & HTML from any selected element and with just one click will send the code to either CodePen, jsFiddle or JS Bin for further editing/testing.

SnappySnippet - Chrome Web Store

Fontface Ninja

Fontface Ninja is an interesting extension that not only allows you to discover what fonts are actually being used on a website but also allows you to download them as well. The developers of this extension implore you to not abuse its functionality.

Fontface Ninja - Chrome Web Store

Type Sample

Type Sample is a tool for identifying and testing the web fonts from any page. You can edit the size, create your own text and also save your work. There’s also a bookmarklet available.

Type Sample

Google Font Previewer

Google Font Previewer is a handy extension that allows you to access the Google Font API directory and choose a font, and then either apply it to the entire page or a specified CSS selector.

Google Font Previewer for Chrome - Chrome Web Store

PageSpeed Insights

This is the official extension for Google’s PageSpeed Insights app. It allows you to evaluate the performance of your web pages and offers suggestions on how to improve them. To learn more about PageSpeed Insights you should have a look at this post.

PageSpeed Insights  by Google  - Chrome Web Store

Concluding

As I mentioned previously, there are hundreds of Chrome extensions available that will help your web design and development workflow, and I’m pretty confident that I have missed a few that you guys will probably deem essential. I would love to hear about them in the comments below.

Advertisements

Leave a reply:

Your email address will not be published.

Site Footer

Sliding Sidebar

Subscribe for updates

Enter your email address to subscribe to receive notifications of new content by email.

Join 5,788 other subscribers

Advertisements