Ten chrome extensions for front-end developers (share)

This article will share with you ten chrome extensions for front-end developers. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

1. CSSViewer

This tool is used to identify and Useful for displaying CSS properties of elements. It includes a floating window that lets you hover over any element on the page to see all of its CSS properties. You can easily copy the style of your selected element in CSSViewer's form using shortcut keys.

Perhaps you may be wondering, isn't Chrome's own developer tools sufficient, why should I use it?

In fact, this plug-in displays more and more advanced information than the developer tools in our browser. In addition to the basic element's width and height box model, it also includes all the styles in effect and more.

2. Augury

Auury is created by Rangle. DevTool extension built by io for debugging, analyzing and optimizing Angular projects.

Auury provides a rich UI in DevTools. You can:

• View the dependency injection (DI) tree diagram of the component
• Edit and modify the properties of the component
• Emitting Events
• Wait...

Personally I think it works when I want to understand how the component's change detection triggers can go down the component tree Useful for how deep you go.
If you are an Angular developer and have not used Augury in your DevTool, then this is a shame. Augury has everything you need to debug Angular applications directly from the browser, give it a try.

3. React Developer Tools

This is a great DevTool developed by the React team.

Just like Augury, React Developer Tools provide a rich UI where we can monitor the flow of events in React components. You can inspect the properties and state of your React components, change them at will, and watch your changes propagate through the component tree.

4. JSONView

Browsers are generally not very good at displaying JSON data. The data is often densely displayed in pure black and white, which makes understanding it very difficult, especially if you are trying to locate a deeply nested attribute.
JSONView formats and beautifies JSON data. It displays them in a richly colored tree view, making identifying properties and values ​​easier.

5. Library Sniffer

I usually want to know what framework a web page is built on, or what libraries the site references.
Library Sniffer helped me a lot in this regard. This tool can provide you with detailed information on a web page, whether it is based on something like React, Angular, Vue, Svelte, Wordpress and other platforms or frameworks.

6. Web Developer

Web Developer will add the toolbar to your browser . This toolbar contains many convenient tools that both programmers and designers can use in their daily work to increase their productivity. It ranges from adding outlines to elements, showing rulers, finding all broken images on the page, to changing page layout, manipulating pictures, and more.
It adds these frequently needed features to the default DevTools inspector.

7. LambdaTest

Multi-browser compatibility has always been a troublesome thing for web developers. The rendering of your website on different browsers is something that developers are always thinking about.

We usually choose to install different browsers on our machines so that we can launch any browser on it to test our website.
This extension does everything for you. It allows you to take screenshots of web pages using different browsers on desktop and mobile devices, providing quick and conclusive answers to compatibility questions.

8. ColorPick Eyedropper

ColorPick Eyedropper has a floating panel that hovers over elements in a web page, displaying the element's color. Clicking on the element will copy the selected element's color to the clipboard. This is a great way to speed up the time it takes to discover, copy, and paste colors.

9. CSSPeeper

Another great tool for inspecting and copying element styles.

With CSSPeeper, you can hover over any element in a web page and copy the element's style with a single mouse click.

If you have ever tried copying CSS style code from an element in the chrome inspector tool, you can easily understand the value CSSPeeper brings.

10. WhatFont

When browsing the web, what usually catches my eye is what is going on in the page. The font used. When I'm interested in a piece of text and want to see what font it uses, I subconsciously right-click to open the developer tools and view its source code. However, this is still too cumbersome.

WhatFont Makes font viewing easier. It allows you to quickly see the font used by hovering over text.

Conclusion

The above is just based on my own understanding. These extensions make my work easier and faster.

If you have anything to add to the above content, please leave a comment and let me know, thank you!

Original source: https://blog.bitsrc.io/10-top-chrome-extensions-for-front-end-developers-db23a01dce1e

More For programming related knowledge, please visit: Programming Teaching! !

The above is the detailed content of Ten chrome extensions for front-end developers (share). For more information, please follow other related articles on the PHP Chinese website!