Skip to content
If you love to do web development like me, you should know the importance of having great tools in your web browser that simplify your work and boost your productivity. That’s the case of Google Chrome and the Chrome Extensions’ comprehensive offering that will boost your web dev productivity.
Yes, Firefox is an excellent browser for web development, and the Firefox Developer Edition is fantastic for CSS debugging and testing. However, Chrome has a long list of tool extensions that bring support for the latest web features and developer tools that make it a favorite among many web developers for boosting web dev productivity.
The Chrome Marketplace has some of the best extensions, oldest or new, to help developers develop and test a website or landing page. Below, you will know some of the best extensions that I suggest as “must-have” in your web dev toolbox.
Chrome Extensions That Boost Your Web Dev Productivity
Tag Assistant
Tag Assistant helps to troubleshoot the installation of various Google tags, including Google Analytics, Google Tag Manager, etc. Tag Assistant enables you to verify that you have installed different Google tags correctly on your page. Just navigate to any page, and Tag Assistant will tell you which tags are present, report any errors we find, and suggest improvements that can be made to your implementation. Most Google tags are checked, including Google Analytics, Adwords Conversion Tracking, Google Tag Manager, etc.
WhatRuns
Discover what runs a website—frameworks, Analytics Tools, WordPress Plugins, Fonts – you name it. WhatRuns extension is one click away for you to find technologies used on any website you visit. It detects even the new and upcoming tools and services from Developer Tools and Ad Networks to WordPress Plugins and Themes. Not just that – you can follow websites so that you get notified when they use new technologies or remove existing ones.
Vue.js Devtools
His name is very explicit. It is a Chrome and Firefox DevTools extension for debugging Vue.js applications. It allows you to inspect the Vue.js component hierarchies in the Chrome Developer Tools. You will get a new tab in your Chrome DevTools: “Vue.”
React Developers Tools
As the Vue.js Devtools, React Developer Tools is a Chrome and Firefox DevTools extension for the open-source React JavaScript library. It allows you to inspect the React component hierarchies in the Chrome Developer Tools. You will get two new tabs in your Chrome DevTools: “Components” and “Profiler.” The Components tab shows you the root React components that were rendered on the page and the subcomponents that they ended up rendering. By selecting one of the three components, you can inspect and edit its current props and state in the panel on the right. In the breadcrumbs, you can inspect the selected component, the component that created it, the component that created that one, etc.
[bctt tweet=”Chrome has a long list of tool extensions that bring support for the latest web features and developer tools that make it a favorite among many web developers.” username=”ThatCompanycom”]JSON Viewer Awesome
This extension assists you in visualizing the JSON response from any website or API request in your browser. It introduces you to awesome JSON prettify experiences. It has many unique features that make it awesome. It helps developers to format or prettify JSON and traverse to the properties in a graphical view. It has a friendly and interactive chart representing your server response or your provided JSON on the input section in the graphical view.
META SEO inspector
Useful to inspect the metadata found inside web pages, usually not visible while browsing. Metadata is not just the usual HTML meta tags, but the XFN tags, various microformats, the recently introduced canonical attribute, the no-follow links, etc. This extension is mainly aimed at web developers that need to verify the HTML of their site to follow the Webmasters’ Google Guidelines, but even to who is curious about any page contents that are usually not visible but can reveal interesting site properties. It also has a print/export option that lets you print or save as PDF the report or copy/paste the data in your preferred tool.
HTML Style Quick Viewer
HTML DOM element style quick viewer. Just move your mouse, and it shows the target’s styles.
CSSViewer
CSSViewer is a simple CSS properties viewer for Chrome and Firefox. To enable CSSViewer, click the toolbar icon and then hover any element you want to inspect in the current page.
Fonts Ninja
Identify fonts from any website, bookmark, try, and buy them. It analyses font files to get more accurate results. Rollover any text to get the font name and CSS properties. The main extension window will also display a summary of all font used on a website. You can get more information about fonts. Check how many styles are available, their foundry, and price.
I love adaptive – Mobile/Responsive testing
Tool for testing responsive websites. The ILOVEADAPTIVE Chrome Extension adds a button to your toolbar. When you click on the button, it will open the URL you’re on in the current tab. Main Features include preview an URL on multiple devices at once, filter the devices, filter the OS, change their quantity, zoom, show ios panel, switch to landscape and portrait.
Web Vitals
Measure metrics for a healthy site. Web Vitals are quality signals key to delivering great UX on the web (https://web.dev/vitals). This extension measures the Core Web Vitals, providing instant feedback on loading, interactivity, and layout shift metrics. It is consistent with how these metrics are measured by Chrome and reported to other Google tools.
Page Ruler Redux
A Web Developer\Designer ruler to get perfect pixel dimensions and positioning to measure elements on any web page. Page Ruler Redux is a core web developer and designer tool that allows you to get pixel-perfect measurements of web elements. It is designed for website front-end development, web design, or any task you may need to get perfect pixel measurements of any web elements.
Grid Ruler
Create grids and measure their distance easily. It allows you to create vertical and horizontal grids, Photoshop style. It has a ruler to measure the distance between your grids too.
Outline It
This extension outlines every HTML element on a webpage, allowing you to see the borders of elements. The extension supports all the rainbow (Red, Orange, Yellow, Green, Blue, Indigo, and Violet) colors. It also has the functionality to remove the outline after it has been applied.
Mobile Browser Emulator
Test mobile and responsive web pages on your desktop. Select the most common mobile screen resolutions with a single mouse click. The page of the active tab will open in a separate window.
Well, that’s my list of Chrome Extensions that I suggest you should have in your Chrome Browser to boost your web dev productivity. Yes, yes… There are other useful and cool extensions out there that I have not included in the list above. But, when the time comes, I will continue exploring other fantastic extensions that probably will be listed in a future blog.
