Навіть якщо ви тестувальник, розробник чи менеджер проєкту, іноді доводиться займатися візуальною складовою – особливо в невеликих компаніях, де можуть попросити взяти на себе суміжні обов’язки. UI-дизайнерка Ліана Климович зібрала добірку розширень для Google Chrome, які значно спростять це завдання.
«Йдеться не про створення дизайну чи прототипів, а про швидкий огляд, перевірку стилів, відступів тощо. Часто це дуже потрібно під час тестування», — зазначила Ліана у своєму дописі в LinkedIn.
Ось добірка корисних розширень:
- VisBug — інструмент для налагодження веб-дизайну з відкритим кодом, створений на JavaScript. Він дозволяє редагувати, переміщати, вимірювати елементи прямо на сторінці, фіксуючи дизайн без необхідності використання Figma чи Photoshop. Також підходить для перевірки вже задеплоєних дизайнів (QA та PM, дякуємо!).
- GoFullPage — це розширення робить повний знімок екрана поточної веб-сторінки, а не лише видимої її частини. Готовий скрін можна зберегти як зображення або PDF, або просто перетягнути на робочий стіл.
- Window Resizer — допомагає емулювати різні роздільні здатності екрана, змінюючи розмір вікна браузера. Особливо корисно для веб-дизайнерів та розробників, які тестують адаптивність своїх макетів. Хоча існує WebKit Inspector, це розширення змінює роздільну здатність самого вікна браузера, дозволяючи оцінити адаптивний дизайн у його «природному» вигляді.
- Corporate Ipsum — генерує випадковий текст-рибу (текст-заповнювач) за словом чи абзацом. Ліана радить QA, BA та FE-розробникам використовувати більш реалістичний контент замість “qwerty12345” для тестів чи вайерфреймів. Чим ближчий контент до реального, тим раніше можна виявити помилки та зробити дизайн привабливішим для презентації замовнику.
- WhatFont — найпростіший спосіб визначити шрифти на веб-сторінках. Достатньо навести курсор, щоб перевірити веб-шрифти. Дизайнерка називає це розширення must-have, оскільки воно надає простий доступ до характеристик будь-якого текстового елемента: назви шрифту, розміру, кольору, насиченості тощо.
- Eye Dropper — розширення з відкритим вихідним кодом, яке дозволяє вибирати кольори з веб-сторінок, створювати палітри та зберігати їх історію. Працює як «піпетка» і дозволяє швидко перевірити правильність кольору елементів.