Chrome is the most popular internet browser in the world right now.

In terms of user share, Google Chrome is well ahead of other major browsers like Mozilla Firefox, Safari, and Microsoft Edge. In just over ten years, Google Chrome has managed to surmount well over 60% of the market share.

As web developers, we work in a fast-paced industry and staying on top of things can be a challenge and that’s why I believe we should take full advantage of whatever tools we have at our disposal to help.

So Today post, I’m going to present thirty Chrome extensions that are geared to optimising your development workflow, and I hope that these extensions can make you that little bit more productive.

1. JSON Viewer Awesome

This extension assist you to visualise JSON response from any website or API request in your browser.

It introduces you with awesome JSON prettifying experiences. It has many unique features that makes it awesome and helps developers to format or prettify JSON and traverse to the properties in graphical view.

It has a nice and interactive chart to represent your server response or your provided JSON on input section in graphical view.

2. Dimensions

Dimensions is an extension that 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. It doesn’t work with images because there the colours change a lot pixel to pixel.

3. Lighthouse

Lighthouse is an open-source, automated tool for improving the performance, quality, and correctness of your web apps. When auditing a page, Lighthouse runs a barrage of tests against the page and then generates a report on how well the page did. From here you can use the failing tests as indicators on what you can do to improve your app

4. Daily 2.0

Replace your new tab with the latest trending dev news! Daily is a dev news curator delivered to your new tab. It gathers articles from tens of different sources, especially for you. It is helping you to boost your knowledge.

5. Clear Cache

Clear your cache and browsing data with a single click of a button. Quickly clear your cache with this extension without any confirmation dialogs, pop-ups or other annoyances.

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 specific domains or for everything except for specific domains.

6. Baseline

An extension for designers and developers who care about vertical rhythm. This tool will add a grid layer on top of any website to be used as a guide when developing interfaces.

You can set the horizontal guides to match your specification as well as the starting point, in case you’re only concerned about individual modules of your site.

7. Web Developer Form Filler

This extension is used by developers to make it easy to fill forms while developing web-pages

8. Quick JavaScript Switcher

Quick JavaScript Switcher is a Chrome extension that enable / disable JavaScript on the fly by hostname, and subdomain.

9. PHP Console

Display PHP errors & vars dumps in Chrome’s console and notification popups, execute PHP code remotely. Handle PHP errors/exceptions, dump PHP vars, execute PHP code remotely and do other cool things using this extension and it’s server side PHP library

10. ng-inspect for AngularJS

ng-inspect helps you access properties of the element’s scope when an element is selected using the Element Inspector or the Elements tab in the Developer Toolbar in an Angular JS application.

This extension will provide access to scope, isolateScope[if the scope is isolated], rootScope, jQuery element and its events[if jQuery is included in the page]. These properties are made available to the Global/Window object via $s for scope, $is for isolateScope, $rs for rootScope, $el for jQuery element and $events for the events associated with the jQuery element.

Services/Factories/Constants can be tested/verified using $get function. $count function prints number of Scopes, isolateScopes, listeners and watchers.

11. Lorem Ipsum Generator

The Lorem Ipsum Generator quickly delivers default text to complement your fantastic design. The default settings are optimized to be used right after installation, but you can easily customize a few settings to get the perfect text for your taste. Each sentence is randomly generated to simulate real text.

12. HTML Validator

HTML Validator for Chrome is a browser extension that adds HTML validation inside Developer Tools of Chrome. The number of errors of a HTML page is seen with an icon in the browser status bar. The details is seen in the developer tools.

The extension is based on Tidy. The algorithm was originally developed by the Web Consortium W3C. The algorithm is embedded inside your browser and makes the validation locally on your machine, without sending HTML to a third party server.

13. Fontface Ninja

Fontface Ninja is a browser extension that let you inspect, try, bookmark and buy fonts on any websites.

14. WhatFont

What is the easiest way to find out the fonts used in a webpage? Firebug and Webkit Inspector are easy enough to use for developers. However, for others, this should not be necessary. With this extension, you could inspect web fonts by just hovering on them. It is that simple and elegant.

It also detects the services used for serving the web fonts. Supports Typekit and Google Font API.

15. Web Developer

The Web Developer extension adds a toolbar button to the browser with various web developer tools. This is the official port of the Web Developer extension for Firefox.

16. Color by Fardos

Pick colours from websites, save colors & gradients, get matching shades and tints and create beautiful gradients.

17. Px to Rem

A simple calculator to convert pixel values to rem values, just open up the popup window and add the pixel sizes you want to convert in the text area and the list will be automatically updated with the rem versions of those pixel values.

You can also set the base pixel value too. Best of all, the values are stored locally so whatever changes you make will be there when you open the popup window.

18. 30 Seconds of Knowledge

Gain new developer skills every time you open a New Tab! Choose which programming languages you want to get better at in extension options and get smarter every time you open a New Tab. All you need is 30 seconds to read and understand snippets of code and improve your knowledge. Saw something useful? Just copy/paste it into your code and you’re golden!

19. Keyframes

Keyframes are an insanely simple and incredibly useful tool for creating CSS animations right in your browser, without needing to switch between your browser and editor.

Simply click the extension, pick the element you want to animate, then edit the animation using a simple UI and timeline that represents the Keyframe percentages in the animation.

20. CSS Scan

CSS Scan is the fastest way to inspect and copy CSS. Visualise the CSS of any element you hover over instantly and copy its entire CSS rules with a single click.

21. CSS Peeper

CSS Peeper is a CSS viewer tailored for Designers. Get access to useful styles with this Chrome extension. CSS Peeper mission is to let Designers focus on design, and spend as little time as possible digging in a code.

Ever wondered what’s the line-height, font or a button size on a website? We provide you the ultimate tool to satisfy your curiosity. This enable you to inspect code in the easiest possible way. Check the hidden CSS style of objects, colors and assets on the web.

22. Check My Links

Check My Links is a link checker that crawls through your webpage and looks for broken links.

23. Wappalyzer

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

24. Toggl

Puts a timer into any web tool and allows quick real time productivity tracking with all the data stored on your Toggl account. Whether you use Trello, Asana, Todoist, Jira or one of the 100+ integrated tools, start tracking time without opening a new tab. Toggl timer can now also fill your Pomodoro needs through automated reminders.

25. SEO Analysis and Website Review

SEO Analysis and Website Review by WooRank is a free Chrome extension that instantly provides a deep review of a domain’s on and off-site site data to give a complete picture of a website’s optimisation.

The SEO Analysis and Website Review extension will analyze the website you’re currently visiting in your browser and generate a clear, actionable report to highlight any issues impacting the reviewed site’s accessibility, readability, usability and find-ability.

26. Marker – Visual bug reporting for websites

Marker makes it easy for product teams and digital agencies to collect and report website feedback, without driving developers crazy.

27. LambdaTest Screenshots

Take fullpage screenshots of your website or webapps across 2000+ different browsers. Make sure that your webpage is cross browser compatible and responsive across all major browsers, browser versions, operating systems, mobile devices, and resolutions.

All screenshots will be taken on real browsers running on real operating systems on cloud connected real machines. These screenshots will help you in quickly finding browser compatibility issues of your webpages. You in making sure that your end users get similar experience across all platforms.

28. AMP Validator

The AMP Validator will check the current page to see if it is an AMP page and then run it through the AMP validator and report if the page passes (green) or fails (red) via the extension icon.

29. Bootstrap Grid Overlay

Quickly toggle a Bootstrap Grid Overlay that automatically uses your application’s styles to determine how it looks. Click the Bootstrap Grid Overlay icon to toggle the overlay on and off. If Bootstrap Grid Overlay finds the Bootstrap grid classes in any of your application’s CSS files, a Bootstrap grid will be displayed based on those styles.

30. React Developer Tools

React Developer Tools is a Chrome DevTools extension for the open-source React JavaScript library. It allows you to inspect the React component hierarchies in the Chrome Developer Tools.