В этой статье я поделюсь своими находками в расширениях Google Chrome для Web-мастеров, верстальщиков и дизайнеров, которые полезны мне и возможно будут полезны и вам. И постараюсь хоть как-то классифицировать их.
Web Developer – я даже не буду пытаться перечислить все, что есть в арсенале этого расширения Google Chrome. Скажу только, что здесь есть всё, от отключения скриптом и всплывающих окон, до валидации и подсветки крайов изображений, и это всё собрано в одно маленькое окошко с кучей подзаголовков.
CSSViewer – после нажатия на иконку начинает выделять края элемента под курсором и отображает финальный css код во всплывающем окне, которое вызывается автоматически при наведении. В этом режиме при нажатии клавиши «С» появляется еще одно окно, которое предлагает вас скопировать все стили элемента.
Wappalyzer – плагин анализирует web-страницу и сообщает вам информацию о её CMS, CDN, фреймворках, редакторах и языке программирования.
Расширения Chrome для мобильной адаптации
Расширений, способных помочь вам в этом не легком деле довольно много, но я с удивлением обнаружил, что большая часть их не захотела работать у меня по непонятным мне причинам.
Responsive Viewer – открывающий страницу несколько раз в одном окне. Таким образом вы можете просмотреть за раз не одно устройство, а сразу целый набор. Все станет понятно, если взглянуть на скриншот ниже.
Дебаг браузера (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 отображается в вернем правом углу до переключения на другую вкладку. В отличии от предыдущего, здесь нужно вручную уменьшать окно браузера.
На этом пока все. Надеюсь, что-то из этого будет полезно. Не забудьте поделится своими полезными находками, оставив комментарий к этой статье. Спасибо за внимание, и успехов вам в нашем нелегком деле.
loading...
