25+ Best Chrome extensions for web developers in 2018

Here are the best Chrome extensions for web developers and designers that you can use right now to improve your productivity.

Chrome is undoubtedly the most popular web browser in the world right now. It supports a wide range of extensions that go a long way into increasing the productivity and making the work of web developers and designers easier.

Table of Contents

1. Modern Web App Dev Tools
2. JSON Viewer
3. Wappalyzer
4. Clear Cache
5. ColorZilla
6. Ghostery
7. Dimensions
8. Page Ruler
9. UX Check
10. Check My Links
11. Web Developer Checklist
12. Web Developer Toolbar
13. WhatFont
14. Font Face Ninja
15. EditThisCookie
16. CSS Shapes Editor
17. HTML Validator
18. Lightshot
19. Full Page Screenshot
20. Pesticide
21. Session Buddy
22. Window Resizer
23. TypeWonder
24. Corporate Ipsum
25. Lorem Ipsum Generator

1. Modern Web App Dev-Tools

The web platform is constantly changing and with new libraries and frameworks new dev tools appeared to make the developer’s life easier. Using the proper dev tool can not only help you inspect an application’s components, debug its state and monitor how its managing resources but also speed up the entire development process.

Here are the dev tools for some of the most popular frameworks and libraries:

• React Dev Rools
• Redux Dev Tools
• Vue Dev Tools
• Augury
• Ember Inspector

2. JSON Viewer

JSON Viewer formats and prints JSON and JSONP in the browser in a more appealing format. It enhances efficiency by allowing syntax highlighting, collapsible nodes, customizable themes, clickable URLs, the option to show line numbers, and more.

Check it Out

3. Wappalyzer

Wappalyzer helps you identify which technologies are used on any website or application. All you have to do is navigate to a specific page and Wappalyzer will work behind the scenes to uncover all the tools that were used to create it including e-commerce platforms, content management systems, server frameworks or software, analytics tools and more.

Check it Out

4. Clear Cache

Clear Cache provides a quicker way of clearing your cached data (cookies, history, downloads, etc) with a single click of a button and helps by avoiding the process of going through your browser settings to perform this action.

Check it Out

5. ColorZilla

ColorZilla helps you identify any color used on a page by using an interactive color picker. Once active, you can hover your mouse over any pixel and access the exact color code.

Moreover, ColorZilla also provides various color tools that you can use to create palettes and generate gradients.

Check it Out

6. Ghostery

Ghostery guarantees your privacy online by blocking advertisements and trackers and speeding up your web surfing experience so you can focus only on the content you want.

Check it Out

7. Dimensions

Dimensions is an excellent tool for measuring distances between elements on a page. It works by calculating the space from your pointer or selection either up/down or left/right until it hits a border.

This extension is great for regression testing or making sure the implemented markup matches the design specifications.

Check it Out

8. Page Ruler

Page Ruler helps you measure elements on a page so you can make sure that everything is pixel perfect. It does this by rendering a ruler on the web page and lets you accurately inspect elements such as height, width, and position.

Check it Out

9. UX Check

UX Check helps you identify possible usability issues on a web page. It works by reviewing a web page and highlighting certain aspects that need to be improved. These reviews can be exported into a document that can be easily shared or reviewed.

Check it Out

10. Check My Links

Check My Links helps you validate the links on a webpage. It works by crawling through the page and testing out the links to identify which ones are valid and which ones are broken.

Check it Out

11. Web Developer Checklist

The Web Developer Checklist extension provides indications to crucial details in maintaining the best practices while developing websites and applications. The checklist includes recommendations for optimizing performance, responsiveness and many others.

Check it Out

12. Web Developer Toolbar

Web Developer Toolbar adds an extensive set of easy-to-access tools to your browser that helps in streamlining the web development process.

Check it Out

13. WhatFont

WhatFont helps you identify what fonts are being used on a web page by simply hovering over the HTML elements. Additionally, it reveals the services that have been used to serve the identified fonts.

Check it Out

14. Font Face Ninja

On a similar note, Font Face Ninja helps you identify and inspect the fonts used on a webpage. Using it is really simple and all you have to do to identify a font is just enable the extension by clicking on it and rolling over text to get all the font info.

Alternatively, you can also click on any element to try various fonts and bookmark your favorite fonts for later.

Check it Out

15. EditThisCookie

EditThisCookie is a Chrome extension that helps in editing and validating cookies on a website. Additionally, the extension can help you protect, block and bulk-edit cookies in one go.

Check it Out

16. CSS Shapes Editor

CSS Shapes Editor provides a way to edit any CSS shape using an interactive editor that overlaps the selected element. It allows you to see the changes in real time as you edit, without affecting the rest of the elements.

Check it Out

17. HTML Validator

HTML Validator is a Chrome extension that helps you validate HTML elements. It works by inspecting a web page’s markup and highlights the errors and violations found.

Check it Out

18. Lightshot

LightShot allows you to easily screenshot areas of a website. Not only that, but you can also customize and annotate the captured screenshot and then choose to save it to disk, upload it to a server or share it with someone else.

Check it Out

19. Full Page Screenshot

The Full Page Screenshot Chrome extension allows you to make full-page screenshots of the websites you visit by scrolling and capturing each section. After the screenshot is done, you can either choose to download it locally on your computer or send it via email.

Check it Out

20. Pesticide

Pesticide is a Chrome extension that allows you to debug more easily CSS layout problems. It works by providing a quick shortcut for applying an outline to every element on your page.

Check it Out

21. Session Buddy

Session Buddy is a Chrome extension that allows you to save and manage your bookmarks and sessions for later use.

Check it Out

22. Window Resizer

Window Resizer allows you to simulate almost any screen and resolution so you can test your web design on almost any viewport and make sure it’s responsive.

We all know how responsive web design plays a major role on the web, and this small tool is another trick you can use besides the default Developer Tools to make sure that you are providing a consistent user experience on all devices.

Check it Out

23. TypeWonder

TypeWonder allows you to test and instantly preview any web fonts on a website without any hassle.

Check it Out

24. Corporate Ipsum

Corporate Ipsum generates filler “lorem ipsum” text but with a more corporate feel to it.

Check it Out

25. Lorem Ipsum Generator

As the title says, Lorem Ipsum Generator is a Chrome extension that generates classic “lorem ipsum” filler text.

Check it Out

What are your favorite Chrome extensions?

What are your favorite Chrome extensions for web developers? Did I miss anything? Let me know in the comments below if I missed anything. 😁