Chrome Extensions
For Developers
Regardless of whether you are a professional developer who
frequently works with large codebases or an amateur coder, there
are several excellent Chrome extensions that can enhance your
coding experience and improve productivity. These tools are
useful for both beginner and experienced developers.
In this concise tutorial, we'll cover the most helpful Chrome
extensions for web developers to use in 2023.
JSON FORMATTER
One of the top Chrome extensions for web developers is JSON
Formatter. As the name implies, this tool formats JSON files and
responses from backend endpoints, making them easier to read.
If you work with JSON, this lightweight extension is a must-have.
COLORZILLA
The second Chrome extension on our list is called ColorZilla. This
powerful tool allows you to read the color value from any pixel in
your browser, as well as access a Color Picker, Eye Dropper,
Gradient Generator, and other advanced color tools. With
ColorZilla, you can easily extract colors from your browser and
paste them into another program such as Photoshop. Some of the
notable features include a Color History, advanced Color Picker,
element information display, and keyboard shortcuts.
2|Page
REACT DEVELOPER TOOLS
The next extension on our list is essential for React developers:
React Developer Tools. When you install this extension, it adds two
new tabs to your Chrome Dev tools "Components" and "Profiler".
The Components tab displays the root React components
rendered on the page and their subcomponents, and you can
inspect and edit their current props and state in the panel on the
right. The Profiler tab enables you to record performance data. If
you work with React, this extension is a must-have.
REDUX DEV TOOLS
An extension that pairs well with React Developer Tools is Redux
Dev tools. This tool is specifically designed to help you analyse
changes in the global state when using Redux, a popular state
management library for React. With Redux Dev tools, you can see
how the state looks after each dispatched action, making it a
valuable addition to any project that uses Redux.
FONTS NINJA
Have you ever come across a website with a beautiful font that
you want to use in your own projects? Fonts Ninja is a Chrome
extension that can help you identify fonts and provide information
about them. After installation, simply click on the extension to
enter detection mode, then hover or click on any text to see a
tooltip or card with font details such as type, size, and color. It's a
quick and easy way to discover new fonts while browsing the web.
3|Page
CSS PEEPER
Are you tired of digging through code to figure out a website's
line-height, font, or button size? CSS Peeper is a Chrome extension
that simplifies the process of inspecting styles, hidden CSS, colors,
and assets. With this tool, you can easily view and analyze code in
a well-organized and visually appealing manner.
I DON’T CARE ABOUT COOKIES
Do you get annoyed by the cookie consent pop-ups that appear
on many websites? The "I don't care about cookies" extension can
help. It removes cookie warnings from almost all websites, making
it easier to browse anonymously or automatically delete cookies
when you close the browser. EU regulations require websites to get
user permission before installing tracking cookies, which can be
frustrating when you surf the web. This extension makes it easier
to bypass these notifications.
FAKE FILLER
Fake Filler is a Chrome extension that helps you fill form fields with
randomly generated fake data. When working with forms, it can
be time-consuming to manually enter values in multiple fields,
especially when testing and debugging code. This extension
automates the process and saves you hours of tedious work by
filling all input fields on a page with fake data. It's an efficient tool
to use when developing forms or testing applications.
4|Page
RESPONSIVE VIEWER
Have you ever put in a lot of effort to develop a website only to
have a client complain that it isn't responsive on their old Samsung
Galaxy S2 or some other obscure device? Ensuring that a website
is fully responsive on all screen sizes, from high-resolution 8k
displays to small foldable phones, is crucial. Responsive Viewer is
a Chrome extension that helps you test your design and
functionality on multiple screens at once, saving you the hassle of
testing device by device.
WAPPALYZER
Are you trying to decide between React, Angular, Vue, or another
framework? Wappalyzer is a Chrome extension that can help. This
technology profiler shows you what websites are built with and
can identify the CMS, framework, eCommerce platform,
JavaScript libraries, and many other technologies in use. With
Wappalyzer, you can easily find out what technology a website is
using and learn about more than a thousand technologies in
various categories such as programming languages, analytics,
marketing tools, payment processors, CRM, CDN, and others.
WEB DEVELOPER
The Web Developer extension for Chrome adds a toolbar button
with a variety of web development tools. It's a useful tool for
testing and working on websites and includes many useful
features such as the ability to view and edit CSS, access image
sources and dimensions, disable or delete cookies, view
JavaScript code and element details, and use a color picker.
5|Page
DAILY DEV
Are you tired of scouring the web for the latest developer news?
The Developer News extension for Chrome brings all the hot
developer news to you in one place. Just open a new tab and you'll
see a feed of personalized news from sources such as CSS-Tricks,
Smashing Magazine, web dev, and more. This extension is a
musthave for any developer and includes features like multiple
feeds, upvoting, bookmarking, discussion with other developers,
and earning ranks by reading valuable articles. It also includes a
top visited sites feature that allows you to easily access your
favourite websites directly from your new tab.
CHECK MY LINKS
Check My Links is a Chrome extension that checks for broken links
on a web page. When you're working on a page with many links,
this tool quickly crawls through the page and highlights which links
are valid and which are broken. It's a handy tool for quickly
checking the status of all the links on a page and allows you to
copy all the bad links to your clipboard with one click.
CLEAR CACHE
Easily clear your cache and browsing data with the Clear Cache
extension for Chrome. With just one click, you can quickly delete
your cache without any additional confirmation dialogs or popups.
You can customize what data you want to clear on the options
page, including App Cache, Cache, Cookies, Downloads, File
Systems, Form Data, History, Indexed DB, Local Storage, Plugin
Data, Passwords, and WebSQL.
6|Page
OPEN IN VS CODE
The Open in VSCode extension for Chrome makes it easy to open
files hosted on GitHub or Gitlab in Visual Studio Code. Simply
right-click on a link to a file and select "Open in VSCode" or click
on a line link to open the file to a specific location. After installing
the extension, be sure to configure it in the options page by
rightclicking on the icon in the extensions bar and selecting
"Options". Note that the extension expects the repository you are
browsing to already be cloned into the specified folder in the
options page.
SVG GRABBER
SVG grabber is a Chrome extension that allows you to preview,
copy, and download all the SVG assets from a website. This tool is
helpful for quickly accessing and using the SVG icons and
illustrations on a website. With SVG grabber, you can preview,
download, and copy the code for all the SVG assets on a site with
ease.
READ ALOUD
The Read Aloud Extension for Chrome allows you to listen to web
page articles using text-to-speech (TTS) technology. With just one
click, you can have the current webpage read aloud to you in over
40 different languages. Read Aloud works on a variety of websites,
including news sites, blogs, publications, and online course
materials. It can also read PDFs, Google Docs, Google Play books,
Amazon Kindle, and more. This extension is useful for people who
prefer to listen to content instead of reading, those with dyslexia
or other learning disabilities, and children learning to read.
7|Page
GO FULL PAGE – FULL PAGE SCREEN
CAPTURE
The Full-Page Screenshot extension for Chrome allows you to
easily capture a screenshot of the entire current webpage. To use
it, simply click on the extension icon (or press Alt + Shift + P) and
the extension will capture and display the screenshot in a new tab.
From there, you can download the screenshot as an image or PDF,
or drag it to your desktop. This extension is lightweight and does
not require any unnecessary permissions or display ads.
SCREEN CASTIFY – SCREEN VIDEO
RECORDER
Screen Castify Record is a popular Chrome extension for screen
recording. With just a few clicks, you can capture, edit, and share
videos in seconds. This extension allows you to include your
desktop, browser tab, and/or webcam in your recordings, making
it easy to showcase presentations, ideas, and personality. It is the
#1 screen recorder for Chrome and is widely trusted for creating
high-quality videos.
STAYFOCUSD
StayFocusd is a Chrome extension that helps you stay focused on
work by limiting the amount of time you can spend on distracting
websites. Once your allotted time has been used up, the blocked
sites will be inaccessible for the rest of the day. This extension is
highly configurable and allows you to block or allow specific
websites, subdomains, paths, pages, or even in-page contents.
8|Page
NOTION WEB CLIPPER
Notion is an all-in-one workspace that allows you to take notes,
keep databases, build a wiki, and project manage your team. It is
a powerful tool for productivity and organization. This extension
allows you to save any website into your Notion workspace,
making it easy to capture and organize articles, research, and
inspiration. Simply click the Notion button in the top right of your
browser and choose where you want to save the web page in your
workspace.
EVERNOTE WEB CLIPPER
Notion is an all-in-one workspace that allows you to take notes,
keep databases, build a wiki, and project manage your team. It is
a powerful tool for productivity and organization. This extension
allows you to save any website into your Notion workspace,
making it easy to capture and organize articles, research, and
inspiration. Simply click the Notion button in the top right of your
browser and choose where you want to save the web page in your
workspace.
SEO MINION
SEO Minion is a must-have tool for any SEO professional or
website owner looking to optimize their online presence. This
extension helps with a variety of tasks, such as On-Page SEO
analysis, Broken Link Checking, SERP Preview, Hreflang Checker,
and more. With SEO Minion, you can quickly analyze the HTML of
any webpage, view all the links on a page, check for broken links,
preview your website on a real Google search result, ETC.
9|Page
SEOQUAKE
SEOquake is a free plugin that provides you with key SEO metrics,
along with other useful tools such as SEO Audit and many others.
With SEOquake, you can easily analyze SERPs and export the
results in CSV format, estimate keyword difficulty, set parameters
for search queries, run a complete SEO audit of a webpage
including a mobile compatibility check, check your social statistics
on Facebook, use a wide range of default parameters or create a
custom set, get a full report on internal and external links, and
compare URLs or domains. In addition, SEOquake has other useful
tools such as the SEO Audit tool, the Keyword Density report,
Internal/External Link analysis, and social metrics. This plugin is
compatible with several browser extensions and is constantly
updated. If you work with SEO, it's definitely worth giving
SEOquake a try.
10 | P a g e