Інструменти розробника Chrome, відомі як DevTools, є однією з ключових причин, чому багато розробників не розглядають використання інших браузерів.
Однак, значна частина користувачів застосовує лише обмежений набір функцій, залишаючи поза увагою чимало корисних можливостей, які виходять у тіні.
Давайте розглянемо деякі з цих прихованих скарбів!
Кожен має свої вподобання щодо операційної системи, апаратного забезпечення, типу пристрою та його форм-фактору. Але є одна спільна річ – вони використовують браузер Chrome, і часто виключно Chrome! Схоже, можна впевнено стверджувати, що боротьба між браузерами завершилася, і Chrome виявився явним переможцем.
Користувачі Windows використовують вбудований браузер лише для завантаження Chrome, а потім працюють саме в Chrome, ігноруючи будь-які “рекомендації” від Windows. Подібна ситуація спостерігається і на пристроях Apple (особливо MacBook та пристроях з великими екранами), де користувачі та розробники уникають Safari, попри численні запевнення та стратегії Apple щодо його просування.
Якщо пристрій не працює під управлінням Chrome, то є велика ймовірність, що на ньому встановлено браузер, сумісний з Chrome, наприклад, Brave або Vivaldi. Так, технічно ці браузери не базуються на Chrome, але це вже інша тема для обговорення. Звичайні користувачі можуть використовувати ці альтернативи з ідеологічних або специфічних міркувань, але коли справа доходить до розробників, Chrome залишається основним і практично єдиним інструментом у їхньому арсеналі.
Навіть той факт, що Chrome може бути досить вимогливим до ресурсів, часто ігнорується. Причина цього проста: Chrome DevTools.
Джерело зображення: офіційна документація Chrome DevTools
Якщо ви читаєте цю статтю, можна припустити, що ви досвідчений користувач, веб-майстер, розробник або хтось близький до цього. Тому, нам не потрібні пояснення, як відкрити DevTools або які його основні функції.
Тому, не гаючи часу, давайте відразу перейдемо до вивчення деяких менш відомих, але дуже корисних функцій Chrome DevTools.
Режим редагування дизайну
Одна з рутинних задач, яку часто виконують розробники, – це перевірка елемента на сторінці, а потім редагування його HTML, щоб подивитися, як він виглядатиме зі змінами.
Однак, робота з HTML безпосередньо в DevTools не завжди є комфортною – продиратися через нагромадження тегів, напружувати зір, намагаючись знайти правильний відкриваючий або закриваючий тег, і боротися з дивною кількістю пробілів під час редагування тексту – це лише деякі з проблем, з якими ви можете зіткнутися. Ситуація стає ще гіршою, якщо ви дизайнер, який не хоче заглиблюватися в ці технічні деталі.
Ось скріншот однієї зі сторінок цього сайту (techukraine.net):
Глибоко вкладений HTML і складні класи CSS є типовими для більшості сучасних веб-сайтів, тому робота з DevTools може бути не завжди зручною.
Але в DevTools є функція під назвою Design Mode, яка в багатьох випадках може значно полегшити процес. Використовуючи режим дизайну (це, до речі, не офіційна назва, а скоріше те, як користувачі її називають через спосіб її активації та її функціонал – не хвилюйтеся, ми скоро це побачимо!), зміни на сторінці можна вносити візуально та в режимі реального часу, подібно до редагування електронної таблиці або текстового документа! Єдиний нюанс полягає в тому, що ця функція не активована за замовчуванням, і її активація може бути не очевидною для тих, хто не є розробником.
В будь-якому разі, все досить просто; вам потрібно лише виконати наступні інструкції. Для деяких користувачів це може бути дуже легко, для інших – трохи складніше. Ось що потрібно зробити:
- Переконайтеся, що веб-сторінка, яку ви хочете редагувати, завантажена та відкрита (тобто, вкладка є активною).
- Відкрийте панель DevTools звичним способом (за допомогою клавіатурного скорочення, кліку мишкою тощо). Я, наприклад, використовую комбінацію клавіш Opt + Cmd + I на Mac.
- Після відкриття DevTools перейдіть на вкладку “Консоль”. Деякі з вас, можливо, закотять очі, наскільки це очевидно, але давайте також згадаємо про тих користувачів, яким складно працювати з консоллю браузера та JavaScript.
- Клацніть у першому рядку поряд із курсором, після чого з’явиться підказка для введення, де ви можете писати код JavaScript (див. скріншот нижче).
- Тепер нам потрібно ввести JavaScript код. Не хвилюйтеся, код досить короткий та простий: document.designMode = “on”. Ви можете скопіювати та вставити цей код зі сторінки (але переконайтеся, що копіюється лише звичайний текст) або ввести його вручну.
- Натисніть Enter/Return.
“І це все?!”.
Так, це все!
Тепер ви можете вільно редагувати сторінку, як звичайний документ. Ось відеоприклад, де я редагую веб-сайт Spotify в режимі дизайну:
Функція режиму дизайну, хоча й корисна, не є ідеальним рішенням для всіх випадків. Ви не можете, наприклад, легко копіювати та вставляти кнопки або змінювати їх зовнішній вигляд. Фактична кількість можливостей обмежена у порівнянні з повноцінним редактором веб-сторінок. Однак, ця функція добре підходить для випадків, коли вам потрібно внести візуальні зміни на льоту.
Не буде перебільшенням сказати, що команда Chrome оцінює, наскільки популярною є ця функція. Якщо вона виявиться затребуваною, цілком ймовірно, що в майбутньому з’являться розширені можливості редагування!🤞🏻🤞🏻
Імітація мережевих умов
Вкладка “Мережа” в Chrome DevTools, мабуть, є однією з найбільш часто використовуваних (хоча у мене немає точних даних, але як веб-розробник, я використовую вкладку “Консоль” приблизно 20-30% часу, а решту часу – вкладку “Мережа”). Вона надає нам повну інформацію про запити, які відправляються зі сторінки, їхній тип, метадані, статуси, прогрес завантаження ресурсів (зображень, таблиць стилів тощо), час завантаження тощо. Зважаючи на цю корисність, не дивно, що вкладка “Мережа” є однією з найбільш популярних.
Однак, можна пропустити одну цікаву функцію – невеликий спадний список, який вказує на поточний стан мережі – “Онлайн”.
Натиснувши на цей пункт, ви побачите меню з різними параметрами, що дозволяють обмежити швидкість вашого з’єднання: “Швидкий 3G”, “Повільний 3G”, “Офлайн” і так далі. Хоча цей параметр може використовуватись в різних ситуаціях, найбільш поширеним є тестування продуктивності веб-сайту при повільному з’єднанні або перевірка поведінки веб-додатку в автономному режимі.
Давайте спробуємо. Я встановлю режим “Повільний 3G” і перезавантажу ту саму сторінку, що й на попередньому скріншоті. На попередньому скріншоті можна побачити, що за мого звичайного з’єднання (40 Мбіт/с) більшість ресурсів завантажується менш ніж за 100 мілісекунд.
Тепер подивимося, що з цим зробить “Повільний 3G”.
Яка різниця!
Зверніть увагу, що час завантаження ресурсів тепер складає 5-10 секунд. А повне завантаження сайту зайняло 17,25 секунди! Я розумію, про що ви думаєте, але слід враховувати, що при повільному з’єднанні 3G будь-який сучасний веб-сайт буде завантажуватись декілька секунд. Інша річ, чи потрібне вам швидке завантаження в таких умовах, це вже бізнес-рішення, де потрібно зважити переваги та витрати.
Зверніть увагу на значок попередження на вкладці “Мережа”. Таким чином Chrome нагадує вам, що ви внесли зміни, які відрізняються від стандартних налаштувань, і якщо ви не знаєте, що робите, можливо, вам варто їх скасувати.
Інтерактивний вибір кольорів
Перевірка елементів DOM в DevTools є повсякденною задачею для більшості розробників. Ми також звикли до розділу з деталями CSS, який показується поруч, і знаємо, що можемо його редагувати та миттєво бачити результати.
Невелика корисна деталь, прихована серед всього цього – якщо ви клацнете на властивість кольору CSS, з’явиться знайомий інтерфейс вибору кольорів!
Зверніть увагу, що це не просто інструмент вибору кольорів. Він дозволяє керувати прозорістю, змінювати використовувані системи кольорів, вибирати колір безпосередньо зі сторінки та багато іншого.
Тому, наступного разу, коли ви будете експериментувати, наприклад, з кольорами акценту на сайті, вам не потрібно буде шукати потрібний відтінок навмання! Насправді, багато хто любить створювати веб-сайти прямо в браузері, для них такі функції є просто знахідкою! 🙂
Відстеження подій на сторінці
Часто ми хочемо дізнатися, що відбувається з певним елементом, який нас цікавить. Особливо це актуально при використанні jQuery в складній кодовій базі – як вашій, так і чужій. Обробники подій і логіка можуть бути розкидані по всьому коду, і відстеження помилки може перетворитися на кошмар.
На щастя, Chrome DevTools має зручну функцію, яка допоможе вам у цьому. Вона дозволяє відстежувати події для зазначеного елемента та виводити інформацію про них в консолі. Є невеликий нюанс: ця функція не підтримує вибір елементів за іменами класів CSS. Тобто, спосіб $(“#email”) з jQuery тут недоступний. 🙂
Зважаючи на це, давайте подивимося, як змусити цю функцію працювати. Ми починаємо зі звичайної “перевірки елемента” за допомогою інспектора DevTools. Так, це той самий інструмент, який ми використовуємо щодня.
На скріншоті нижче я використав інструмент інспектора, щоб виділити поле для введення тексту. Під “виділенням” я не маю на увазі, що елемент на сторінці стає виділеним візуально; скоріше, курсор інспектора клацнув на поле, і відповідний HTML-код в DevTools буде виділено.
Це дозволяє відстежувати події для обраного елемента, роблячи його доступним як спеціальну змінну JavaScript під назвою $0. Далі, переконавшись, що я не клацаю випадково десь у вікні браузера, я відкриваю консоль і додаю прослуховувач подій для цього поля. Для цього потрібен лише один рядок коду: monitorEvents($0, ‘mouse’). Частина “mouse” тут вказує Chrome, що мене цікавлять лише події, пов’язані з мишею.
Після натискання Enter/Return, відстеження активується, і тепер, якщо я наведу курсор миші на поле для введення тексту або клацну його, ці події будуть реєструватися в консолі як об’єкти JavaScript:
Як ви можете бачити на скріншоті, було зафіксовано декілька типів подій миші, коли я клацав елемент, вводив своє ім’я, а потім відводив мишу (події введення тексту, оскільки вони є подіями клавіатури, не реєструвалися). Самі події є об’єктами JavaScript, як видно на скріншоті; кожен об’єкт події містить велику кількість інформації. Наприклад, я розгорнув об’єкт події “click”, і кількість його властивостей не вмістилася на одному скріншоті!
Я наполегливо рекомендую вам негайно випробувати цю функцію, оскільки вона точно врятує вас від багатьох проблем у майбутніх проектах!
Звіти про продуктивність сайту
У наш час продуктивність веб-сайту є ключовим фактором успіху. Навіть невелике підвищення продуктивності позитивно впливає на пошукову оптимізацію та задоволення користувачів. Але як дізнатися, які саме частини вашого сайту потребують покращення, а які вже працюють добре?
Вам потрібно найняти команду експертів і чекати кілька днів, поки вони завершать аналіз?
У деяких випадках це дійсно потрібно, але, на щастя, Chrome DevTools може вам допомогти. У останніх версіях Chrome (з кінця 2020 року) в DevTools є вкладка Lighthouse. Раніше вона називалася “Audits”, і саме таку назву можна знайти в офіційній документації на момент написання статті. Раніше Lighthouse був популярним веб-сайтом для безкоштовного аналізу продуктивності веб-сайтів, але потім Google його закрив (причини не оголошувалися). На щастя, потужний функціонал Lighthouse згодом з’явився в DevTools.
Щоб створити звіт про продуктивність, потрібно лише натиснути одну кнопку після завантаження сторінки:
Як ви можете бачити праворуч на скріншоті, є кілька параметрів для контролю того, скільки інформації ви хочете (і, звичайно, що саме ви хочете проаналізувати). Після налаштування параметрів, натисніть велику синю кнопку, розслабтеся та почекайте кілька секунд. Через деякий час ви отримаєте детальний звіт, приблизно такого вигляду:
Цифри, які ви бачите на скріншоті, показують загальну оцінку для кожної категорії. Категорія прогресивних веб-додатків (PWA) виділена сірим кольором, оскільки цей сайт не підтримує PWA. Також можна побачити по розміру смуги прокрутки на скріншоті, що звіт є досить великим.
Ось як виглядає частина розділу продуктивності:
Я не стверджую, що Lighthouse і його пропозиції є панацеєю для оптимізації веб-сайту, але вони надзвичайно корисні. Власники веб-сайтів і розробники не завжди чітко розуміють, які саме проблеми існують і як їх можна вирішити.
Чесно кажучи, навіть я, як веб-розробник, іноді відчуваю розгубленість, оскільки тестування та продуктивність зазвичай є окремими спеціалізаціями. Тому, Lighthouse є недооціненим інструментом, який тепер є частиною Chrome DevTools і є дуже корисним для власників бізнесу, розробників та системних адміністраторів.
Можливості редагування коду
Вкладка “Джерела” в DevTools дозволяє отримати доступ до різних файлів, що завантажуються веб-сайтом. Вона також має такі можливості, як редагування коду, збереження фрагментів тощо. Це не є чимось новим для веб-розробників. Однак, DevTools має кілька вбудованих зручностей, що полегшують життя розробникам, які звикли до своїх улюблених IDE.
DevTools використовує деякі стандартні клавіатурні скорочення, які економлять час та зменшують розчарування, пов’язане з редагуванням коду. Наприклад, Ctrl + D (або Cmd + D на Mac) можна використовувати для виділення кількох входжень слова. Також, утримуючи Ctrl (або Cmd на Mac) та клацаючи в різних місцях коду, ви можете створити кілька курсорів. Перегляньте відео нижче для кращого розуміння:
Якщо ви вважаєте це корисним, обов’язково перегляньте офіційну документацію, щоб дізнатися про всі можливості редагування коду, які пропонує DevTools.
Керування станом елемента DOM
Іноді, під час тестування або налагодження, поведінка, за якою ми спостерігаємо, доступна лише в певному стані елемента. В залежності від стану, це може бути не дуже просто. Для мене, наприклад, проблемним є стан “наведення курсора”, коли я витрачав багато часу на те, щоб зафіксувати стан курсора або додавати додатковий тимчасовий CSS.
На щастя, Chrome DevTools має простий спосіб змінити стан обраного елемента. Більш того, можливість зробити це є прямо тут, якщо клацнути елемент правою кнопкою миші (на вкладці “Елементи”), але, зважаючи на велику кількість функцій і темп роботи, це легко пропустити:
Так, це дійсно настільки просто!
Тепер вам не потрібно впроваджувати умовну логіку в коді, писати додатковий CSS або робити інші зайві дії, коли потрібно перевірити елемент в іншому стані.
Панель інструментів
Останньою, але не менш важливою в цьому списку є панель інструментів. Це ще одна з тих неймовірно корисних функцій, що добре приховані і доступні лише за допомогою комбінацій клавіш. Як випливає з назви, панель “Інструменти” – це не окремий інструмент, а скоріше своєрідна інформаційна панель, де є доступ до майже всіх функцій DevTools. Оскільки кількість функцій DevTools дуже велика, вгорі панелі є рядок пошуку.
Щоб активувати панель інструментів, переконайтеся, що ви перебуваєте на панелі DevTools, а потім натисніть Ctrl + Shift + P (або Cmd + Shift + P для користувачів Mac):
Панель інструментів має багато можливостей і сюрпризів. Наприклад, чи знали ви, що можете зробити скріншот прямо з DevTools?
Я впевнений, що ні, тому що вам потрібно запустити панель інструментів і ввести “screenshot” у рядку пошуку, щоб дізнатися, що:
Ви також побачите декілька варіантів створення скріншотів, включаючи створення скріншоту вибраного DOM елемента! Досліджуйте панель інструментів, і я вас запевняю, ви не будете розчаровані!
Якщо вам потрібно віддалено зробити скріншот будь-якої веб-сторінки, скористайтеся інструментом для створення скріншотів на techukraine.net.
Висновок
Браузер Chrome сам по собі багатий на функції, але особливою є його пропозиція DevTools. Як ми бачили у цій статті, існує чимало добре прихованих функцій, а також інших, які ховаються на виду, про які більшість користувачів не знає. Чому ці функції приховані?
Я припускаю, що деякі з них є дуже експериментальними (наприклад, режим дизайну), і розробники Chrome хочуть, щоб звичайним користувачам було складно їх знайти. Щодо багатьох інших функцій, я думаю, це пов’язано з перевантаженням інформацією: якщо є, скажімо, 120 функцій, і деякі з них мають підфункції, майже неможливо створити інтуїтивно зрозумілий інтерфейс. Крім того, Google історично не дуже добре справлявся з UX своїх продуктів, тож, маємо, що маємо. 🤷🏻♂️
Попри все, я сподіваюся, що ця стаття була для вас корисною. Але головне, я сподіваюся, що ця стаття дала вам уявлення про те, де і що ховається, і наступного разу, коли ви захочете дослідити або знайти щось конкретне, ви будете знати, куди “копати глибше”. 😆