10 Useful Chrome DevTools extensions you should know in 2020.

Chidume Nnamdi 🔥💻🎵🎮

·

Follow

Published in

Bits and Pieces

·

6 min read

·

Feb 20, 2020

--

3

Listen

Share

“Progress isn’t made by early risers. It’s made by lazy men trying to find easier ways to do something.”

-Robert H. Heinlein

Bonus: Bit

Bit is not a chrome extension but it’s definitely a tool in the spirit of “making your dev life easier”.

Bit gives you the power to “harvest” reusable components from any codebase and share them to a component collection in bit.dev. Use it with your team to maximize code reuse (in and across repos), speed up development and make your codebase more maintainable.

So, whether you’d like to create your own private collection of reusable components or to browse an endless catalog, built by the open-source community, you may want to check out Bit (Github).

1. CSSViewer

This tool is super helpful in identifying and displaying the CSS properties of an element. It includes a floating-panel that you can hover around to examine elements on the page. CSSViewer lets you copy the selected CSS easily, by presenting it in an alert box.

It is much more advanced than the built-in version we have in the browser. That one only displays the width and height of the element that is under it.

2. Augury

This is my favorite and my number one DevTool extension.

Augury is a DevTool extension built by Rangle.io for debugging, profiling, and optimizing Angular projects.

Augury provides a rich UI in the DevTools, where you can:

• See the DI tree graph of the components
• Edit and change properties in components
• Emit events
• and so much more…

I personally find it useful when I want to know how deep a Change Detection trigger from a component can go down the component’s tree.

If you are an Angular developer and you are not using Augury in your DevTools, you are seriously missing out. Augury is everything you need to debug Angular applications right from your browser.

3. React Developer Tools

Think of React Developer Tools as an “Augury for React”.

This is an awesome DevTool built by the React team.

Just like Augury, React Developer Tools provides a rich UI where we can monitor the flows of events in your React components. You can inspect React components props and state, change the props and state at will, and see the changes propagate through the component tree.

One cool feature that I frequently use is the highlighting of re-rendered components.

4. JSONView

Browsers are generally not that good at displaying JSON data. The data is usually presented densely and in plain black-and-white, making it very hard to understand it, especially when trying to located deeply-nested properties.

JSONView formats and prettifies JSON data. It displays them in a colorful tree-view, making it much easier to identify properties and values.

5. Library Sniffer

I am usually curious to know what framework a webpage is built from and the libraries it is using.

LibrarySniffer helps a whole lot with that. This tool will provide you with details on a webpage, whether it is running on React, Angular, Vue, Svelte, Wordpress, etc. You know, in case you just want to know, just like me.

6. Web Developer

This is a suite of tools. Web Developer adds a toolbar to your browser. This toolbar has a lot of handy tools both programmers and designers can use in their everyday work, simplifying them. It ranges from adding outlines to elements, displaying rulers, finding all broken images on a page to changing the page’s layout, manipulating images.

It adds more of those frequently needed features to the default DevTools inspector.

7. Lambda Test

Browser compatibility is the bane of web development. How will your website render on different browsers is something that is always on a developer’s mind.

We usually opt to install different browsers in our machine so we can launch any to test our website on it.

This extension does it all for you. It enables you to take screenshots of your webpages across different browsers, both on desktop and mobile — giving you a quick and decisive answer to the compatibility question.

8. ColorPick Eyedropper

ColorPick Eyedropper has a floating-panel that hovers above the elements in a webpage, displaying the color of the element. A click on the element will copy the color of the selected element to the clipboard. It’s a great way to speed up the time it takes to discover, copy and paste a color.

9. CSSPeeper

Another excellent tool for inspecting and copying the styling of elements.

With CSSPeeper, you can hover over any element in a webpage, and copy the element’s styling in a single click of a mouse.

If you’ve ever tried copying CSS styling code from an element in the chrome inspector tool, you can easily understand the value that the CSSPeeper brings.

10. WhatFont

“Typography is two-dimensional architecture, based on experience and imagination”

-Hermann Zapf

What usually catches my eyes me when viewing a webpage, is the fonts in use. If I am awed by a font, I instinctively right-click to view the page source to inspect and reveal this source of marvel 😀 But, wow, that’s way too much work for such a simple (and common) thing.

WhatFont makes font viewing much easier. It lets you hover over text to quickly discover it’s font-family.

Conclusion

These were my favorites because they personally make my work a lot easier and fast.

If you have any questions regarding this or anything I should add, correct or remove, feel free to comment, email, or DM me.

Thanks !!!

Get my eBook

I have written an eBook that explains a lot of JavaScript concepts in simpler terms with reference to the EcmaSpec as a guide:

• Understanding JavaScript

Learn More