It's time to have another look at our toolbox! We've already published two blogposts in the series — with top plugins for Android Studio and for Sketch. This time we explore our front-end developers' favorite Chrome extensions.
We believe that the list will serve both experienced coders and beginners. Seniors can use it as an inspiration to refresh their toolbox. And as for juniors - we can't promise that the listed tools will make you a front-end superstar instantly, but we're quite sure they'll be helpful on the way!
Dimensions, Page Ruler
Dimensions is a very useful extension when you want to make a pixel-perfect website - and you should always aim at making a pixel-perfect website! With this plugin, you can simply measure all the sizes and distances between elements, such as the sizes of inputs or the distances between images. Page Ruler works the same way as Dimensions but you can select your own area to measure and check how big it is.
Speaking of pixel-perfect websites... Have you ever heard from a designer that your page isn't exactly the same as his design? With this extension you can prove him wrong! PerfectPixel allows you to add a semi-transparent overlay with the design and check if there are any differences. And surely there are none!
Window Resizer can improve the way you test your website's layout on different devices. You can save presets with dimensions you most often need and simply change your browser's window size. It also allows you to swipe the orientation of the device from horizontal to vertical to emulate the behavior of smartphones.
React Developer Tools
This extension allows you to inspect hierarchies of components in your React application. It works only for React and you can find it as a new tab in DevTools (called React). You can also check the props and state of the selected component. The really good thing is that if you select any element in the Elements tab in DevTools it will be also selected in the React tab, so you don't have to waste time to look for it twice.
The name speaks for itself in this case! With What font you can identify the font used on the page without checking it in DevTools. You can also see other details: size, line height, style, weight and color of a selected text. Saves lots of time!
The end of the color struggle! With ColorZilla you can check every color on your website and get its hex number using simple picker. Besides, there's complete information about class, id, tag name and size of the selected element. The extension also includes a link to the CSS gradient generator and the history of recently picked colors.
Bonus! How to enable dark theme for DevTools?
Do you enjoy using dark theme for macOS system or your code editor? You can easily have it the same way in the Chrome browser DevTools. This time there's no extension needed - you can quickly enable it in the Settings. Here's a step by step guide. Make your working environment classy!
Anything to add? Feel free to share your suggestions in the comments!
About the Author