Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

17 Chrome Extensions For Web Developers and Designers In 2019

DZone 's Guide to

17 Chrome Extensions For Web Developers and Designers In 2019

Discover 17 Chrome extensions for web developers and designers.

· Web Dev Zone ·
Free Resource

Google Chrome is without a doubt the most popular browser in the world. In terms of user share, Google Chrome is well ahead of other major browsers like Mozilla Firefox, Safari, Opera, Microsoft Edge, etc. In just over 10 years, Google Chrome has managed to conquer well over 65 percent of the market share. One of the key factors behind its meteoric rise is its huge library of extensions. However, with so many extensions available, it becomes a bit troublesome for users to handpick the extension they may need.

In this article, I am going to highlight 17 Chrome extensions for web developers and designers to boost their productivity and make their lives easier.

1. ColorZilla – Color Picker and Generator

Launched over eight years ago, ColorZilla is one of the oldest color picker extensions. It enables you to get a color reading from any pixel on the browser and paste it in any other program in RGB HEX formats. Just like Site Palette, ColorZilla enables you to generate gradient colors and extract color palettes from any website. The extension also maintains a color history index of recently color picks.

ColorZilla

2. Site Palette – Color Palette Generator

The next time you come across a website with a beautiful and pleasing color combination, this ingenious plugin can help you quickly extract and generate color pallets. It also allows you to download preview palette images and PDFs and generate shareable links. Site Palette is armed with seamless integration with coolers.co and Google Art Pallete. 

Site PaletteSite Palette>

3. Font Face Ninja – Font Identifier

Instead of inspecting elements in Chrome dev tools to find out the name of fonts being used, developers can instead rely on Font Face Ninja to identify all the fonts being used on a webpage. Font Face Ninja boasts over 280,000 downloads. To use this extension, you simply have to hover over any text element on the webpage that you need to identify. A popup up floating window will display the name of the font face, along with a small preview window for you to play around. You can bookmark your favorite font faces and save them for later use.

 Font Face Ninja

Font Face Ninja>


4. Marmoset – Code Snapshot Generator

Web designers and developers may encounter the need to create snapshots for their codes in their projects for aesthetics or representation purpose. Marmoset allows you to create code snapshots with a single click. This might come in handy for social media posts or portfolio website designs. 

Marmoset

Marmoset


5. LambdaTest Screenshots – Cross Browser Testing Extension

I won’t blame developers for missing out on cross-browser testing, as it doesn't initially seem feasible when you look at it. Installing multiple browsers and devices through VMware or any other setup is a hassle. LambdaTest provides a cloud-based platform to perform cross-browser testing on 2000+ real browsers and browser versions for different devices, so you could end up with a cross-browser, compatible website. For desktop devices, you get to test on both Windows and macOS. For mobile devices, you get to test on both Android and iOS.

LambdaTest came up with a Chrome extension to help a user perform automated screenshot testing in bulk. You can perform screenshot testing across 25 devices in a single go. If you found any UI anomaly, then you can share it with your colleagues on your preferred project management tool. 

6. Page Ruler – Dimension and Size Checker

Page Ruler helps web developers to quickly measure dimensions and positioning of any element on the page. This extension draws out a ruler image on the screen, which allows you to inspect individual elements and view their dimension readings — width, height, and positioning.

Page Ruler

Page Ruler


7. Dimensions – Dimension and Size Checker

Dimensions helps to measure distances between various elements on a webpage. Dimensions measures distances from mouse pointer up/down and left/right until it reaches a border. This makes it the perfect tool to measure distances between images, input-fields, buttons, videos, gifs, text, and icons. Another feature that sets Dimensions apart is its ability to work with mockups, as well. If your designer has handed you Page design mockups in Jpeg or PNG formats, drop them inside Chrome and dimensions will work without a hitch. One thing that needs to be noted about Dimensions is that it might not always work consistently well with images

Dimensions

Dimensions


8. Check My Links – Broken Link Checker

Check My Links crawls through the entire webpage, validates each individual link, and reports whether it is valid or not. Check My Links empowers you to copy every broken link to your clipboard in only a single click. Identifying and correcting Broken links is critical for any website for effective On-Page SEO and avoiding penalties from Google Site crawlers.

 Check My Links - Broken Link Checker

Check My Links


9. Clear Cache

Clear Cache helps to wipe your cache and browsing data clean without dealing with popups, dialogue windows, or the Chrome setting window. Furthermore, you can even customize how much data you want to clear on the extension option settings – app cache, cache, cookies, downloads, file systems, form data, history, Indexed DB, local storage, plugin data, passwords, and WebSQL. You can either delete cookies globally or for specific domains.

clear cache

Clear Cache


10. Wappalyzer – Site Analyser(Technology Identifier)

One of the biggest hurdles that developers face when coming across an impressive website face is the intriguing question — Which technologies have been used to make this website? This is where Wappalyzer comes to the rescue. This amazing extension is a cross-platform tool created by Elbert Alias in 2009 that uncovers the names of technologies used to create a particular website. It automatically detects over 1,000 technologies like site generators, frameworks, libraries, plugins, CMS, databases, server software, widgets, analytics tools, etc. You can either use the Wappalyzer website or use the extension for quick usage. 

Wappalyzer

Wappalyzer


11. Ghostery – Privacy Tool

Ghostery is a privacy extension with built-in ad blocker to eliminate annoying advertisements from a website, tracking protection to protect your data, and blocking third party tracking. It also ships with a custom insights dashboard, which you can customize to view relevant information.

Ghostery

Ghostery


12. JSON Viewer – JSON Beautifier And Viewer

If you are working extensively with APIs, especially RestFul APIs or anything which involves JSON data, JSON Viewer makes JSON files helps to arrange JSON data in a visually appealing tree format.

JSON Viewer

JSON Viewer


13. Window Resizer – Screen Size Mockup

This extension is a lifesaver for responsive design coding. Although most developers are satisfied with default Chrome dev tools resizer feature, Resizer can simulate any screen size and resolution of all popular devices. This is quite helpful for developers to test out their layouts on different sizes and validate if their responsive media queries coding is working as intended or not.

Keep in mind though, Window Resizer would only be resizing the viewport to provide you with a near about idea of how your website will render on different screen sizes. For a more accurate and thorough responsive testing, you would need real mobile browsers to validate your website rendering.

duck duck go

DuckDuckGo


14. Sessions Buddy – Tab/Session Manager

Google Chrome is infamous around the world for its massive appetite for RAM usage. Developers with slower systems would constantly face screen freezes and crashes when working with multiple tabs. This is why effective tab management is indispensable, especially when you lose the track of tabs you have opened looking for design inspiration or hashing out a solution on StackOverflow. 

Sessions Buddy offers a bookmark manager with a simple interface. It helps you to save sessions and restore them later when you open them in order to avoid clutter and keep memory free. Also, you need not worry about losing your session if you accidentally close your browser window or your system suffers a crash. Sessions Buddy will restore all your tabs as you left them.

Sessions Buddy - Tab/Session Manager

Sessions Buddy


15. CSS Viewer – CSS Property Viewer

Instead of wasting time looking for CSS properties of an element in the inspector window or the source code, CSS Viewer extracts all the valuable CSS properties and shows them in a floating window. Hover over any element on the web page you want to inspect and the CSS viewer floating window will list out all the key CSS properties under categories — Font and Text (font-family, font-size, font-weight, line-height, text-decoration, text-align), Color and Background (color, background-color, background-position), Box Model Properties (height, width, padding, margin), Positioning, Effects (transforms and transitions) and finally Miscellaneous properties.

CSS Viewer - CSS Property Viewer

CSS Viewer


16. EditThisCookie – Cookie Manager

EditThisCookie is the most popular cookie manager extension in the Chrome Library with over 2.7 million users. This tool allows you to add, delete, search, edit, block, and protect (Read-Only) cookies. Additionally, you can also import cookies in JSON or cookies.txt formats as well.

edit cookie

Edit cookie


17. Web Developer – Web Development Tools Package

This extension adds a toolbar with a complete suite of web development in your browser. The tools offered by this extension are divided into 10 separate tabs — disable, cookies, CSS, forms, images, information, miscellaneous, outline, resize and tools.

These tools include disabling Javascript/plugins/popups/notifications, cookie manager, CSS property viewer and editor, form and image manipulation, window resizer, cache management, page ruler, property inspector, etc.

 Web Developer - Web Development Tools Package

Web Developer Tools Package


Topics:
chrome extensions ,chrome extensions for web testing ,web developers ,web designers ,best chrome extensions ,top chrome extensions ,web developement ,web design tools ,web dev

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}