The first one on our list is a simple but extremely useful extension called JSON Formatter. As the name suggests, whenever you open up a JSON file in the browser or look at a response from your backend endpoint, the JSON formatter simply formats it. Otherwise, it would be completely unreadable.
So if you're ever working with JSON, this lightweight the extension is a must in my book.
The second extension on our list is called ColorZilla. This extension allows you to read the color value from any pixel in your browser and paste it into your code editor. It can also do so much more.
It includes a Color Picker, Eye Dropper, Gradient Generator and many additional advanced color tools. It allows you to get a color reading from any point in your browser, quickly adjust this color and paste it into another program such as Photoshop.
Some of the nice features
- Color History of recently picked color_
- Advanced Color Picker (similar to PhotoshopYsX
- Displays element info like tag name, class, id, size..r
- Keyboard shortcuts and more.
The next extension on our list is a must-have for any React developer, and it's called - React Developer Tools. 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.
One addition to our React DevTools extension is Redux Devtools. Redux is a state management tool widely used with React. This extension will help you analyze the changes in the global state. You can see how the state looks like after each dispatched action. If your project is using Redux, I would definitely recommend this extension.
When surfing the web, we often come across a website that uses a beautiful font that we want to reuse in our projects. To quickly find out what font it is we can use the extension called FontsNinja.
Fonts Ninja helps to identify fonts and provide information about them.The algorithm examines the fonts as well as their CSS properties.
After the extension installation in the browser, click on the extension to enter the detection mode of Ninja Font. Now, if you hover on any text, you would see a small tooltip with the font type. More to that, if you click on the text, you would see a nifty card with the information comprising font type, font size, color, etc. As simple as that.
Ever wondered what’s the line-height, font, or button size on a website? Do you dig in code by inspecting elements to find out what styles are used? You won't have to do that anymore.
CSS Peeper is the extension that can help you with this Inspect styles in a simple, well-organized & beautiful way by using this extension called CSS Peeper. It enables you to inspect code, check the hidden CSS style, colors and assets in the easiest possible way.
Are you frustrated with the pop-up that comes on mostly every website like "This website uses cookies"? If yes, you can remove it using the "I don't care about cookies" extension. It removes cookie warnings from almost all websites!
The EU regulations require that any website using tracking cookies must get the user's permission before installing them. Imagine how irritating that becomes when you surf anonymously or if you delete cookies automatically every time you close the browser.
Fake filler helps you fill form fields with randomly generated fake data.
When working with forms sometimes there are lots of input fields in the form, and to test that everything is working fine we have to fill each and every field again and again. And we all know that code doesn't work on the first attempt. So to eliminate the task of manually entering values in fields, we can use Fake Filler.
It is the form filler to fill all input fields on a page with randomly generated fake data. This extension will save you hours you would otherwise spend on filling lengthy forms. It allows you to automate the workflow for even better efficiency. The next time you're developing a form or testing an application.
Have you ever been in a position, where you worked day and night to develop the website, only to be bashed by a client stating that the website isn't
responsive for his Nokia 3310 or some random off- brand device? Hard truth is - the website should be
fully responsive for nearly all screens possible. Be that for upcoming 8k screens or a little tiny Galaxy Folds.
Whether you are learning React, Angular, Vue, or if you Responsive Viewer comes to the rescue. This extension shows multiple screens in one view. The crazy thing is, you don't have to test the design or the functionality device per device. You can test all the devices simultaneously.
Whether you are learning React, Angular, Vue, or if you still haven't decided on which one to use, you'll find this extension extremely useful. What makes a perfect framework? Is it the one that's developed by the largest companies? Or maybe the one most widely used. Wappalyzer will answer all of your questions.
I'm sure at some point of your web dev journey you would've wondered about any website that what technology is this built with. To easily find out you can use Wappalyzer, it's a technology profiler that shows you what websites are built with. Find out what CMS a website is using, as well as any framework, eCommerce platform, JavaScript libraries, and many more. Wappalyzer is more than a CMS detector or framework detector: it uncovers more than a thousand technologies in dozens of categories such as programming languages, analytics, marketing tools, payment processors, CRM, CDN, and others.
The Web Developer extension adds a toolbar button to the browser with various web developer tools. It's really handy when developing websites as it gives many things that we can use to test and work with. Yeah, that's the extension's name. Web Developer provides many web-related tools. There are plenty of great features. The most useful ones are:
CSS - View/Edit CSS of the entire webpage or a single element
Images - Get the source list of complete images with their path or dimensions.
Cookies - Disable or delete domain/session cookies. Add cookies or receive the information of the existing.
SVG-grabber is helpful tool to quickly preview and get all the svg assets from a website. You can quickly preview and copy or download all the SVG assets from a website. svg-grabber lets you preview, download & copy the code all SVG icons and illustrations in a website.