Being a web developer and work in the web industry is great. Our biggest tool besides text editor is our beloved browsers! We spend quite the amount of time reading docs, going trough Github, checking website functionalities, and so on… in this article, I’m going to tell you how these extensions made my life easier as a developer!

😎 First Let’s talk Github!

Let’s be honest Github's default features are not perfect! There is no dark theme, no file tree-like structure that we used to see in our editors, no file icons, and so on… well no more!

1. Octotree

Octotree is loaded with features that bring your productivity on GitHub to the next level!

Some of Octotree features:

• Navigate Github code with ease
• Dark themes and code fonts
• Supercharged code review
• Multiple tabs support
• And many more

⚡ Get it for chrome and firefox.

2. Refined GitHub

Simply simplifies the GitHub interface and adds useful features.

Some of Refined GitHub features:

• Mark issues and pulls requests as unread
• Tabs in code are shown as 4 spaces instead of 8 spaces
• Fix merge conflicts in a click
• Reaction avatars showing who reacted to a comment
• Clickable references to issues and pull requests
• View linked gists inline in comments
• and much more...

⚡ Get it for chrome and firefox.

3. File Icon for GitHub and GitLab

An Extension that gives different filetypes different icons to GitHub, GitLab, gitea and gogs.

⚡ Get it for chrome and firefox.

4. OctoLinker

Navigate through projects on GitHub.com efficiently with OctoLinker. OctoLinker turns language-specific statements like include requires or import into links.

⚡ Get it for chrome and firefox.

5. Sourcegraph

Adds code intelligence to GitHub: hovers, definitions, references. Supports 20+ languages and other popular code hosts, too.

⚡ Get it for chrome and firefox.

NOTE: The Firefox extension may need to be manually enabled from about:addons, you can find more information in Firefox add-on security.

6. GitHub Hovercard

GitHub Hovercard provides neat hovercards for GitHub.
It brings you instant access to user/repo/issue/commit information from anywhere on GitHub.

⚡ Get it for chrome and firefox.

7. GitHub Repository Size

Automatically adds repository size to GitHub's repository summary

⚡ Get it for chrome and firefox.

👩‍💻👨‍💻 Developers Developers Developers!

This section is all about the best extensions that I've used for developing purposes.

8. Accessibility Insights for Web

Accessibility Insights for Web helps developers quickly find and fix accessibility issues.

⚡ Get it for chrome. unfortunately this extensions is not available for firefox :(

9. ColorZilla

Advanced Eyedropper, Color Picker, Gradient Generator and other colorful goodies

⚡ Get it for chrome and firefox.

10. Web Developer

The Web Developer extension adds a toolbar button to the browser with various web developer tools.

⚡ Get it for chrome and firefox.

11. Dimensions

This extension measures the dimensions from your mouse pointer up/down and left/right until it hits a border. So if you want to measure distances between elements on a website this is perfect.

⚡ Get it for chrome and firefox.

12. Wappalyzer

Wappalyzer is a utility that uncovers the technologies used on websites. It detects content management systems, ecommerce platforms, web frameworks, server software, analytics tools and many more.

⚡ Get it for chrome and firefox.

13. svg-grabber - get all the svg's from a site

svg-grabber lets you preview, download and copy the code all SVG icons and illustrations in a website.

⚡ Get it for chrome. unfortunately this extensions is not available for firefox :(

14. VisBug

Open source web design debug tools built with JavaScript: a FireBug for designers.

Some of VisBug's features:

• Point, click & tinker
• Edit or style any page, in any state, like it's an artboard
• Inspect styles, spacing, distance, accessibility and alignment
• Nitpick layouts & content, in the real end environment, at any device size
• Leverage adobe/sketch skills
• Edit text, replace images
• and much more...

⚡ Get it for chrome. VisBug for firefox is coming soon! check here for more details.

15. EditThisCookie

EditThisCookie is a cookie manager. You can add, delete, edit, search, protect and block cookies!

⚡ Get it for chrome. unfortunately this extensions is not available for firefox :(

16. Vue.js devtools

Chrome and Firefox DevTools extension for debugging Vue.js applications.

⚡ Get it for chrome and firefox.

17. React Developer Tools

React Developer Tools is an extension for the open-source React JavaScript library.

⚡ Get it for chrome and firefox.

18. JSONView

Validate and view JSON documents.

⚡ Get it for chrome and firefox.

🤪 More General Ones!

This last section is about more general extensions that help me navigate through the web every day.

19. Dark Reader

Hello, darkness my old friend! dark mode for every website. Take care of your eyes, use dark theme for night and daily browsing.

⚡ Get it for chrome and firefox.

20. The Great Suspender

Let's be honest chrome is a ram hungry browser. and the reason behind it is open tabs. The Great Suspender is a lightweight extension that reduces chrome's memory footprint. Perfect if you have a lot of tabs open at the same time. Tabs that have not been viewed after a configurable length of time will be automagically suspended in the background, freeing up the memory and CPU being consumed by that tab.

⚡ Get it for chrome unfortunately this extensions is not available for firefox :(

21. Momentum

Replace new tab page with a personal dashboard featuring to-do, weather, and inspiration.

⚡ Get it for chrome and firefox.

22. RSS Feed Reader

Get a simple overview of your RSS and Atom feeds in the toolbar

⚡ Get it for chrome and firefox.

23. Bookmark Sidebar

Adds a toggleable sidebar with all your bookmarks at the edge of your browser window.

⚡ Get it for chrome. unfortunately this extensions is not available for firefox :(

24. Grammarly

From grammar and spelling to style and tone, Grammarly helps you eliminate writing errors and find the perfect words to express yourself.

⚡ Get it for chrome and firefox.

25. AdBlock — best ad blocker

Block ads and pop-ups on YouTube, Facebook, Twitch, and your favorite websites.

⚡ Get it for chrome and firefox.

Hey, you made it to the end 🥳 Thanks for reading this article! you can follow me on Twitter. I'm posting whatever I learn and a bunch of cool stuff there. cheers 👋😅