Розширення 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