Best Chrome Extensions for Web Developers
Best Chrome Extensions for Web Developers Table of contents
- Best Extensions for Chrome
- JSONView View json in a nice and pretty view. Also validate it
- Web Developer adds useful features for web development
- CheckBot Check your website for SEO and other potential problems
- DevTools Autosave Save CSS/HTML changes to disk
- Site Spider Spider a website, find broken links + more
- Page Ruler Quickly make measurements on your websites
- Web Developer Checklist Useful list of things to remember to do
- Other extensions worth a mention:
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.
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
header for this extension to work.
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.
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.
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
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).
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.
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.
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.
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.