For most web developers, Chrome will be one of the most used tools within your development toolbox. This means that any additional tools and efficiency that you can make debugging and coding in Chrome can save you a significant amount of time over your career

I'm a self-confessed productivity geek. This means that I'm always. keeping a regular eye on what new developer-related extensions are being released and that's why in this video I'm going to share 8 extensions that I know will allow you to work smarter and not harder

Stick around so you can potentially learn about some extensions that may save you from countless hours of unneeded pointing and clicking and manually debugging stuff🔥🔥🔥

Requestly: The first extension I want to mention is Requestly. Requestly in my opinion is one of the most powerful developer tools for Chrome. After installing Requestly you will have access to a proxying tool inside of Chrome.

If you have not come across poxy tools before, then in simple terms, it is a tool that will allow you to change any incoming or outgoing network request made by a web page. Requestly uses a rule-based approach that allows you to add, edit, delete, and alter requests. Being able to manipulate requests is really helpful for testing and building web apps. For instance, using a proxy you could:

  • Mock an API end-point that does not exist yet
  • Inject scripts
  • Test edge cases when rendering data returned by an API
  • Dev without having to run a local API server
  • Strip content security policies from a request
  • Access/edit HTTP header values like an access token when calling an API

After I found out about Requestly I uninstalled two extensions that used to I use a lot, Disable Content-Security-Policy and ModHeader.

Visual CSS Editor: Visual CSS Editor contains an interface that will allow you to make real-time visual changes to a website. If you're trying to debug an issue, or, simply find some inspiration while coming up with a design, it's much easier to use the editor, rather than change the HTML yourself manually, add inline styles, etc...

*Wappalyzer *: Wappalyzer will allow you to run a scan on a website and then it will generate a report detailing all the technologies that the site uses. Wappalyzer is not the only tool that provides this time of service. As part of this article, I also tested the BulitWith and WhatRuns extensions. From my comparisons, I found that Wappalyze found the most options and it was easier to read the results.

Environment Marker:

Session Buddy: I do demos for clients a lot. Each demo will have different URLs, so using sessions buddy I can prep all my demos at the beginning of e the week and then use session buddy to load each demo when needed. This is the same as when you work on lots of projects. Instead of having different debugging windows and production sites, save them to sessions, and off you go.

Web Vitals: The web vitals extension provides you with an easy access way to get information about the current web page using key metrics like LCP, FID, and CLS. Improving Web Vitals is a crucial ongoing task you should check on because it directly contributes to a better user experience and higher engagement on websites. By optimizing loading speed, interactivity, and visual stability, you create a smoother and more enjoyable browsing environment, you should see an increase in user satisfaction as well as higher search engine rankings.

Hard Refresh:

Web Developer: I consider the web developer extension the Swiss-army knife extension for web developers. After installing this extension, you will have over 50 different web developer-related features for you to make use of. Expect These features include clear caches, view cookies, rulers, view grids,

GoFullPage: The GoFullPage Chrome extension is a game-changer for capturing full-page screenshots with remarkable precision. Its intuitive interface and customizable options allow users to effortlessly capture entire web pages, enabling designers, developers, and content creators to showcase their work seamlessly. With its ability to capture even lengthy pages in a single image, GoFullPage proves to be an invaluable tool for visually preserving online content.

Happy Coding 🤘