jeket / extensions-4-every-developer

A list of extensions that every web developer must have

extensions-4-every-developer

A list of extensions that every web developer must have

Please leave a star.

Here is a list of extensions that every web developer should use

To contribute, follow the contributing guidelines and refer to the snippet

1. OctoTree:

This extension puts github on steriods. Gone are the days of ugly looking github repositories.

Features

• IDE-like code tree
• Customize how Github looks to you. Opt for the dark theme and customize the font of your text and much more...
• Folder and file search
• Support private repositories
• Repo/file/issue/pull request bookmarking
• High performance, working with repositories of any size
• Dark themes
• Multiple tabs
• File icon themes
• Code font settings
• Pull request code review
• Change sidebar docking position

Availiabilty

Octotree is available for download on chrome and mozilla

2. Check My Links Extension:

This extension is a link checker that crawls through your webpage and looks for all things, links. Broken links, valid links, redirecting links, we got you covered.

Features

• Tab showing number of links present on a webpage or website
• Queue with number of links left to account for as the crawler works
• Syntax highlighting for valid, redirect, warnings and invalid links

Availability

Check My Links is available for download on chrome

3. Windows Resizer:

This extension re-sizes the browser's window in order to emulate various resolutions.

Features

• Major device resolution on which to test your website
• Customizable list. Add/remove/reorder available resolution list
• Allow you set the window's width/height, window's position.
• Customizable global key shortcuts
• Export desired settings and import them into another computer

Availability

Windows resizer is available for download on chrome

4. Color By Fardos:

This extension allows you pick colors from websites, save colors & gradients, get matching shades and tints and create beautiful gradients.

Features

• Color pick and save multiple colors from any site (using zoom technology) Cmd/Ctrl + Shift + e
• Save your favorite colors and gradients, click any color and it's HEX is saved to your clipboard
• Find shades, tints, complementary and other color combinations for any color
• Sync your colors between multiple Chrome Browsers
• Create linear or radial gradients with unlimited stops
• Browse hundreds of beautiful gradients, edit, save and copy it's CSS whenever you need it

Availability

Color By Fardos is available for download on chrome

5. Css Viewer:

This extension is a simple Css property viewer. Hover over any element and get all the css properties attached to it

Features

• Hover over any html element and get all the css properties attached to it.

Availability

Css viewer is an available for download on chrome

6. Pesticide:

This extension outlines every element on a page thereby allowing the user see a better placement on the page.

Features

• Every element is outlined, like a box
• It is an absolute easy way to visualize box-sizing in CSS
• Hover over any box and immediately see the paddings, margins and border widths attached to that element via the box-sizing pane in the elements tab

Availability

Pesticide is available for download on chrome and firefox

7. Wappalyzer:

This extension is a technology profiler that shows you what websites and web applications ae built with.

Features

• Allows you find what content management system a website uses
• Uncovers website tech nology into a range of categories like programming languages, analytics, marketing tools and many more...
• Tells the javascript frameworks, e-commerce platform that the given website or web application uses.

Availability

Wappalyzer is available for download on chrome and firefox

8. Screencastify:

This extension helps to capture, edit and share videos in seconds.

Features

1. 🎥 Record

• Desktop, browser tab or webcam capture
• Narrate with your microphone’s audio
• Embed your webcam into the recording
• Full HD resolution

2. ✂️ Edit

• Trim the start and end of your videos
• Draw on your tab with the pen tool
• Merge, crop, and add text to videos (upgrade required)

3. 🚀 Share

• Videos autosave to Google Drive
• Copy shareable Drive link with one click
• Publish directly to your YouTube channel
• Share to Google Classroom
• Save and manage videos locally
• Export as MP4, animated GIF, or MP3

Availability

Screencastify is available for download on chrome

9. Web Developer Checklist:

This extension helps developers by providing a yardstick to test if they have followed best practices

Features

• Analyses any web page for violations of best practices
• Easily discover problem areas in websites.
• Get grading on different areas where best practices should be observed like SEO, Mobile responsiveness, Usability, Accessibility
• Get the number of successful checks that passed the best practices test

Availability

Web Developer checklist is available for download on chrome and firefox

10. What font:

This extension makes it ridiculously easy to identify fonts used in a website.

Features

• Hover over any text in a website and automatically get the fonts used
• Get access to the font family, font style, font-weight
• Get some more properties of the text like the size, line height, color along with a small square showing a preview of the color used for the text
• Allows you exit what font as the font checker keeps appearing as you move over the webpage

Availability

• What font is available for download on chromeand mpzilla

11. Web Developer:

What a weird name for an extension. What it does is far from weird, though. This extension adds a toolbar button to the browser with various web developer tools.

Features

• Tons of web developer tools that can be toggled to add or remove from the current page
• When a given tool has been toggled on, an X icon is attached to the tool showing that it can be toggled off when clicked
• Web developer tools effectively categorized into forms, css, images, resizer and much more.

Availability

Web developer is available for download on chrome and firefox

12. Microsoft Teams Bot:

It's a bot which can attend your online classes/meetings on Microsoft Teams.

Features

• Attends your online classes/meetings
• User customisable timetable.
• User just needs to input the Team name, meeting start time and the duration of the meeting
• Joins the meeting provided that there is more than 1 attendee in the meeting
• Fully autonomous. Can add any number of meetings.
• Totally free to use
• 100% attendance for all your classes/meetings

Advanced Features

• If Deployed on an AWS/Azure Server, you don't need to switch on your desktop/laptop
• Zero MB of data consumption
• Tutorial to deploy it on a server

Availability

Microsoft Teams Bot is available for download on chrome

13. Web Maker:

Blazing fast & offline playground for your web experiments.

Features

• Works offline
• User accounts
• Supports pre-processors: HTML (jade, markdown), CSS (SCSS, LESS, Atomic CSS, Stylus) & JavaScript (ES6, CoffeeScript, TypeScript)
• Inbuilt Console
• Save and load your creations with Auto-save
• Fork any creation
• Various templates for popular libraries - React, Vue and more
• Multi-monitor support with detached preview
• Import & Export all creations anytime, anywhere
• Multiple editor themes & other configurable settings
• Font options + use any system font
• Code auto completion
• Very easily accessible. Simply open a new tab in Chrome! (Configurable setting).
• Multiple layouts with saved collapsed states
• Save as HTML file
• Edit in CodePen
• Preview screenshot capture
• Open source on GitHub

Availability

Web Maker is available for download on chrome

14. uBlock Origin:

an efficient blocker. Easy on CPU and memory.

Features

• uBlock Origin filter lists
• EasyList (ads)
• EasyPrivacy (tracking)
• Peter Lowe’s Ad server list (ads and tracking)
• Online Malicious URL Blocklist

Availability

uBlock Origin is available for download on chrome and mozilla

15. Lighthouse:

It is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. it runs a series of audits against the page, and then it generates a report on how well the page did.

Features

• It has audits for performance, accessibility, progressive web apps, SEO and more.

Availability

Choose the Lighthouse workflow that suits you best:

• In Chrome DevTools - Easily audit pages that require authentication, and read your reports in a user-friendly format.
• From the command line - Automate your Lighthouse runs via shell scripts.
• As a Node module - Integrate Lighthouse into your continuous integration systems.
• From a web UI - Run Lighthouse and link to reports without installing a thing.

16. Polypane:

A standalone browser with all the tools you need to build responsive, accessible and performant sites five times faster.

Features

• Multiple synced viewports for responsive testing.
• Detects CSS breakpoints and creates viewports from that.
• Device emulation for iPhone, Android etc.
• Media feature emulation: dark mode, reduced motion, print etc.
• Layout debugging (Every element is outlined, like a box) with overflow detection
• Devtools that edits all viewports at the same time.
• Copy all CSS for an element
• Pixel perfect social media previews for Twitter, Facebook, Slack, Google SERP, LinkedIn and Discord
• Built-in live reloading and auto reloading support
• Create full page screenshots
• Color blindness and other visual impairment simulators
• Devtools extension support
• Visual Design overlay diffing support

Availability

Polypane is available on Mac, Windows and Linux and is available here: polypane.app

17. Dark Theme For Chrome:

Dark Mode is an extension that helps you quickly turn the screen (browser) to dark at night time.

Features

• The Toolbar button serves as an ON|OFF switch which enables you to easily and quickly turn the extension ON or OFF.

Availability

Dark Theme is available for downloads on windows

18. Prodeus :

This is a free extensions that keeps track of hours spent learning on Youtube and all other works done all along.

Features

• Keeps track of hours spent watching/learning on Youtube
• Add classes for different things you learn.
• Get a degree based on the amount of hours spent.
• Get resources(suggestions) from the library
• Connect the degree to your Linkedin profile

Availiabilty

Prodeus is available for download on chrome

19. Usersnap Extension:

This is a chrome extension that allows you capture your screen, collect user feedback, and track bugs reports on any website, prototype, or application.

Features

• In-Browser Screenshots: you’ll get a screenshot of what your users experience. Quickly uncover browser-specific issues.

• No-Code Installation: with the browser extension, there’s no need to install any additional code on your site/app.

• Collaborate & Communicate: assign and track each item in Usersnap with your team. Add labels, attachments and comments to work better together.

• Console Log Errors: client-side javascript errors are captured with the screenshot. Minimize your time troubleshooting.

• Metadata Analyzed: Usersnap automatically includes the environment data to the tickets. URL, browser info, screen size, time, and location are some examples.

Availability

Usersnapshot is available for download on chrome

20. Lorem Ipsum Generator Extension:

This extension provides an elegant and quick way to create default text or generate Lorem Ipsum. Optimized for quick usage, but it can customized.

Features

• Quickly delivers default text to complement your amazing design
• Easily customizable
• Each sentence is randomly generated to simulate real text.

Availability

Lorem ipsum generator is available for download on chrome

21. JSON Viewer:

The name explains the extension. It is automatically executed if a request to a URL returns JSON and presents it in a more readable, concise and accessible way. It is basically a port of Firefox's default JSON viewer.

Features

• Light and dark mode
• Filter the json object
• View response headers
• View the raw data returned
• Collapse/Expand all toggles
• Save the response as a JSON file

Availability

• Firefox has its own JSON Viewer
• Chrome Web Store: JSON Viewer
• Edge: Can install from the Chrome Web store

22. Session Buddy - Tab Management Extension

This is a chrome extension that allows developers to manage all open tabs in one place. It help users to easily restore open tabs whenever the chrome browser crashes.

Features

• Save open tabs as collections that can be easily restored later which helps to free up memory

• See and manage all open tabs in one place.

• Recover your open tabs after a crash.

• Search open tabs and collections to quickly find what you're looking for.

Availability

• Session Buddy is available for download on chrome

23. Pixel Perfect - Pixel Perfect Accuracy Extension

This is a chrome extension that helps develop accurate pixel perfect websites. It allows developers and designers to put a semi-transparent image over the top of the developed website as an overlay and make a pixel perfect comparison between them.

Features

• Multiple overlay support

• Separate overlays for each website

• Overlays are saved between browsing sessions

• Drag and drop file upload support

• Easy to use UI

• Paste from url and clipboard support

• Keyboard arrow keys and mousewheel support

Tips

• Double-click on header to expand/collapse main window

• Use Shift + arrow keys for 10px position change

Availability

• Pixel Perfect is available for download on chrome

24. ColorZilla Extension

• With ColorZilla you can get a color reading from any point in your browser, quickly adjust this color and paste it into another program. And it can do so much more....

Features

• Eyedropper - get the color of any pixel on the page
• Advanced Color Picker (similar to Photoshop's)
• Ultimate CSS Gradient Generator
• Webpage Color Analyzer - get a color palette for any site
• Palette Viewer with 7 pre-installed palettes
• Color History of recently picked colors
• Displays element information like tag name, class, id, size etc

Availability

• Colorzilla is available for download on chrome

25. Clear Cache

• This is a chrome extension that allows developers clear your cache and browsing data with a single click of a button.

Features

• You can customize what and how much of your data you want to clear on the options page, including: App Cache, Cache, Cookies, Downloads, File Systems, Form Data, History, Indexed DB, Local Storage, Plugin Data, Passwords and WebSQL.
• Cookies can either be removed globally, only for certain domains or for everything except for certain domains.

Availability

• Clear Cache is available for download on chrome

26. Grammarly

Grammarly helps you eliminate writing errors and find the perfect words to express yourself. You’ll get suggestions from Grammarly as you write on the web.

Features

• Contextual spelling checker.
• Grammar checker and suggestions.
• corrects critical spelling and grammar errors.
• Checks and eliminates plagiarism.

Tips

If you own a blog or write about your dev projects/tutorials, grammarly helps out with grammar errors you may have missed including tips to improve phrases and sentences.

Availiabilty

Grammarly is available for download on chrome and mozilla

27. OneTab

OneTab Saves All Your Tabs Into a Shareable List.

Features

• Convert all of your tabs into a list.
• Save up to 95% of memory because you will have reduced the number of tabs open.
• "Share as a web page" to upload your list of tabs into a web page in order to share them with others.
• Moving tabs into OneTab can speed up your computer by reducing the CPU load.

Availiabilty

OneTab is available for download on chrome and mozilla