Top 10 Chrome Extensions for React and Web Developers
Web developer tools you should add to your toolbox
JavaScript is famous for the number of frameworks and tools that are created around it every week, and React, being one of the most popular of those frameworks as of late, “suffers” a similar fate, causing new developers to get overwhelmed when they attempt to start delving into the technology.
So when it comes to picking the right IDE, the right visualizer, or even the right stylesheet for your new React project, there are many options out there. Picking the right ones? That’s easier said than done.
The browser is a developer’s most powerful tool. 99% of people don’t make 100% out of their browsers.
Here are 10 browser extensions to make the most out of the app you probably spend the most time on.
1. React Developers Tools
We’ll start with the obvious pick, one of the most popular tools for React dev, React Dev Tools for Chrome which has recently released its 4th version 🚀 and was last updated on 14th July 2022 with a minimal size of 1.7MB.
With the above extensions, 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, 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. In the breadcrumbs, you can inspect the selected component, the component that created it, the component that created that one, and so on.
2. WhatFont
The easiest way to identify fonts on web pages.
What is the easiest way to find the fonts used in a webpage? Firebug and Webkit Inspector are easy enough to use for developers. However, for others, this should not be necessary. With this extension, you could inspect web fonts by just hovering on them. It is that simple and elegant.
3. JSON Formatter
It makes JSON easy to read. Open-source.
4. ColorZilla
With ColorZilla you can get a color reading from any point in your browser, quickly adjust this color and paste it into another program. And it can do so much more.
5. Lorem Ipsum Generator
Provides an elegant and quick way to create default text or generate Lorem Ipsum. Optimized for quick usage, but it can be customized.
6. Wappalyzer
Identify web technologies
Wappalyzer is a technology profiler that shows you what websites are built with.
Find out what CMS a website uses, any framework, eCommerce platform, JavaScript libraries, and many more.
7. Smart page ruler
Smart Page Ruler is the developer tool to measure every element of your web page more precisely. You can get the relative and…
Smart Page Ruler is the developer tool to measure every element of your web page more precisely. You can get the relative and absolute position of elements as Zeplin application and can get margin, padding, width, height everything you need.
8. BrowserStack
Instantly test your webpage on any desktop or mobile browser.
9. Awesome screenshot and screen
The best screen recorder and screen capture tool to record screens.
And the last one is Daily.Dev
The homepage developers deserve.
Get a feed of the hottest developer news personalized to you.
daily.dev isn’t a productivity tool per se, but it does make our lives much easier. It’s a news aggregator that specializes in development news. It showcases a page full of news stories, blog posts, and useful pages on our chosen subject.
Daily acts like a start page and news aggregator. Select an item on the page to visit that page. Each opens in a new tab and will be a mixture of news, reviews, advice, how-tos, and all the good stuff that keeps us growing as developers. This is an excellent extension to use if you like to stay current.
Hey, there! If you like this piece of content, follow me for more and subscribe to the newsletter. I will be sure to deliver some amazing content. Thanks, mate! :)
Please share your views in the comment section and yeah feedback is appreciated.
Hoping you would like and will share this for better reach
Checkout my other articles on — https://medium.com/@aayushtibra1997
Thanks for reading :)
