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.
Top comments (0)