Development
Google Chrome extensions are very productively-based helpers directly implemented in your browser. They can help you reveal certain information about the webpage itself and provide a much simpler way to find out, rather than trying to do everything on your own and inspecting every page you come across.
1. Font Ninja
Font Ninja is a free extension for detecting all the fonts on a webpage, as well as the font weight, font size, line height, spacing and colour.
When pressing the font ninja icon on the toolbar, a window will show up with all the fonts displayed on the webpage. The bookmark option provides a saving feature on fonts that you can come back to later in the saved tab.
The info option displays additional information about the font, font italics, font weights and where you can buy the font, for how much money.
CSS Viewer
CSS Viewer is another free extension for getting styles about HTML elements. For text, the extension can display all of the properties that exist for texts and what properties were set.
Simply clicking on the icon in the extension toolbar will bring this window up, then you can point at any element and the information about the DOM will show up.
JSON Viewer
JSON Viewer as the name suggests is a formatted view for JSON pages and data retrieves. This extension does not need any start action, the extension just simply displays the page in a formatted view on its own.
There are a lot of settings that you can tweak, theme properties, spacing properties all the way to custom styles written in CSS.
Lorem Ipsum generator
Lorem Ipsum generator is simply a generator for placeholding text. You can select from how many paragraphs you want to generate as well as how many sentences in each paragraph.
This extension must be started in order to work in the extension toolbar by clicking the Lorem Ipsum generator icon.
ColorZilla
ColorZilla is a free extension that simply serves a colour-picking function for any element on a webpage, for example, text, images and videos.
This extension can run from the extension toolbar by clicking the ColorZilla icon and the colour-picking window will show up.
Window Resizer
Window Resizer functions as an extension tool for web-responsivity testing. The extension provides only 7 devices but these are only the preset ones, you can create your own device in the settings > presets.
The extension can be run when you click the Window Resizer icon in the extension toolbar and a small window with all the devices will show up.
React Developer Tools
React Developer Tools is a debugging React tool for React projects in the browser Google Chrome. This extension lets you inspect React components and the React DOM directly in the Chrome Developer Tools and adds 2 new tabs — Components & Profiler.
This extension can be run from the extension toolbar by clicking the React icon. React extensions can be run only on React projects because the extension itself will not let you run it.
Conclusion
Extensions can be a huge time-saver especially when you are gathering resources for your project by not constantly checking the inspect page. These were the Chrome extensions that I consider the most useful in what can contribute to your web development project. I hope, these will offer a great time using them.
More content at PlainEnglish.io. Sign up for our free weekly newsletter. Follow us on Twitter and LinkedIn. Check out our Community Discord and join our Talent Collective.