- read

10 Must-Have Chrome Extensions for Web Developers

Sayyed Hammad Ali 29

1. wappalyzer

This is my favorite browser extension. I almost use it daily, when I need to find out the technology stack used by a website. It will tell you about the CMS a website is using, framework, eCommerce platform, JavaScript libraries, and much more.

It reveals a lot more than just technology stack, i.e., categories such as programming languages, analytics, marketing tools, payment processors, CRM, CDN and others.

2. WhatFont

WhatFont is also a very useful extension to find out what fonts have been used by the web page. With this extension, you could inspect web fonts by just hovering on them. And clicking on the font of the page you get more detailed information. It also finds the services used for serving the web fonts. Supports Typekit and Google Font API.

3. Tab Resize — split-screen layouts

A very helpful extension for the users who want to open 2 or more browser windows parallel. This extension made split screen very easy. Resize the current tab and tabs to the right into layouts on separate windows. It really improves your productivity because you don’t have to switch to multiple browser screens again and again but you can see them parallely.

4. EditThisCookie

EditThisCookie is a cookie manager extension which is very useful for developers. You can add, delete, edit, search, protect (read-only cookies) and block cookies (cookie filter) very easily. You can also export cookies in JSON, Netscape cookie file (perfect for wget and curl). And also you can import cookies in JSON. You can limit the maximum expiry date of any cookie and also improve the performance by removing old cookies.

5. ColorZilla

The most favorite chrome extension for web designers and software developers is ColorZilla. An Eyedropper, Color Picker, Gradient Generator and other colorful goodies. It is one of the most popular Chrome/Firefox developer extensions with 5 million-plus downloads. Using this extension you can get a color from any point/pixel in your web browser, quickly adjust this color and paste it into another place, where you need it. It has a lot more features as well:

✓ Eyedropper to get the color of any pixel on your web page.
✓ Advanced Color Picker same as Photoshop’s.
✓ Ultimate CSS Gradient Generator.
✓ History of recently picked colors.
✓ Displays element information like tag name, class, id, size, etc.
✓ Auto copy picked colors to clipboard.
These are not all but just some of the features, check out the extension to explore more.

6. BrowserStack

If you are a web developer and want to Instantly test your webpage on any desktop or mobile browser, then how can you do it?
You can BrowserStack Quick Launch Extension. It can set up to 12 browsers for quick access and minimize the time spent in switching browsers. You can review changes immediately and do cross-browser testing to improve your developed product.

Your webpage will be launched in the combination selected. Test this webpage using BrowserStack’s DevTools, check page behavior in real user conditions and file bugs directly.

NOTE: You need to have a BrowserStack account to use this Chrome extension. You can sign up from the extension or use this link: www.browserstack.com/users/sign_up

7. Lorem Ipsum Generator (Default Text)

I guess many of the developers have used the Lorem Ipsum to copy placeholder text during development. Lorem Ipsum Generator is a very handy extension which provides an elegant and quick way to create default text or generate Lorem Ipsum. It is optimized for quick usage, and can be customized as well.

8. Clear Cache

When you request the same page multiple times, the browser shows you the cached page. In simple words, browsers provide you a copy of the last version of this page you visited, so as not to waste resources. But as a developer sometimes you don’t want to see a cached page and you have to go to the browser setting and clear the cache/memory to see the updated version of the page. In this case, this extension is very handy. It clears your cache and browsing data with a single click of a button. Quickly clear your cache with this extension without any confirmation dialogs, pop-ups, or other annoyances. You can customize which of your data should be clear on the options page, including: App Cache, Cache, Cookies, Downloads, File Systems, Form Data, History, Indexed DB, Local Storage, Plugin Data, Passwords and WebSQL.

9. Check My Links

It’s very bad for SEO and UX if your web page has any broken links. This extension comes in handy when you need to check if there are any links broken on your page. If your page has a lot of links then, this extension will scan your page and give you information about broken links. ‘Check My Links’ is the best extension developed for web designers, developers and content editors. You can copy all bad links to your clipboard with one click, how awesome is that.

10. JSON Formatter

Almost every software developer is working with APIs these days. When you are requesting an API which gives some JSON data in response, by default, this JSON response is not formatted nicely to read. But thanks to this useful Chrome extension JSON formatter, it will format your JSON response in a pretty nice and readable format. It has some other amazing features as well:

✓ JSON & JSONP support.
✓ Syntax highlighting.
✓ Collapsible trees, with indent guides.
✓ Clickable URLs.
✓ Toggle between raw and parsed JSON.
✓ Works on any valid JSON page.
✓ Works on local files too just the chrome extension should be enabled.
✓ You can inspect the JSON by typing “json” in the console.

https://chrome.google.com/webstore/detail/jsonformatter/bcjindcccaagfpapjjmafapmmgkkhgoa?hl=en)

I hope these extensions will also help you to improve your productivity. If you know some more useful extensions feel free to share in the comments.