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.

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

Modern Web App Devtools

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:

JSON Viewer - Pretty print JSON and JSONP directly in the browser.

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

Wappalyzer - A Chrome extension that helps you identify technologies used on a website.

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

Clear Cache - A Chrome extension that provides a quicker way of clearing your cached data.

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

ColorZilla - A Chrome extension for identifying colors on a page.

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

Ghostery - A Chrome extension that guarantees privacy online.

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

Dimensions - A Chrome extension for measuring distances between elements on a page.

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

Page Ruler - A Chrome extension that helps you measure elements on a page.

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

UX Check - A Chrome extension that helps you identify usability issues on a web page.

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

Check My Links - A Chrome extension that helps you check broken 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

Web Developer Checklist

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

Web Developer Toolbar

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

WhatFont Chrome Extension

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

Font Face Ninja -  A Chrome extension that allows you to identify fonts on a web page.

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

EditThisCookie - A Chrome extension for editing cookies

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

CSS Shapes Editor - A Chrome extension that allows you to visually edit CSS Shapes

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

HTML Validator - A Chrome extension for validating HTML markup

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

LightShot - A free Chrome extension that helps you screenshot various sections of your site.

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

Full Page Screenshot - A Chrome extension that allows you to take full page screenshots

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

Pesticide - A Chrome extension that allows you to easily debug CSS layout problems

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

Session Buddy - A Chrome extenstion that allows you to manage and store your sessions for later use.

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

Window Resizer - A chrome extension that allows you to simulate responsive viewports.

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

TypeWonder - Test and visualize any web fonts on your site.

23. TypeWonder

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

Check it Out

Corporate Ipsum - A Chrome extension that generates filler text with a corporate feel to it.

24. Corporate Ipsum

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

Check it Out

Lorem Ipsum Generator - A Chrome extension that generates filler Lorem Ipsum text.

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. 😁

Catalin Vasile

Catalin Vasile

Catalin is a design focused engineer and founder of DesignRevision. When he’s not working on a project, he likes to read, watch movies and take long hikes.

πŸ€” What do you think?

Introducing

Shards Dashboard Pro

A premium & high-quality Bootstrap 4 admin dashboard template pack.

Here's a 10% discount code! DR10OFF Check it Out