Here are a few chrome extensions that could make coding fun for developers and can help to increase their productivity
1. CSS SCAN
CSS SCAN is the smartest browser extension for CSS inspection. You can understand how everything works without wasting time hunting through infinite CSS rules on the browsers' Dev Tools. If you want to copy the CSS of an element, it's a pain. With CSS Scan, you just click, and it's yours. It copies all child elements, pseudo-classes, and media queries.
2. React Developer Tools
This one is a must-have for any React developer. This extension doesn't do anything if you click on it, but rather, it adds two new tabs in your Chrome DevTools: "Components" and "Profiler".
If you've ever used React JS, then you know that
everything in React is a component.
The Components tab shows you the root React components that were rendered on the page, as well as the subcomponents that they ended up rendering. By selecting one of the components in the tree, you
can inspect and edit its current props and state in the panel on the right. The Profiler tab allows you to record performance information.
3. WhatFont
WhatFont is a very useful Chrome extension for developers who need to identify fonts used on web pages. It’s fast, effective, and identifies individual fonts within a page in seconds. It also identifies the family, size, weight, and color. All within a small popup window in the browser.
4. HTML Validator
HTML Validator is a quick tool for checking your HTML within a browser. It is a browser extension that adds HTML validation inside the Developer Tools of Chrome. The number of errors of an HTML page is seen with an icon in the browser status bar. The details are seen in the developer tools.
5. FakeFiller
Fake Filler is the form filler to fill all input fields on a page with randomly generated fake 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.
Top comments (0)