Best Chrome Extensions for Web Developers

Best Chrome Extensions for Web Developers Thumbnail image

Best Extensions for Chrome

Chrome has almost 2/3rd of the browser market share (source). It has some powerful built in features for web developers. Even if you don't use it as your primary browser, you should be at least testing your websites in Chrome (and other browsers). Here is a selection of the chrome extensions that I find useful (as of late 2018) for webdev related activities.

JSONView View json in a nice and pretty view. Also validate it

JSON is a very common human readable format for text. If you do web development, you probably know about it (and if not, you should read up about it).

Although it is technically human readable even if just presented on a single line of plain text, it is much nicer to have some formatting there. This is what the "JSONView" chrome will do.

It also allows you to validate JSON.

It auto detects JSON content (so you don't need to worry about the Content-Type: application/json header for this extension to work.

JSON View

Web Developer adds useful features for web development

Although you could argue that half of the features in the Web Developer plugin can be done in the built-in Chrome inspector tools, it is useful to have this extension installed. Despite it sharing similar features to what is built in to Chrome, it has over 1,000,000 users.

It is especially useful for very quickly outlining certain types of elements, or adding additional information to the page.

Web Developer Chrome Extension

Another related extension that shares features that are built into Chrome is Window Resizer. It lets you very quickly resize to different standard window sizes to emulate different devices. It has over half a million users, but I don't personally use it as you can just do this in the Chrome inspector.

CheckBot Check your website for SEO and other potential problems

As of the time of writing, this extension is free. But I think in the future they will start charging a monthly fee.

You can use this extension to test your site follows SEO, speed & security best practices.

It also crawls for broken links, duplicate titles, invalid HTML/CSS/JS, redirect chains and more

Check SEO and other things in this Chrome Extension

DevTools Autosave Save CSS/HTML changes to disk

This extension is useful for people who like to tinker and make changes in the Chrome DevTools panel (I find it useful for CSS changes) and want to save those changes to disk.

Go to their Github for setup instruction (you have to set up a little server too).

Auto save devtools Chrome Extension

Site Spider Spider a website, find broken links + more

Also consider the above extension Checkbot as an alternative for this!

Site Spider is a useful Chrome extension for spidering your whole site. Of course, you can just do this a whole range of other tools (or websites) but it is nice to have it built into a browser to quickly load it up.

One nice advantage of using this as opposed to other tools (especially command line based tools) is that this extensions actually loads up each URL in a Chrome tab, so it should (in theory! It doesn't work 100% of the time) see exactly what a normal user will see, including anything on the DOM that was generated by JS.

Site Spider Chrome Extension

Page Ruler Quickly make measurements on your websites

Sometimes when designing a site you have to measure things (for example when resizing image max widths, I find it is easier to measure what it should look like, then add that to the CSS rules rather than editing the CSS, refreshing, then making further adjustments until it is the correct size.)

For this I recommend the Page Ruler extension. It is quick, simple and works well.

Chrome Ruler Chrome Extension

Web Developer Checklist Useful list of things to remember to do

While this extension could easily be replaced by using other websites on the net, it is handy to have an extension that lists all the major and important things to remember to do when developing a site.

You can see from the screenshot below the things that it'll check. It isn't super comprehensive, but useful to have this quick loading extension at hand.

Web Developer Checklist Chrome Extension

Other extensions worth a mention:

IE Tab run Internet Explorer within a tab in Chrome

Windows only!

I remember this from many years ago (probably from Firefox, but I am not too sure). Nowadays I use Mac OS on all my machines, with a VM running Windows for testing on IE/Edge.

But if you are running Windows and want to easy test things in IE, then the IE Tab extension is handy to have installed.

Each screenshot was manually generated on a different Chrome extension, so that is why you can tell (via the toolbar) that only one extension is installed at a time. My normal Chrome extension has many more extensions installed, I never notice a slowdown.

webdevetc profile pic
webdevetc

I am a 29 year old freelance backend web developer from London, mostly focusing on PHP and Laravel lately. This is my site - I mostly write about PHP here. Contact me here (especially for any contracting jobs early 2019 in London ;) ).

Leave a Comment