Best Chrome Extensions for Developers

Best Chrome Extensions for Developers


November, 10 2021

In today's article, let's learn about Google Chrome extensions that are used by programmers and designers in the process of developing websites.

Chrome Extensions for Developers

Google Chrome is a web browser produced in 2008, one of the most popular products the reputation and success of Google. It is a cross-platform web browser with high security as well as provide a great experience when browsing the web. In addition, I find it has some pretty convenient properties such as referencing urls in the address bar, optimizing memory usage, reducing page response times, Can be used on many different devices...

Google Chrome

Not only that, it also provides extensions to help programmers improve their productivity as well as save time and effort. Now let's take a look at the commonly used Chrome extensions for web development.

Web Developer

Web Developer is an in the some less than 1 million user install. It helps web setup members in developing and debugging the site quickly. this is the most of the tools and other tools as Disable, Cookies, CSS, Forms, Image ... You can easily find broken images, don't allow website to run javascript, check standard CSS or not, hide all images, show info of links in current web page...

 Chrome Web Developer

JavaScript and CSS Code Beautifier

JavaScript and CSS Code Beautifier helps to beautify CSS and Javascript code to make it easier for us to see. Usually when people upload a website to hosting, in order to optimize it as best as possible, people often compress CSS and Javascript files by removing unnecessary spaces like the following image:

 Chrome JavaScript and CSS Code Beautifier

As you can see, we can't see the code easily because it is contiguous consecutive letters, so this helps us to rearrange the code in a scientific and easier way. You can see the image below after we use JavaScript and CSS Code Beautifier:

 Chrome JavaScript and CSS Code Beautifier

Postman

Postman is an application that helps us to make HTTP requests to the server. It is really useful when you run or test the API for your program and it also allows you to make GET, POST, DELETE, PUT requests easily. In addition, it also has a forum with a large number of programmers to help us solve questions when we are just starting to use postman.

 Chrome Postman

Lorem Ipsum Generator

Lorem Ipsum Generator helps us to quickly create a document by specifying the number of paragraphs and lines we want. When you're building components in your website, it's common to use content to test or see how it's displayed on the web. This makes it possible to create fake content with just one click.

 Chrome Lorem Ipsum Generator

CSSViewer

CSSViewer helps us to view CSS properties of an object in a web page in the most general way such as color, font, size, position... You just need to select this and hover over the object that we want. CSS information will automatically appear.

 Chrome CSSViewer

Page Ruler Redux

Page Ruler Redux helps us to get the size of a unit on the web page in pixels. It is suitable for web designers when you need to get the exact size of a certain element on the web page.

 Chrome Page Ruler Redux

WhatRuns

WhatRuns helps us identify the web technologies being used on the website such as frameworks, analytics tools, Wordpress plugins, Fonts... You just need to go to the page you want and click on the whatruns icon, the information will be displayed. The message will appear in full in less than 1 minute. You can also sign up to receive notifications when the site you want to monitor adds new technologies to the site.

 Chrome whatrun

WhatFont

WhatFont makes it easy to determine which font a web page element is using. You just need to install and move the mouse over the object we want to see to be able to see its font name. It's simple, right.

 Chrome WhatFont

Colorzilla

Colorzilla makes it possible to read the color value of any object on the web page. In addition, it also supports some other useful features such as automatically copying colors to the clipboard, displaying a history of recently selected colors, advanced color picker...

 Chrome Colorzilla

Window Resizer

Window Resizer is an important tool that helps us to build or test the responsiveness of websites on browsers quickly such as phone screens, tablets, laptops, Desktops... In addition, you also You can automatically adjust the display size you want by setting the width and height of the browser window.

 Chrome Window Resizer

TinEye Reverse Image Search

TinEye Reverse Image Search uses image recognition technology to help you search for images on the web with results that are many different links containing the image that has been resized, edited or has a different resolution ... The way to do it is also quite simple, you right click on the image you want to search and select Search Image on TinEye and wait a bit and we will have the results. And here are the results when I search for images on Google:

 Chrome TinEye Reverse Image Search

Marmoset helps us to save the code in the program as an image. For example, it will be very convenient when you need to put a code of a function in the program on social networking sites to share. It also provides some additional features such as adjusting colors, languages, themes... to help you make your code images look more eye-catching.

 Chrome The Great Suspender

User-Agent Switcher

User-Agent Switcher makes it possible for us to test our website on many different devices as well as different browsers without having to install any additional programs such as viewing your website when displayed on Opera, Safari, Firefox, Internet Explorer browsers...

 Chrome User-Agent Switcher

Clear Cache

Clear Cache is responsible for clearing cache and browsing data with just one click. In addition, we can optionally choose the data we want to delete such as application cache, cookies, history, database ...

 Clear Cache

React Developer Tools

React Developer Tools is a React debugging tool added to Chrome's developer tools. It allows you to test React components easily and quickly during website development.

React Developer Tools

Check My Links

Check My Links makes it possible to check for broken links in the website with just one click.

Check My Links

Checkbot

Checkbot helps to check the speed, security and SEO of the website with various factors such as sitemap, 404 pages, duplicate content, javascript css files, https, url redirects...

Checkbot

Site Palette

Site Palette helps you to automatically output multiple color palettes of the website you are using right in the browser quickly and easily.

Site Palette

Web Developer Checklist

Web Developer Checklist helps you to check all the essentials that a website should have.

Web Developer Checklist

EditThisCookie

EditThisCookie is a cookie manager whose mission is to help you add, delete, edit, use, search, protect and block cookies on websites.

EditThisCookie

HTML Validator

Helps you check HTML code then give solutions to fix errors in your website.

 HTML Validator

JSON Viewer

Its mission you quickly and easily design, customize, and manage JSON.

JSON Viewer

Lightshot

It helps you to quickly capture the screen of website.

Lightshot

daily.dev

Help you get important news in website design and development with daily updates.

daily.dev

Image Downloader

Helps you download images on the website quickly.

Image Downloader

PerfectPixel

Make elements in your website with pixel perfect.

PerfectPixel

Hoverify

Improve the user experience such as inspecting HTML, CSS, directly editing elements, moving elements in the DOM...

Hoverify

Evernote Web Clipper

Evernote Web Clipper is a browser extension that allows you to save interesting content you encounter online directly to your Evernote account.

Evernote Web Clipper

Wappalyzer

Wappalyzer allows us to know which CMS, ecommerce platform, JavaScript libraries or framework that website is using.

Wappalyzer

Grammarly for Chrome

Help you check the grammar of the content in the website.

Grammarly for Chrome

Vue.js devtools

Helps you to test Vuejs code in your website.

Vue.js devtools

Redux DevTools

Helps you debug application when state changes.

Redux DevTools

Save to Google Drive

Allows automatically save web pages or images to Google Drive.

Save to Google Drive

HTTPS Everywhere

Helps to automatically convert HTTP pages to HTTPS.

HTTPS Everywhere

Fonts Ninja

Display all fonts on the website, provide complete information about this font...

Fonts Ninja

Similarweb

Provides many features to help you check website such as web rank, traffic sources, main countries accessing the website, check SEO...

Similarweb

Lighthouse

It is a completely free utility that helps you to test website speed, provide solutions to improve website...

Lighthouse

Google Chrome extensions to help you relax

Here, I will introduce some Google Chrome extensions to help you feel relaxed and have more energy to work.

 Chrome Momentum  Chrome Tab Flickr  Chrome Earth View from Google Earth

Related articles:

Summary:

I hope the article will provide developer tools chrome extension that we can use in web development and if you have any questions, just send an email and I will respond as soon as possible. I hope you continue to support the site so that I can write more good articles. Have a nice day!