5 Chrome Extensions Every Frontend Developer Should Know AboutFebruary 1st, 2023
Those who work with front-end development use the browser on a daily basis to be able to see the end result of their work. And since we write code with the customer experience in mind, ideally we should use the most-used browser to access the site so we can test and debug our code.
In fact, for those who don’t know, Chrome is the most-used browser in the world!
The company StatCounter conducted a survey recently and found that 65.24% of websites are accessed via Chrome! Followed by almost 20% accesses via Safari and others with less than 5% each.
Image from the website gs.statcounter.com
In this context, Chrome has several extensions that help software development. In this article, I’ll show you the ones I use the most in my daily life to improve my productivity and make work easier.
Attention! Read this article to the end, because I'm going to give a valuable tip for those who are looking for their first job...
5 Chrome Extensions Every Front-end Developer Should Know About
To download the extension: chrome.google.com/webstore/detail/wappalyzer-technology-pro/gppongmhjkpfnbhagpmjfkannfbllamg?hl=pt-BR
Wappalyzer is very useful, as it allows you to identify the technologies that were used to create the site. The most interesting thing is that it shows the programming language that was used, the library/framework and also all the tools used for Marketing and Security.
2.'Check my Links
To download the extension: https://chrome.google.com/webstore/detail/check-my-links/ojkcdipcgfaekbeaelaapakgnjflfglf?hl=pt-BR
With this extension, you can check if all the links on your website are working properly. 🙂
Do you know when you click on a link and it shows the “404 not found” page? This is because the page that was linked to this address is not up and so it could not be found!
Instead of clicking on every link on the site to see if it redirects to a valid page, we can just use this extension that does this check for us.
To download the extension: https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm
With this extension you can find out what source any website is using.
In the software world, we always use other codes, sites, and apps as inspiration to create new ones. So it is very interesting to have extensions like this that make it easy when you want to inspect the source code to be able to replicate it from your side!
To download the extension: https://chrome.google.com/webstore/detail/page-ruler/jcbmcnpepaddcedmjdcmhbekjhbfnlff
Page Ruler is like having a virtual ruler. With this Chrome extension, you can have a virtual ruler to know exactly how many pixels each element you need to analyze has.
To download the extension: https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp
Last but not least, here’s Colorzilla. With this extension you can know exactly what color is used on a given page or image. It is super useful and I use it in my everyday life! This extension gives the color in RGB or hexadecimal format, so you can reproduce exactly the color you want.
How can these extensions help you look for your first job?
If you are or want to be a front-end developer, these extensions can make the difference when looking for a job.
You may be asking, but how Saty?
I see a lot of people talking about wanting a job in their field of expertise, asking for a job, but what are these people doing to stand out amongst so many people looking for a job?
To answer this question, I like to make an analogy with the stock market regarding supply and demand.
If many people want their first job and there are few junior vacancies, the supply will be greater than the demand, so it will become more competitive. In the case of senior vacancies, the opposite is true. There are more vacancies than professionals, so the supply is lower than the demand.
If you fall into the first case, to get that dream job, you have to stand out!
Okay, but how?
Now I will quote a phrase that I like a lot and try to take as a motto in several areas of my life:
“First give, then receive."
Let’s use it in the employment context: what can you offer the company before you apply for a job?
There are several ways to approach a recruiter or a tech person working at the company where you will first give before you receive. And one of them is by using the extensions I have suggested here: make a clone of the website of the company you would like to work for!
1. Use Wappalyzer to identify the technologies that were used in the site
This way you can channel your studies to a specific point! This can help you in the next stages as well, especially in the technical stage, because you will have experience with the stacks the company uses and also an opinion on how the development went.
2. Use CheckMyLinks to validate that all links are correct in your project
Moreover, use this extension on the company’s website, who knows, you may end up discovering some bug and bring the solution to your interview! An important tip here is: don’t just point out the bugs in the system you want to enter, but point them out and come up with a suggestion on how to solve them. A professional who only brings problems is not well seen, but a professional who brings solutions is one that companies most want to have on their team!
3. Use WhatFont, PageRuler, and Colorzilla to keep the layout as faithful as possible to the original
These extensions are super useful for getting exact information about the layout and design of the site you are cloning.
Last tips before using these extensions to help you get your first job
With everything ready it’s almost time to go after the recruiters, but first keep a few more preparation points in mind:
Organize your LinkedIn, keep it up to date, with a nice, professional profile picture and also with keywords to make sure it will be found;
Make a good resume, with an introduction about yourself, telling us your main characteristics, goals, and a little bit about your experiences;
Upload your code to Github, writing a README explaining the technologies used, a little about yourself, and the next steps;
Write a nice text to send to recruiters about this project. If you have found a bug or made any improvements it is nice to comment too! (Here you can also look for senior developers, CTOs or managers to talk to!)
To finish this article, I would like to leave one last message: learn to deal with frustration.
Anyone who works in IT has to deal with frustration on a daily basis: code that doesn’t work, incomplete documentation, changes in the scope of the project... and when looking for a job it’s no different!
Look at each position as a new challenge and a new opportunity to improve yourself! Always consider how much you are learning in the first place! 🙂
Did you find these tips useful? Tell me about the extensions you use in your daily life leaving a comment below. 👇