Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Workflow
Webdesign

Прискорюємо процес розробки за допомогою інструментів розробника Chrome

by
Length:LongLanguages:

Ukrainian (українська мова) translation by AlexBioJS (you can also view the original English article)

У цьому посібнику ми будемо розглядати інструменти розробника Chrome, а саме те, як вони можуть допомогти вам прискорити написання коду HTML/CSS. Також ми розглянемо деякі інші доступні інструменти розробника.


Вступ

Chrome швидко став популярним серед веб-дизайнерів та користувачів через свою швидкість, зручність використання та підтримку ранніх експериментальних можливостей на зразок властивостей CSS3. На конференції I/O, що проводиться Google, 2012 року було оголошено, що тепер аудиторія Chrome складає більше 310 мільйонів активних користувачів, що майже в два рази більше 160 мільйонів користувачів, чим хвалилися в попередньому році.

Google Chrome вперше з'явився 2 вересня 2008 року. Його було випущено в якості бета-версії (* версія продукту, випущена для бета-тестування (тестування в реальних [виробничих] умовах). Тут і надалі примітка перекладача) для Microsoft Windows XP і пізніших версій; до 2009 року Google випустила бета-версії як для OS X, так і для Linux. Про вихід Google Chrome 5.0 було оголошено 25 травня 2010 року. Це ознаменувало першу стабільну версію, що підтримується всіма трьома платформами.

Одна з причин його популярності серед веб-дизайнерів та розробників – інструменти розробника, що постачаються разом з браузером. Вони дозволяють нам легко та ефективно тестувати і налагоджувати код. Без них ваш процес розробки міг би значно ускладнитися.

Google описує інструменти розробника Chrome наступним чином:

Інструменти розробника, що постачаються в складі Chrome та доступні в ньому, дозволяють веб-розробникам та програмістам отримати доступ до внутрішніх частин браузера або їх додатка. Інструменти розробника розроблено головним чином на основі веб-інспектора WebKit, частині проекту з відкритим початковим кодом WebKit.

У дійсності інструменти розробника Chrome є веб-додатком, написаним на HTML, JavaScript та CSS. Він запускається під час виконання коду JavaScript. Після цього ми можемо повзаємодіяти та поекспериментувати з веб-сторінками.

У цьому посібнику ми будемо розглядати саме те, як інструменти розробника можуть допомогти вам прискорити написання коду HTML/CSS. Посібник буде призначений для дизайнерів, які не обов'язково повинні мати досвід роботи з інструментами розробника Chrome, проте я впевнений, що навіть якщо ви з ними знайомі, то також почерпнете щось корисне для себе по ходу роботи з посібником.


Початок роботи

Для початку нам потрібно буде відкрити Chrome та перейти на вибрану вами сторінку. Отримати доступ до інструментів розробника можна одним з трьох способів. Ви можете натиснути за допомогою правої кнопки миші на вашій веб-сторінці та вибрати пункт меню "Inspect Element", ви можете натиснути кнопку з іконкою зубчиків шестірні (* або з іконкою гайкового ключа) вгорі справа Chrome та вибрати "Tools > Developer Tools" (* Додаткові інструменти > Інструменти розробника). Третій спосіб полягає у використанні набору "гарячих" клавіш (* клавішна комбінація, що прискорює роботу; одиночна клавіша або комбінація клавіш на клавіатурі, натиснення яких відповідає вибору пункту меню або запуску певної команди), який нам надав Chrome:

У випадку використання Windows та Linux натисніть

  • комбінацію клавіш Control - Shift - I, щоб відкрити інструменти розробника;
  • Control - Shift - J, щоб відкрити інструменти розробника та перейти до панелі Console;
  • Control - Shift - C, щоб відкрити інструменти розробника в режимі 'Інспектування елементу';

У випадку використання macOS натисніть

  • комбінацію клавіш - ⌥⌘I(* Command (* керувальна клавіша) – Option (* варіантна клавіша; клавіша вибору опції) – I), щоб відкрити інструменти розробника;
  • ⌥⌘J (Command - Option - J), щоб відкрити інструменти розробника та перейти до панелі Console;
  • ⌥⌘C (Control - Option - C), щоб відкрити інструменти розробника в режимі 'Інспектування елементу';
Open Chrome Developer Tools
На зображенні вище показано контекстне меню, що з'являється при натисненні за допомогою правої кнопки миші на веб-сторінці в Chrome.

Інструменти для роботи з HTML-кодом: панель Elements (* Елементи)

Якщо ви веб-дизайнер, то будете проводити доволі багато часу в розділі 'Elements' додатка. За допомогою нього ви можете ознайомитися з усім, що знаходиться в об'єктній моделі документа (DOM, якщо коротко).

У ньому DOM відображується у вигляді дерева, завдяки чому ви можете легко зорієнтуватися у вашому HTML-документі. Одна із чудових можливостей інструмента для інспектування елементів полягає в тому, що коли користувач переміщує курсор поверх елемента DOM в дереві, за допомогою нього буде виділено відповідний тег на веб-сторінці (* на екрані), яку ви переглядаєте. Вибравши інструмент з невеликою іконкою 'збільшувального скла' (* якої більше нема, починаючи з версії Chrome 32; зараз (2019) іконка інструменту для інспектування елемента розташовується у верхньому лівому куті), розташований в нижньому лівому куті інспектора, ви запросто можете вибрати DOM-вузол безпосередньо на веб-сторінці (* на екрані), яку переглядаєте, і його буде виділено (* в дереві елементів). Завдяки цьому ви можете зекономити купу часу у випадку, якщо вам потрібно швидко дізнатися ім'я або тип атрибуту елемента на вашій сторінці.

Chrome's inspect element
За допомогою редактора ви можете швидко та легко знайти елементи та їх відповідні класи або ID CSS.

Ви можете відредагувати HTML-код DOM-вузлів, двічі натиснувши на них за допомогою миші. Після цього ви можете змінювати характеристики тегів на зразок значень, ID и класів або навіть тип HTML-тегу.

При натисненні за допомогою правої кнопки миші на вузлі з'явиться контекстне меню, за допомогою якого ви можете скопіювати HTML-код для нього або зовсім його видалити. Також ви можете скопіювати XPath (* XML Path Language; в цій мові використовуються формули маршрутів для вибору вузлів або їх наборів) вибраного вузла. XPath – мова запитів для вибору вузлів із документа. Вона може стати в пригоді при використанні технологій на зразок YQL (* Yahoo Query Language – мова запитів Yahoo; SQL-подібна мова, за допомогою якої ви можете запитувати, фільтрувати та об'єднувати дані з веб-сервісів).

Також ви можете перетягувати HTML-елементи по сторінці. Для цього виберіть вузол та перетягніть його кудись у дереві. Потім цю зміну буде відображено на інспектованій вами сторінці.

Chrome's inspect element contect menu

У нижній частині інспектора є панель, за допомогою якої ви можете переходити по батьківським елементам вибраного елемента. На ній розташовується послідовність предків вибраного елемента, завдяки чому ви можете швидко та легко переглянути та знайти його батьківські елементи.

Ще одна невелика можливість панелі Еlements надається на випадок, коли ви працюєте з зображеннями. Просто перемістіть курсор поверх тегу для додання зображення, і з'явиться спливаюче віконце, в якому відображуються зображення, розмір представленого на екрані зображення (* побудованого рендерером браузера) та початковий розмір зображення. Розмір представленого на екрані зображення іноді може перевищувати початковий розмір зображення, що може відбуватися через додання наприклад границь або полів.

Важливо відмітити те, що під розміром представленого на екрані зображення мається на увазі обчислений рендерером розмір елемента, а не обов'язково розмір власне зображення.


Інструменти для роботи з CSS-кодом: візуалізатор стилів

(* візуалізатор – засіб візуалізації (та перегляду) об'єктів (наприклад, при налагодженні програм)). Інструменти розробника Chrome дуже допомагають при налагодженні CSS-коду. Іноді робота стилів CSS може порушуватися, в результаті чого з'являються небажані візуальні ефекти. Завдяки можливості перевірки того, які стильові правила застосовуються до елемента браузером, ми можемо докопатися до суті проблеми та виправити помилку.

У розділі 'Computed style' (* що називається 'Сomputed' в 2019 році; обчислений стиль; містить стиль елемента, який встановлює браузер на основі власного стилю, врахування наслідування та доданих властивостей) ви можете побачити, які стильові правила застосовуються движком регдерінгу браузера до вибраного елемента. У ньому представлено остаточний набір стильових правил, застосовуваних до веб-сторінки. Натиснувши на стрілку зліва від певного обчисленого стилю, ви можете зрозуміти, звідки він походить. Так що, якщо ви не можете зрозуміти, чому фон того елемента div увесь час чорний або чому шрифт того тексту не жирний, то погляньте в розділ, де вказано обчислений стиль, і ви зможете зрозуміти точку зору браузера.


Styles та Matched CSS Rules

Розділи 'Styles' та 'Matched CSS Rules' (* в 2019 цей розділ представлено без заголовка 'Мatched CSS Rules'; розділ, в якому представлено стильові властивості для певного селектора, назначеного для елемента) працюють подібно один одному. Вони обидва дозволяють вам додавати, видаляти та змінювати CSS-правила для якогось елемента. За допомогою панелі 'element.style' ви можете додавати властивості для того певного елемента незалежно від наявного в нього класу або ID; розглядайте їх в якості вбудованих стилів (* ті, що задаються за допомогою атрибута style). Це відрізняється від того, що відбувається в розділі 'Matched CSS Rules', оскільки зміни, які ви вносите в ньому в стильові правила, відобразяться на будь-якому іншому елементі з тим самим класом або ID.

Іноді ви можете помітити, що стильову властивість правила перекреслено. Це відбувається звичайно через те, що її було перезаписано іншою властивістю з іншого правила. Для того щоб зрозуміти, чому її було перезаписано, ви можете скористатися розділом 'Computed style', як було згадано раніше.

Все більше дизайнерів, з якими я спілкувався недавно, відходять від підходу, при якому дизайн для конкретного сайту розроблюється в пакеті програмного забезпечення для редагування на зразок Photoshop та Fireworks, і переходять до використання підходу, згідно з яким дизайн розроблюється в браузері. Цей новий підхід дозволяє вам поглянути на вашу роботу з точки зору браузера.

Движки рендерінгу інструменті для редагування на зразок Photoshop відрізняються від тих, що використовуються в браузерах, в результаті чого шрифти та кольори можуть відображатися в цих інструментах по-різному. Також при цьому підході елементи дизайну поміщаються на свої місця і вас є можливість побачити, як вони відображаються в браузері. Не кажучи вже про переваги цього підходу, які він має при розробці чутливого макета та дизайну для безлічі типів пристроїв, з якими нам доводиться мати справу в наш час. Звісно ж, програмне забезпечення на зразок Photoshop досі відіграє важливу роль в моєму процесі розробки, хоча я використовую його сьогодні для створення колекцій стилів, а не власне макетів.

При цьому підході вам надається корисна можливість, що полягає в тому, як ви можете вибирати кольори. Завдяки натисненню кнопки з іконкою шестірні у верхньому правому куті панелі 'Styles' (* якої вже нема в 2019 році), у вас з'являється можливість переключати різні режими відтворення кольорів (* в 2019 ви можете вибрати цей режим безпосередньо в селекторі кольору або натиснувши невелику кнопку з іконкою палітри кольорів при натиснутій клавіші Shift). Вони наступні:

  • Hex (* при цьому використовуються шістнадцятирічні числа) – тобто #000000
  • RGB – тобто rgb(0,0,0)
  • HSL (* hue-saturation-lightness – тон–насиченість–яскравість) – тобто hsl(0, 0%, 0%)

Якщо, наприклад, ви використовуєте чорний колір, а потім переглядаєте поточну веб-сторінку та помічаєте, що він трохи темнуватий з естетичної точки зору, якої ви дотримуєтеся, то ви можете просто натиснути невелику кнопку з іконкою палітри кольорів рядом зі значенням властивості, і в результаті відкриється селектор кольору, за допомогою якого ви можете трохи зменшити яскравість чорного кольору. Це стає дуже в пригоді при розробці дизайну на ходу (* в процесі роботи).

Chrome's dev tools color picker
За допомогою селектора кольору Chrome ви можете легко експериментувати з вашим дизайном в режимі реального часу.

Завдяки підгонці відступів, полів та позиції ми можемо бачити в режимі реального часу, яку ширину нам потрібно задати для певного div, щоб він став у вірну позицію. При цьому ви безумовно економите купу часу в порівнянні з тим, коли вам потрібно переключатися між браузером та вашим редактором коду, а потім зберігати ваш документ та оновлювати сторінку в браузері.

У верхньому правому куті панелі 'Styles' рядом із кнопкою з іконкою шестерні розташовується невелика кнопка з іконкою відміченої області (* що охоплює виділені об'єкти або частини зображення; в 2019 році її нема, а є кнопка з текстом ':hov'). Натиснувши її, ми можемо переключати різні стани елемента. Вони наступні:

  • :active
  • :hover
  • :focus
  • :visited

Завдяки активації одного з них елемент залишиться у вибраному вами стані і ви будете мати можливість відредагувати властивості стильового правила для цього випадку.

Chrome's dev tools inspect state
На зображення вище показано різні стани, які ви можете вибрати.

Редагування в режимі реального часу та історія змін

Одна з моїх улюблених можливостей інспектора стилів інструмента розробника полягає в тому, що ми можемо швидко визначити, де знаходиться в таблиці редагована нами властивість. Якщо ви поглянете вправо від властивості, яку редагуєте, то побачите ім'я таблиці стилів та номер рядка, в якому вона знаходиться. Перейшовши за посиланням, ви потрапляєте у вкладку для перегляду джерел. У ній власне відображується вся ваша таблиця стилів. Тут ви можете з нею працювати таким же чином, як ви працювали у вашому редакторі коду. Єдина різниця полягає в тому, що ви бачите результати своїх дій в режимі реального часу.

Також ви можете зберегти вашу таблицю стилів, висунувши бокову панель. Якщо ви натиснете за допомогою правої кнопки миші на її імені, то відкриється нове контекстне меню, за допомогою якого ви можете відкрити вибрану вами таблицю стилів у браузері та зберегти її. При цьому здорово те, що вибравши 'Local Modifications...', ви можете побачити повну історію всіх внесених вами змін. Так що, якщо ви напартачили з кодом та хочете повернутися до змін, внесених десять хвилин тому, то Chrome прийде вам на допомогу.

Chrome's dev tools local modification
Після цього ви можете зберегти вашу відредаговану таблицю безпосередньо в інструментах розробника. Також за допомогою вищезгаданого меню ви можете ознайомитися з історією недавно внесених вами змін.

Розміри

У згаданій раніше боковій панелі вкладки 'Elements' є панель з розмірами елемента. За допомогою цієї панелі ви можете переглядати значення і вносити зміни в компоненти блочної моделі поточного елемента. Вона надає вам візуальне представлення цих компонентів, серед яких:

  • margin
  • padding
  • border
  • position

Завершення

Інструменти розробника Chrome належать до одних з найкорисніших інструментів для прискорення мого процесу написання HTML/CSS-коду для веб-дизайну.

Звісно ж, їх можна використовувати для багатьох інших цілей, наприклад для аналізування часу завантаження сторінки та продуктивності скриптів. Також є інші інструменти, які надають подібні можливості, на зразок Firebug для Firefox. В останній версії Firefox також є деякі корисні інструменти, які ще не були реалізовані в Chrome, хоча, будемо сподіватися, що скоро будуть. Серед них інструмент для перегляду об'ємного зображення сторінки. За допомогою нього ви можете ознайомитися з тривимірним представленням веб-сайту, яке ви можете обертати та орієнтувати. Завдяки цьому ви можете легко візуалізувати наслідування елементів вашої сторінки. Також вони додали «чутливий режим», при якому веб-сайт поміщається до фрейму, розмір якого ви можете змінювати, щоб побачити, як ваш сайт буде виглядати в різних контрольних точках (* переломні/контрольні точки медіа-запитів, контрольні точки CSS; такі значення ширини області перегляду, при яких дизайн сайту суттєво змінюється).

Я зовсім не стверджую, що інструменти розробника Chrome – найкращі з усіх доступних. У моєму випадку, це єдині інструменти, які я коли-небудь використовував, і я розумію, як багато часу вони зекономили мені при розробці. Тому я хотів поділитися з вами деякими висновками, яких я дійшов, і сподіваюся, що вони також допоможуть вам зекономити трохи часу.


Посилання на пости та ресурси для подальшого вивчення теми:

  • Adobe Shadow. Тепер ви можете використовувати інспектор Chrome на вашому настільному комп'ютері для усунення несправностей на мобільних пристроях на зразок iPhone. Подібно до того, як це відбувається у випадку його використання на настільних комп'ютерах, будь-які зміни, які ви вносите, будуть відображатися в режимі реального часу на вашому пристрої.
  • Chrome DevTools Autosave. Цей додаток Chrome дозволяє вам вносити зміни до локальних CSS- та JavaScript-файлів безпосередньо в самих інструментах розробника. Зміни, які ви вносите в браузері, автоматично зберігаються в їх відповідних файлах.
  • Chrome Developer Tools Evolution. Відео з конференції I/O (* що проводиться Google) 2012 року на тему останніх новинок в інструментах розробника.
  • Advertisement
    Advertisement
    Looking for something to help kick start your next project?
    Envato Market has a range of items for sale to help get you started.