Since my internet connection is extremely slow right now, it is really hard to do any coding. You will not be able to search for a simple error message and get the results. Well, maybe get it in the next 20 minutes or so :) which is irritating even if you are not in my shoes, thus i will try to be productive and write my next post this week about some of the extensions i find useful to use. They will be beneficial also even if you are a UX-UI developer/design.
Now as you develop your apps fixing bugs and stuff, these tools are going to be really handy. These are short sections after every subheading to not bore you out and you still read the whole post.
And to the point :)
Table of Contents
ColorZilla
Whatfont
Corporate Ipusom
Wappalyzer
Web Developer Checklist
CSSViewer
JSONViewer
Code Cola
React Developer Tools
Augury
ColorZilla
Every developer's best option when it comes to colors. With over 5 million downloads and 1.3 million users, it is really easy to use. You simply click it and hover over the color you want to copy and there it is copied to clipboard. It also includes palette viewer, gradient generator and picked color history.
Whatfont
Whatfont is basically a Colorzilla for fonts. It is extremely easy to use. You click it and hover over the font you want to identify and you have it. Unlike other complex fonts programs like (WhatTheFont) Whatfont is so flexible.
Corporate Ipusom
A handy tool to generate lorem ipsum text. You can filter content by word or paragraph. You can even specify the number of words you want to generate. You use it by specifying the number of words you want and click copy that is it.
Wappalyzer
It is one of the most popular extensions out there. Every programmer lives by it to identify which technologies are used on the website he is exploring. It a utility developed in 2009 by Elbert Alias. It can detect over 1000 technologies (frameworks, e-commerce, programming langs, search engines and so much more).
Web Developer Checklist
The name speaks for itself, does not it? :) It checks your webpage for any web design violations, best practices, usability, and accessibility. It is the best on this list. Give it a go.
CSSViewr
Such a great tool for your CSS coding. It provides the CSS information every dev needs. It has a panel that reports with information on the section you hover on including font, color, background box, attributes, and positioning.
JSONViewer
A simple yet beneficial tool for displaying your JSON/JSONP files on the browser. It comes with additional features like:
- Clickable URLs (optional)
- Collapsible nodes
- 27 built-in themes
It is also open source. Click here for more.
Code Cola
It allows you to view the source code of the app you are working on. And it provides an easy-to-use editor to edit and share your CSS code on the fly.
React Developer Tools
I could not leave that out, right? It is created by the React team. It provides rich UI where you detect the flows of events in your React app. You can inspect React components props and states and even change them and see the change through the components tree.
Augury
It is similar to (React Developer tools) for Angular. It is used for debugging, profiling and optimizing Angular projects. It provides a rich UI in the dev tools where you can:
- Edit and change properties in components
- See the DI tree graph of the components
Conclusion
My list has come to end. If you like this post, make sure you like it. Have a good day and thanks for reading :)
Top comments (1)
Thank you very much for sharing these amazing resources, I will suggest you should have provide the URLs for all the resources.
Thank you