Yesterday, I was having a google meet call with a developer. In the middle of the call, she had to show me something on her github profile and so she shared her screen. The first thing I noticed was that her github was in dark mode. How cool is that, I thought? I had always hated light mode. It gave me headaches. So I asked her, how were you able to implement dark mode on your github profile? Then she told me about OctoTree. What is octoTree I asked? Never mind, I said. I'll make my research on google.
My research led to me finding out not only about OctoTree but about some more awesome chrome extensions that I think every developer should know about and start using. Let's dive in.
AWESOME CHROME EXTENSIONS FOR EVERY DEVELOPER
1.OctoTree : This extension enhances Github code review and exploration. Added to that are some features like dark mode(My fav), code font setting, book marking, sidebar docking etc. Octotree feels a lot like Visual Studio Code in Github. My thoughts.....
Here is how it looks
Cute, innit?
Here is a direct download link : https://chrome.google.com/webstore/detail/octotree/bkhaagjahfmjljalopjnoealnfndnagc
2.Wappalyzer : This browser extension is a technology profiler that shows you what websites and web applications are built with. Curious as to what technologies, frameworks, Javascript libraries and more are used to build a website or a web application? Just use Wappalyzer.
Here is how it looks
Here is a direct link to add it to your browser :
https://chrome.google.com/webstore/detail/wappalyzer/gppongmhjkpfnbhagpmjfkannfbllamg?hl=en
3.Web Developer : What a weird name for an extension. What is does is far from weird though. It's amazing. This browser extension adds a little toolbar button with various web developer tools pertaining to images, forms etc.
Here's how it looks
Here is a direct link to add it to your browser :
https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm
4.Windows Resizer : Responsive web design is one of the most important aspects of development. This extension helps you re-size the browser's window in order to emulate various device resolutions. It helps web designers and developers test their layouts on different browser resolutions.
The resolutions list is completely customizable (add/delete/re-order).
You can set the window's width/height, window's position, preset icon (phone, tablet, laptop, desktop) and even the option to apply the new dimensions to the entire window or just to the viewport.
It also features customizable global key shortcuts, an option to export your settings and import them on another computer! So amazing.
Here is how it looks
Here is a direct link to add it to your browser: https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh?hl=en
5.Check My Links : This browser extension is a link checker that crawls through your webpage and looks for broken links. It is well suited for web developers working on a web application or website with multiple links. It saves you the stress of manually searching for broken links. It highlights for you the links that are broken, valid, redirect to another page and more.. So handy.
Here is how it looks
Here is a direct link to add it to your browser : https://chrome.google.com/webstore/detail/check-my-links/ojkcdipcgfaekbeaelaapakgnjflfglf?hl=en
6.What Font : Knowing what typefaces are used on web applications and websites has never been easier. With this extension, you could inspect web fonts by just hovering on them.It also detects the services used for serving web fonts. Supports Typekit and Google Font API.
Here is how it looks
Here is a direct link to add it to your browser :
https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=en
7.ColorZilla : This is a browser extension that assists web developers and graphic designers with color related tasks. Simply hover over an element in a website or application to get all the information related to its color. It includes a Color Picker, Eye Dropper, Gradient Generator and much more....
It is very similar to Color By Fardos. Be sure to check that out too.
Here is how it looks
Here is a direct link to add it to your browser :
https://www.colorzilla.com/chrome/
8.Web Developer Checklist: This browser extension helps to analyze and check their websites or web applications for violations of best practices in web design.
Here is how it looks
Here is a direct link to add it to your browser : https://chrome.google.com/webstore/detail/web-developer-checklist/iahamcpedabephpcgkeikbclmaljebjp?hl=en
9.CSS Viewer: This browser extension makes it so simple to access the CSS properties of an element by simply hovering over on it. It is very similar in functionality to the Code Cola extension.
Here is how it looks
Here is a direct link to add it to your browser :
https://chrome.google.com/webstore/detail/cssviewer/ggfgijbpiheegefliciemofobhmofgce?hl=en
10.Pesticide: This is the absolute easiest way to visualize box sizing in CSS. Don't believe me? Take a look at this. With pesticide, you see every element as a box with borders around them. See how the borders, margins, paddings and more affect the element. It is a pretty great extension.
Here is a direct link to add it to your browser:
https://chrome.google.com/webstore/detail/pesticide-for-chrome-with/eipbgplchlidkojmppclhkechkhmlefi?hl=en
Which of these extensions will you be trying out?
Comment below
If you found this article useful, please share it.
Contact Me :
Twitter : https://twitter.com/EfereyanK
Latest comments (89)
Hi all,
I'm created own extension for search the image results
chrome.google.com/webstore/detail/...
Please check it out
Wappalyzer is the real game changer
We have just published a simple extension to mark sites as dev/test/staging to avoid confusion managing multiple websites:
chrome.google.com/webstore/detail/...
Maybe it can be useful for you!
This is a great list but you should probably make the headings for each extension bigger and bolder. Most people read a webpage by scrolling through the whole thing quickly first to see if anything jumps out at them.
Oh thank you so very much for the feedback. I will work on it
Webaplyzer is wondeful! JSON Viewer is also a great extension <3
Nice list, a long time user of OctoTree but stopped after I found out about the 'T' shortcut key.
Also, came here to add that it looks like you're missing my recent Twitter extension: Twiks twiks.pro :-)
The t shortcut? What does that do?. I'll be sure to look into the twinks pro extension. If you don't mind could you make a PR to this repo?
github.com/KarenEfereyan/extension...
Others will find it useful
If you press the T key in your keyboard while viewing the main repository page you can browse the files. They have a bunch more documented here: docs.github.com/en/enterprise/2.13...
I'll add a PR yes, thanks!
Everyone, I have made this into a repository. You can access it here, github.com/KarenEfereyan/extension...
It will be nice if you can make a contribution by adding all the nice extensions you've spoken about here. As its open source. Please remember to leave a star. thank you
I'm glad you found it helpful
Hi Karen, I loved your list. I also want to see your website that you put in previews. What is the link?
Sure that's my portfolio website. Check it here karenefe.netlify.app
If you're looking for a browser that has almost all these tools built-in (so no need to install extensions that slow down your browser) check out Polypane, which I built.
could you please make a PR of it to this repo? github.com/KarenEfereyan/extension... It would be helpful to lots of people
I'll be sure to. Thanks for telling me
Definitely trying a number of them.
Pls do
Hey, all those tools are in chrome dev tools and maybe Mozilla have too
Now that's a great list! Thank you 🙏
Thanks Shakil
Was a long-time user of Window Resizer until I found this one - chrome.google.com/webstore/detail/... - It just much "leaner and cleaner" to me!
This is a nice list of tools - good stuff!
could you kindly make a PR to this repo? github.com/KarenEfereyan/extension... it might help others
Thanks Edd
could you please make a PR of it to this repo? github.com/KarenEfereyan/extension... it would be useful to many people
Cool. I'll check it out