A list of extensions that every web developer must have
Please leave a star.
To contribute, follow the contributing guidelines
- OctoTree : This extension puts github on steriods. Gone are the days of ugly looking github repositories.
- 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
Octotree is available for download on chrome and mozilla
- 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.
- 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
Octotree is available for download on chrome
- Windows Resizer : This extension re-sizes the browser's window in order to emulate various resolutions.
- 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
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.
- 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
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
- Hover over any html element and get all the css properties attached to it.
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.
- 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
Pesticide is available for download on chrome and firefox
- Wappalyzer : This extension is a technology profiler that shows you what websites and web applications ae built with.
- 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.
Wappalyzer is available for download on chrome and firefox
8.Screencastify : This extension helps to capture, edit and share videos in seconds.
- 🎥 Record
- Desktop, browser tab or webcam capture
- Narrate with your microphone’s audio
- Embed your webcam into the recording
- Full HD resolution
- ✂️ 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)
- 🚀 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
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
- 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
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.
- 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
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.
- 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.
Web developer is available for download on chrome and firefox
