9 min read
Every web professional knows that having the right tools as part of their workflow is essential. However, the wide variety of tools currently available can make this simple task seem daunting. Some tools may be outdated, lack certain features, or are just poorly maintained. They can have way too many dependencies, can be difficult to install, or are too large in size.
The Eye Dropper tool is a free extension that is available for use on Google Chrome and Chromium. This is a great tool for web and graphic designers since it allows designers to pick out any colour from a website. You can also define a desired color palette, and the extension will proceed to provide you with the corresponding colour codes.
What Font is the easiest way for designers to identify the fonts that are used on a website. This free Chrome Extension makes the process of detecting a desirable font super simple and quick. All you have to do is hover over the font you need to acquire and your font of choice will appear right away. As an additional asset, this tool also has the ability to detect certain services used to host web fonts, including: the Google Fonts API and Typekit.
The Clear Cache Chrome Extension makes it very easy to quickly clear cache without any complications or confirmation dialogs (e.g. popups). You can choose what specific data and how much of the data will get cleared. Customizable data options within this extension include: cookies, downloads, form data, plugin data, passwords, app cache, and much more.
The Web Developer extension consists of a main toolbar button, which - upon click - will display a variety of development tools. In addition to Chrome, this extension is also available for Firefox and Opera web browsers. Web Developer can successfully run on any of the operating systems these browsers support, including: OS X, Linux, and Windows. This extension serves a great purpose in making the developers’ testing environments much more efficient.
With the Wappalyzer extension, developers can get an inside look at the specific tools, frameworks, and software that go into developing and maintaining a website. With the reported ability to recognize up to 1169 technologies, this extension can help you determine the web technologies used for e-commerce, analytics, and content management systems just to name a few.
The Emmet Re:View extension provides an alternative to built-in browser responsive tools. A main feature of the Emmet Re:View extension is the "Device Wall” option, which allows designers and developers the ability to view multiple device viewports side-by-side. Additional features also include the ability to create custom CSS presets and the synchronization of various user interactions across multiple screens.
Awesome Screenshot provides a variety of tools to record and capture screenshots. You can edit your recordings or images with annotations, blurs, comments, and upload them to be shared. This can be a great tool for developers and designers that are looking to create demos and tutorials quickly but with their own unique customizations.
The Marmoset extension provides web developers and designers the ability to visually enhance the appearance of their code. The extension works by transforming the visual presentation of your code with pre-built themes and effects. For example, selecting the "Cobalt” theme and the "Kaleido” effect will transform your code to mimic the appearance of visuals within a kaleidoscope.
React Developer Tools is a Chrome extension that allows you to debug your React application. Some of the notable features include the ability to inspect and examine React components, and modify their state and props.