it-blog.club
4 особо важных расширений Google Chrome для web разработчика

4 особо важных расширений Google Chrome для web разработчика

Скажу честно я не являюсь фронтенд разработчиком, но по долгу службы зачастую приходится влезать в вёрску страницы, ну или верстать самому. В данной статье я бы просто хотел перечислить 4 расширений для хрома, которыми пользуюсь сам лично, а так же которые ускорят вашу работу.

Вы можете быть как уже профессионалом своего дела, так и только делать первые шаги. В любом случае советую всем, как фронту так и беку, использовать данные расширения которые помогут вам писать действительно красивые и ровные страницы.

Page Ruler

Первым расширением в списке будет Page Ruler. Это по большому счёту отличная линейка которая работает областями. То что нужно если вам нужно пододвинуть пиксель влево - пиксель вправо. Ну или просто проверить как ровно расположены ваши блоки на странице.

1.png

С помощью данного расширения вы сможете "вылизать" свою вёрстку до каждого пикселя. Так что рекомендую использовать его в своей работе.

Fontface Ninja

Бывали когда нибудь проблемы со шрифтами? Думаю, что да. Но с помощью данного расширения вы сможете при обычном наведении на текст узнавать какой шрифт используется в данном блоке.

  • Название шрифта
  • Размер
  • Ширина
  • Цвет

Работает при обычном наведении на текст. Так же отрабатывает быстро и без проблем.

2.png

Eye Dropper

По своей сути, Eye Dropper это обычная пипетка с помощью которой вы сможете узнать тот или иной цвет использующийся на странице.

Из особенностей хочу выделить только, то, что помимо обычного выбора цвета, вы так же сможете, в дальнейшем, поправить исходную версию и сравнить 2 результата. С.м. скриншот.

Выбор со страницы:

3.png

Открываем палитру для изменения:

4.png

Bootstrap Overlay

Последнее в данном списке расширение является направляющими для сетки bootstrap. Так как сейчас всё больше сайтов применяются с использованием данного фреймворка, а так же, так как он действительно ускоряет этап вёрстки, то просто необходимо следить, чтобы всё было ровно по сетке. В нашем случае, ровно по направляющим.

Да. Конечно вы можете воспользоваться расширением Page Ruler. Который так же покажет свои направляющие. Но цель Bootstrap Overlay в том, что вам не надо каждый раз что-то мерить. Достаточно просто активировать данное расширение, чтобы убедиться, что у вас всё ровно по сетке.

5.png

Заключение

Разумеется это не весь список расширений, которые требуются в работе frontend разработчика, но для начинающих или же для backend разработчика этого должно хватить. Как минимум для того, чтобы без проблем править вёрстку. Ну думаю вы понимаете о чём я)

Со своей стороны хочу добавить ещё то, что как только в ходе моей личной работе по фронту я буду находить ещё какие либо интересные расширения для браузеров, то сразу буду записывать их в своём блоге, а так же делиться статьями в своей группе в ВКонтакте. Так что смело подписывайтесь на обновления блога, а так же не забывайте вступать в группу, ссылку на которую вы найдёте в самом конце статьи.

Так же хотелось бы узнать какими расширениями пользуетесь вы сами. Не обязательно они должны иметь отношения к разработке. Жду ваших ответов в комментариях ниже.


it-blog.club 470
Автор: Ярослав Хмель


Если Вам понравилась статья, то можете поддержать блог переведя N сумму на кофе авторам или оплату хостинга!
В любом случае спасибо! А так же не забывайте про группу в ВК
ПОИСК ПО САЙТУ
Поддержать