Став веб-разработчиком, любой человек начинает проводить много времени в своей консоли в браузере.



Ниже приведены некоторые инструменты, позволяющие проводить там меньше времени (для Chrome):



♦️ WhatFont  – В названии отражена вся суть. С помощью этого расширения можно определить, какие шрифты использует понравившийся вам сайт, с тем чтобы использовать их и в своих проектах.



♦️ Pesticide  – Полезен для просмотра внешних границ ваших <div> и изменения CSS. Это был просто спасательный круг, когда я пытался изучать box-model.



♦️ Colorzilla  –  Полезен для копирования цветов сайта. Инструмент копирует цвет прямо в ваш буфер обмена, поэтому не нужно тратить много времени на подбор правильной RGBA-комбинации.



♦️ CSS Peeper – полезен для поиска цветов и ассетов, использованных на сайте. Когда вы только начинаете, хорошим упражнением служит точное копирование сайта, который вам кажется привлекательным. Этот инструмент позволяет вам заглянуть «под капот» сайта и посмотреть как цветовую гамму, так и другие ассеты страницы.



♦️ Wappalyzer – Полезен для просмотра используемых на сайте технологий. Вам бывало любопытно, какой фреймворк используется на сайте или на чем основан какой-то сервис? Можете дальше не искать.



♦️ React Dev Tools – Инструменты полезны для отладки ваших React-приложений. Естественно, это вам пригодится только если вы программируете приложение React.



♦️ Redux Dev Tools – Полезны для отладки приложений, использующих Redux. Конечно, они вам пригодятся только если вы внедряете Redux в своих приложениях.



♦️ Vimeo Repeat and Speed – Полезен для ускорения видео Vimeo. Если вы смотрите обучающие видео (как и большинство разработчиков), вы знаете, как удобно бывает установить скорость просмотра на 1,25 вместо обычной 1,0. Также есть версии для YouTube.