Расширения Chrome для Web-мастера

В этой статье я поделюсь своими находками в расширениях Google Chrome для Web-мастеров, верстальщиков и дизайнеров, которые полезны мне и возможно будут полезны и вам. И постараюсь хоть как-то классифицировать их.

Расширения Chrome для web мастера

Web Developer – я даже не буду пытаться перечислить все, что есть в арсенале этого расширения Google Chrome. Скажу только, что здесь есть всё, от отключения скриптом и всплывающих окон, до валидации и подсветки крайов изображений, и это всё собрано в одно маленькое окошко с кучей подзаголовков.

Расширения Chrome для версткиCSSViewer – после нажатия на иконку начинает выделять края элемента под курсором и отображает финальный css код во всплывающем окне, которое вызывается автоматически при наведении. В этом режиме при нажатии клавиши «С» появляется еще одно окно, которое предлагает вас скопировать все стили элемента.

Wappalyzer – плагин анализирует web-страницу и сообщает вам информацию о её CMS, CDN, фреймворках, редакторах и языке программирования.

Расширения Chrome для мобильной адаптации

Расширений, способных помочь вам в этом не легком деле довольно много, но я с удивлением обнаружил, что большая часть их не захотела работать у меня по непонятным мне причинам.

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

Расширения Chrome для мобильной адаптации №1

Расширения Chrome для мобильной адаптации №2

Mobile/Responsive Web Design Tester – удобный тестер, на те случаи, когда вам нужно увидеть одно конкретное разрешение экрана, в вертикальном или горизонтальном виде. Быстрая и удобная альтернатива. Имет функцию отключения скролинга, таким образом, вы видите именно то, что будет на мобильном, по крайней мере на столько, на сколько это возможно.

Проверки адаптивного дизайна в Google ChromeДебаг браузера (F12) – не стоит забывать о специальном режиме дебагера (см. скриншот). Вообще рекомендую хорошо изучить Debug браузера, так как это очень мощный, полезный и очень удобный инструмент в режиме работы в пол окна.

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

Расширения Chrome для работы с Bootstrap

Bootstrap – front-end библиотека, получившая огромную популярность… стоп, если вы не знаете что это, то и Расширения Chrome для работы с Bootstrap вам ни к чему.

Bootstrap Grid Overlay – визуализирует сетку Bootstrap, со всеми её параметрами, если такова имеется в открытом документе. Чрезвычайно полезный инструмент для верстальщиков работающих с окном браузера, или тех случаев, когда нужно доработать уже готовый сайт. К сожалению, на данный момент, не поддерживает «container-fluid» Bootstrap 4 и отображает его как обычный «container».

Draw Grid – уникальный инструмент для рисования ячеек Bootstrap прямо на веб странице, с последующим преобразованием их в HTML код. Учитывая простоту, с которой строятся элементы на сетке, данный инструмент будет полезен только при переводе сайтов на Bootstrap.

Resize / Guide – данный плагин предназначен для тестирования адаптивного дизайна на Bootstrap. При нажатии на иконку отображает Breakpoints, а именно XS, SM, MD, LG. При нажатии на эти иконки происходит уменьшение окна браузера до размера viewport выбранного брейкпоинта.

Show Bootstrap Info – альтернатива предыдущего, после нажатия на иконку, viewport и breakpoint отображается в вернем правом углу до переключения на другую вкладку. В отличии от предыдущего, здесь нужно вручную уменьшать окно браузера.


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

GD Star Rating
loading...
Рейтинг: 10.0 из 10 (1 голоса)

Оставить коментарий

©2011 softocop.ru, created by Kovnir Vladislav.
Softocop