Close this search box.

7 indispensable Extention for Web Designer and Frontend Developer

Jump to..

The most useful add-on for me is the one that allows me to see which Content Management System (CMS) a website is using, run analytics on it no matter what web development tool I’m using, and so on.

Self-coded websites will have less detailed information, but still give you a good idea of their setup.

See the following as an illustration.

If you test it with my page, you will see that the content management system (CMS) that you are using is Elementor, and the web builder that you are using is WordPress.
Try with Spiderum, you may find the information is quite limited as the page is hand-coded

These two extensions serve the same function, which is to measure the size of the element that is currently being displayed on the screen. This will be helpful when you need to get a quick check on the size of an element; Added Ruler Mode to create a set of grids for easy measurement.

This extension will run the heuristic evaluation function right on the web you are viewing, and it will produce a Wireframe for you. It is ideal for those of you who do UI and want to refer to the design of other people’s websites.

As the name suggests, this is one of the most helpful and frequently used extensions that I use. It allows you to check what font the website you are viewing is using and then allows you to copy and use that font.

The guide is simple:

  • Download the Extension and install it in your browser
  • When you need to check the font, click on the Whatfont icon. On the toolbar, hover over the text, done.
Tested with Coin98, found font is bajamjuree-regular

Use to choose colors on the web without having to screenshot and drop into photoshop to get the color code.

This extension functions similarly to Pinterest or Bored Panda, providing you with a daily inspiration dashboard based on the subject you select.

Aside from that, the Trending section will assist you in staying up to date with the most popular things happening right now, and in addition to that, there is the sharing of tutorials. It should be put to a vote.

Well, this is the extension I use the most, almost every day, I use it to take snapshots of the things that I find interesting to watch during the day: Youtube videos, Tiktok videos, Medium posts,…

For details you can read more here:

As a Designer/Developer, you can use Save to Notion to:

  • Recap the knowledge I read (divided by tag) for later research
  • Save resources: font, template, … without having to download. You can refer to my database here.

Above are a few Chrome extensions in my opinion that are quite useful for the working process of FrontEnd Developer & Designer.

If you have any tips of your own, you can share them in the comments.

error: Content is protected !!