Anastasia đđ»ââïž*header pic by Shen Comix
Developers spend a lot of time using browsers. As of February 2021, 63% of worldwide Internet users prefer Google Chrome over other web browsers. And itâs not surprising because Google Chrome boasts its wide collection of extensions that extend browser functionality. So instead of installing additional software and tools, you can create your personal extensions toolkit that you can take with you wherever you go â just log into your Google account on any other device with pre-installed Google Chrome and sync the data.
We asked our developers at actiTIME to share their favorite Google Chrome extensions that they use on a daily basis and compiled this comprehensive collection of development and productivity extensions. Save this list to get back to it anytime.
Table Of Contents
Chrome Extensions for Developers
Chrome Productivity Extensions
- Privacy Protection
- Time & Task Tracking
- Screenshot & Video Recording
- Ad Blocking
- Bookmarking & Notetaking
- Developer News
Chrome Extensions for Developers
Web Design Tools
Sitemod.io
Sitemod.io is a must-have extension in your developer toolkit. It allows you to edit, save and share any website without having access to the source code of the website. With this extension, you can edit or add your own HTML, CSS and JS code to any web page. After that, you can create a shareable link to the modified website.
This extension is of great help for everyone related to web design:
- freelancers and agencies that can edit their websites in real time
- sales and marketing teams who can install their apps on customersâ websites
- website owners who can test web apps using only this browser extension
CSS Viewer
CSS Viewer is a Chrome Extension originally developed for Firefox. Nicolas Huon, its original creator, stopped supporting the original extension in 2008 so a GitHub user created a port to Google Chrome, released it under a public license and issued several versions with new features and fixes.
As the name suggests, CSS Viewer displays CSS properties of any object that you point your mouse on. It displays font, color and positioning properties.
WhatFont
WhatFont is a Chrome extension that allows you to identify fonts used on web pages. After you hover on text, a popup appears that displays font family, size and line height. It also detects the services used for serving web fonts. Supports Typekit and Google Font API.
WhatFont is a lightweight solution for web developers who collect examples of great pages. This is especially useful whenever you find a website that uses a beautiful font that is not on the list of standard fonts pre-installed on your OS.
Window Resizer
This extension resizes browser windows to emulate different resolutions. All you need to choose a device from the list and see what your layout looks like on this device.
Window Resizer is completely customizable: you can add, edit, delete and re-order presets. Use keyboard shortcuts to navigate the popup, assign them to the tools you use the most and sync them between the devices.
Web Development Tools
Web Developer
With more than 1 million users on the Chrome Web Store, this extension is a must-have. Web Developer adds a set of useful web development tools to your browser pertaining to cookies, CSS, forms, images, page information and more. For example, you can disable JavaScript, view the Meta tag page information, resize the browser window and more.
Web Developer Checklist
Web Developer Checklist is a Chrome extension that helps you identify website problems. It will check website performance, usability, semantics, SEO, code quality, accessibility, security and more. This extension is especially useful when you need to make sure that your website page works fine before you publish it.
So, you can use this extension as a task reminder to coordinate web development progress and identify website problems before the delivery.
Redux DevTools
Redux DevTools is one of the most useful and powerful tools for powering up Redux development workflow or any other architecture which handles the state change. One of its benefits is that it makes it easy to trace actions and state changes. Other features include action skipping, time travel, custom dispatch, allow/block actions and more.
Redux is one of the most adopted state management libraries for large-scale React applications. Learn how to set up Redux DevTools in your environment.
JSON Viewer
If youâve ever worked with JSON code like APIâs (especially RestFul APIs), then you know how unreadable and clumsy JSON code is. This Chrome extension highlights syntax in online and local JSON files making it more visually appealing and straightforward.
JSON Viewer is a great lightweight extension that allows you to view and edit JSON right in Google Chrome without having to resort to other standalone apps.
Vue.js devtools
Vue.js devtools is a Chrome extension that scales between a library and a full-featured framework. It allows you to edit component data, load components in the DOM, track custom events, monitor route history and data, debug Vuex behavior and time travel across previous states.
The best thing about this extension is that it is equally accessible for novices and seasoned developers. Advanced users can easily tweak it to suit their needs.
React Developer Tools
React Developer Tools is a Chrome DevTools extension for the open-source React JavaScript library for building user interfaces. This extension provides an extra set of React-specific inspection widgets to assist you with development.
React Developer Tools offers significant performance gains, improved navigation experience, visual and functional improvements, which make code debugging easier.
AJAX Debugger
This extension logs all AJAX activity to the Dev Tools Console, allowing inspection of AJAX calls, and open calls in a new tab with all the inputs. IT allows developers to easily see top-level request info, like the HTTP status, response time, and size.
Logged data includes files called, response time, size and status, AJAX source link with all input parameters, object containing all request and response details and more.
Website Analysis
Wappalyzer
Wappalyzer extension identifies tools and technologies behind web pages. These include more than a thousand of different web services, CMS, analytics tools, plugins, JavaScript libraries and more.
Alternatively, you can also visit the official website of the extension, where you can search for any website and see what technology it uses.
Lighthouse
Lighthouse is an open-source tool by Google that audits website performance, accessibility, progressive web apps, SEO and more. Choose a page you want to audit, click the extension button and press âGenerate Reportâ. A new tab will open with page quality results.
You can also run Lighthouse in Chrome DevTools, from the command line, or as a Node module. The extension just allows you to access this functionality in a few clicks.
Check My Links
This extension crawls through the page, looks for working and broken links and highlights these. It allows you to automate the link fixing process.
Load your page, select the icon and a popup with the link stats will appear. Depending on the size of the page, the scanning process may take a few seconds.
GitHub & GitLab Tools
OctoTree
OctoTree enhances GitHub code review and exploration. First of all, it displays a tree view of the repo in a collapsible sidebar. More than that, it provides fast IDE-like code tree, Quick file search, GitHub themes, private repositories support, Omni bookmarking and more. OctoTree feels a lot like Visual Studio Code in Github.
Premium features include 20+ themes, code font settings, quick PR navigation, pull request code review, sidebar docking position, multiple GitHub accounts and more. Paid plans for individual users cost $35 per year and $50 per user per year for teams with more than 5 users.
OctoLinker
Another browser extension for GitHub that turns language-specific statements like âincludeâ, ârequireâ or âimportâ into links to the source code. Youâll just need to click on the reference to access it.
The extension supports most web development languages, except for the C family.
Enhanced GitHub
This tiny browser extension displays the size of each file, download links and copies file contents directly to the clipboard. For private repos, youâll need a GitHub Access Token.
Enhanced GitHub is an appealing Chrome extension that aims to improve GitHubâs functionality by a very minor, yet fairly important, margin. Highly recommended.
Chrome Productivity Extensions
Privacy Protection
Ghostery
This extension detects and blocks ads, trackers and other tools that record your behavior and slow down the page download.
Ghostery not only eliminates annoying advertisements from a website and blocks third-party tools and websites from tracking you. It is free of cost and requires no sign-up or registration to get started.
Clear Cache
This is a tiny tool that requires an extended set of permissions to clear your cache in a few clicks. It allows you to choose other data options to clear: app cache, cookies, downloads, form data, history, plugin data, passwords and more. You can delete cookies globally, for certain domains or for everything except for certain domains.
Time & Task Tracking
actiTIME
actiTIME is a handy time tracking extension that integrates with any developer and other browser-based tools. All you need is to create a free account, add a list of tasks and use the extension timer to track time against tasks.
In the full actiTIME web interface, you can review your working hours in a weekly timesheet. More than that, you can build charts and reports to see how your time distributes across tasks and projects. For individual users and teams up to 3 users, actiTIME is free to use. For larger teams, pricing plans start at $5 per user per month.
Focus To-Do: Pomodoro Timer & To Do List
This extension combines the Pomodoro timer and basic task management features. Create task lists, use the timer and review your performance using visual charts and reports.
The greatest downside of this extension is that you only get 2 days of free app access. After that, you are required to purchase a premium plan starting at $2.99 per three months. Even the smallest features such as cloud backup and reports are premium.
Screenshot & Video Recording
Awesome Screenshot: Screen Video Recorder
Developers often need to take screenshots and record videos to give proof to illustrate concepts or prove that everything was working a moment ago. This extension allows you to take screenshots, record screen and even capture sound and video from your mic and camera to help you make sure that you make yourself clear.
Additionally, you can annotate screenshots, connect with tools like Slack, JIRA, Asana and share the visuals instantly.
Vimeo Record â Screen & Webcam Recorder
Vimeo Record is a premium browser extension that allows you to record and share video messages. All you need is to choose what to capture â your screen, voice, face â a start recording.
With the cheapest paid plan that will cost you $12 per month, youâll get player customization, privacy controls, unlimited screen and webcam recording and 5GB of disk space per week.
Ad Blocking Extensions
AdBlock â best ad blocker
This extension is a free adblocker that blocks ads on websites, video streaming platforms â everywhere. It also protects your browser from malware and stops advertisers from accessing your browsing history and personal information.
This extension is a part of the Acceptable Ads program meaning that unobtrusive ads are not blocked by default in order to support websites. At the same time, you can choose to remove all the ads in the extension parameters, set up white lists and filters manually.
Adblock Plus â free ad blocker
Ablock Plus is a free ad-blocking extension that blocks ads, banners, pop-ups and malware. More than that, it stops third parties from tracking your online actions, boosts page loading (as fewer resources are required to be loaded).
This extension is also a part of the Acceptable Ads program but you can always choose to turn it off and block all the ads at any time.
Bookmarking & Notetaking
Google Keep Chrome Extension
This is the official browser extension for Google Keep. You can save web pages, images, quotes â anything on the web for later with this handy tool. As in case of other Google apps, all your saved data will be automatically saved in the cloud and synced across devices.
Additionally, you can take notes on saved content, add labels and store all the things in one place for free.
Bookmark Sidebar
Bookmark Sidebar adds an attractive and clean toggleable sidebar with your Google account bookmarks at the edge of your browser window. You can edit, delete or rearrange your bookmarks by dragging and dropping and view basic information by hovering on it.
Chrome Developer News Extensions
Daily.dev
daily.dev is a resource for busy developers who want to get hot news from the best tech blogs. This browser extension replaces your new tab with the daily.dev tab with top articles. You can also personalize the feed and choose tags and resources to get news from.
This extension is open-source, safe and secure. It requires no sign-up, but with your personal account, you can vote, save and share articles youâve enjoyed the most.
Devo
Devo is another new tab extension that shows GitHub Trending topics, Product Hunts, Hacker News and other top news and front pages with no-login required.
You are free to change the placement of the cards, manually update the sources and display whatever platform youâd like to in different order. The latest list of platforms includes GitHub Trending, Hacker News, Product Hunt, Designer News, DEV Community and Lobste.rs.
Ready to Level Up Your Development Tools and Skills?
The best productivity advice we could give to you is to keep track of your time and be mindful of how you use it. Because no tips and tricks, no browser extensions can help you advance with your career if you use your time unproductively. So if you are not sure with what Chrome extension to start, we recommend trying actiTIME.
actiTIME is time tracking software that is free for individual users and small teams of up to 3 users. You can track time with the browser extension, log time manually in an online timesheet or use our free mobile app to use timers or record hours manually. actiTIME easily integrates with your favorite tools including JIRA, GitHub, GitLab, Trello and 2,000+ more software. Review your project progress, productivity trends, calculate your cost of work for clients and more with actiTIME â create your account for free.
