Google Chrome is one of the most reliable and polished web browsers available to us. It has an extensive library of extensions that you can easily integrate into your browser to make your life easier. Here, we will look at 12 handy tools that can make development easier.
1. ColorPick Eyedropper
ColorPick Eyedropper is a zoomed eyedropper & color chooser tool that allows you to select color values from web pages and more. It can quickly identify any color on any web page and zooms in, and select a border 1px wide.
To use it, simply click on click on the color wheel icon to activate it, and your cursor will change to a crosshair to indicate that the extension is active. Then, simply hover over the section you want to identify, and it will show you the RGB values along with the HEX value.
1,000,000+ users
Average Rating: 4.3 out of 5.
2. Grammarly for Chrome
Grammarly is one of the best and most helpful Chrome extensions available on the market. If you make lot of mistakes in emails or write many articles , Grammarly has got you covered. Grammarly helps you eliminate writing errors and find the perfect words to express yourself, from grammar and spelling to style and tone. You’ll get real-time feedback from Grammarly on Gmail, Google Docs, Twitter, Linked In, and nearly everywhere else you find yourself writing.
You can also register your account to receive a personalized writing report each week to help you track your progress and identify improvement areas.
10,000,000+ users
Average Rating: 4.6 out of 5.
3. Window Resizer
Window Resizer is an extremely useful yet simple tool that lets you resize the browser window to emulate various screen resolutions. It comes in handy when working with responsive designs or apps.
The most common sizes are covered, mobile, tablet, desktop, and the emulation are accurate. The extension also features customizable global key shortcuts, an option to export your settings and import them on another computer, and more.
600,000+ users
Average Rating: 4.3 out of 5.
4. CSS Viewer
CSS Viewer, as the name suggests, is a simple CSS property viewer. This add-on shows you the CSS properties of a given page wherever you hover your mouse. A small popup window appears, showing you the CSS data that makes up the element you’re pointing at.
100,000+ users
Average Rating: 4.4 out of 5.
5. Wappalyzer
Wappalyzer is a technology profiler that uncovers the underlying secrets behind a website. It quickly identifies web services, CMS type, analytics tools, plugins, JavaScript libraries, and a whole host of other apps.
Just install the extension, select it while on a page, and a popup window will appear highlighting all identifiable apps running on that page.
1,000,000+ users
Average Rating: 4.6 out of 5.
6. Picture-in-Picture
Picture-in-picture is a Chrome extension that is offered by Google. It allows you to watch videos in a floating window (always on top of other windows) so you can keep an eye on what you’re watching while interacting with other sites or applications.
You can enable the extension by the keyboard shortcut: Alt + P (⌥ + P on macOS).
1,000,000+ users
Average Rating: 4.1 out of 5.
7. Fake Filler
Fake Filler is a form filler that fills all inputs on a page with fake/dummy data. This productivity-boosting extension is a must for developers and testers who work with forms as it eliminates the need for manually entering values in fields. The plugin also ignores any captcha, hidden, disabled, and read-only fields.
100,000+ users
Average Rating: 4.4 out of 5.
8. JSONView
This extension is helpful for developers who regularly work with JSON files. It will help validate and view JSON documents easily. This extension makes it easier to view JSON data in a tree format rather than in raw format, which is difficult to read.
1,000,000+ users
Average Rating: 4.6 out of 5.
9. React — Developer Tools Extension
React is a Chrome DevTools extension or Chrome plugin that provides the open-source React JavaScript library for a website or web page. Upon installation, You will get two new tabs in your Chrome DevTools:
“ Components” and “ Profiler”.
The Components tab shows you the root React components that were rendered on the page and the subcomponents that they ended up rendering.
The Profiler tab allows you to record performance information.
2,000,000+ users
Average Rating: 4.1 out of 5.
10. Ghostery — Security Extension
Ghostery is a powerful privacy extension. It blocks ads, stops trackers, and speeds up websites. Ghostery’s built-in ad blocker removes advertisements from a webpage to eliminate clutter, so you can focus on the content you want. It allows you to view and block trackers on websites you browse to control who collects your data. It’s Smart Blocking feature speeds up page loads and optimizes page performance by automatically blocking and unblocking trackers to meet page quality criteria.
2,000,000+ users
Average Rating: 4.6 out of 5.
11. GoFullPage
GoFullPage lets you capture a screenshot of your current page in its entirety without asking for any extra permissions. Click on the extension icon (or press Alt+Shift+P), watch the extension capture each part of the page, and be transported to a new tab of your screenshot where you can download it as an image or PDF or even just drag it to your desktop.
You can also crop, annotate, and add your favorite emojis to any screenshot with the new premium editor.
4,000,000+ users
Average Rating: 4.9 out of 5.
12. Dark Reader
This extension basically applies dark mode on all the websites or the ones that you choose. Dark Reader inverts bright colors making them high contrast and easy to read at night.
You can adjust brightness, contrast, sepia filter, dark mode, font settings, and ignore-list.
3,000,000+ users
Average Rating: 4.7 out of 5.
Originally posted at raftlabs.co
