Chrome DevTools є однією з головних причин, чому розробники відмовляються торкатися будь-якого іншого браузера.
Але більшість із нас використовує лише кілька функцій, залишаючись поза увагою багатьох інших приголомшливих функцій, які випускаються мовчки.
Давайте розкриємо деякі з цих прихованих перлин!
Кожен має свою улюблену операційну систему, апаратну платформу, тип пристрою, форм-фактор пристрою тощо. Але одне спільне для всіх — вони використовують браузер Chrome і тільки браузер Chrome! Я думаю, можна з упевненістю сказати, що війни браузерів закінчилися, і Chrome переконливо переміг.
Користувачі Windows використовують браузер за умовчанням лише для завантаження Chrome, а потім використовують Chrome, ігноруючи всі «рекомендації» Windows. Те саме стосується пристроїв Apple (особливо MacBook і пристроїв із великим екраном), де користувачі та розробники уникають Safari, незважаючи на численні тверді заяви та тактику перетворення Apple.
І якщо пристрій не працює під керуванням Chrome, висока ймовірність, що на ньому працює Chrome-сумісний допоміжний продукт, наприклад Хоробрий або Вівальді. Так, я знаю, технічно ці браузери не засновані на Chrome, але це інша дискусія. Пересічний користувач може використовувати ці інші браузери з ідеологічних чи особливих міркувань, але коли справа доходить до розробників, у полі зору немає іншого браузера, окрім Chrome.
Навіть той факт, що це монстр, який пожирає пам’ять, ігнорується. Причина проста: Chrome DevTools.
Джерело зображення: офіційні документи Chrome DevTools
Тепер, якщо ви читаєте цю статтю, можна з упевненістю припустити, що ви досвідчений користувач, майстринь, веб-розробник або щось подібне до цього. Таким чином, нікому з нас не потрібне ознайомлення з DevTools, як його відкрити, його різними функціями тощо.
Натомість, не гаючи часу, давайте зануримося безпосередньо в деякі з менш відомих, але надзвичайно корисних функцій Chrome DevTools.
Режим проектування
Одна з речей, які зазвичай роблять розробники, — перевірити елемент на сторінці, а потім змінити його HTML, щоб переглянути щось або перевірити ефект зміни.
Однак робота з HTML безпосередньо в DevTools не є найгладшою справою — пробираючись через суп тегів, напружуючи очі, намагаючись знайти правильну відкриваючу/закриваючу дужку, і мати справу зі смішною кількістю пробілів під час редагування тексту (пробіл, який явно відсутня в документі, який ви бачите), є деякі з проблем, з якими вам доведеться мати справу. Ще гірше, якщо ви дизайнер і не хочете розбиратися в безладі.
Ось скріншот однієї зі сторінок цього сайту (techukraine.net):
Глибоко вкладений HTML і таємничі, заплутані класи CSS типові для будь-якого нетривіального веб-сайту сьогодні, де досвід роботи з DevTools є, м’яко кажучи, неоптимальним. 🤭
Але є функція DevTools під назвою Design Mode, яка в багатьох випадках може зменшити біль. Використання режиму дизайну (це, до речі, не офіційна назва; це просто те, як люди назвали його через те, як він активується та що він робить — не хвилюйтеся, ми побачимо дуже скоро!), зміни до сторінку можна зробити візуально та живою, як редагування електронної таблиці чи текстового редактора! Єдина заковика в тому, що ця функція не ввімкнена за замовчуванням, і її активація викликає головний біль, особливо для тих, хто не є розробником.
У будь-якому випадку, зробити це досить просто; все, що вам потрібно зробити, це слідувати наведеним нижче інструкціям. Залежно від того, де ви сидите на кривій досвідченості користувача, це може бути смішно легким або помірно складним. Ось що потрібно зробити:
- Переконайтеся, що веб-сторінка, яку ви хочете редагувати, завантажена, і ви зараз її переглядаєте (тобто відповідна вкладка є активною).
- Відкрийте панель DevTools, як зазвичай (комбінація клавіш, клацання мишкою тощо). Мені подобається використовувати комбінації клавіш, а на Mac Opt + Cmd + I виконує цю роботу.
- Тепер, відкривши 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. Таким чином, спосіб jQuery для $(“#email”) недоступний. 🙂
З огляду на це, давайте подивимося, як змусити це працювати. Ми починаємо з простого «перевірки елемента» за допомогою інспектора DevTools. Так, це той самий інструмент перевірки, який ми використовуємо щодня.
На знімку екрана нижче я використав інструмент інспектора, щоб виділити введений текст. Під «виділенням» я не маю на увазі, що елемент на сторінці виділено (це не так, як бачите); скоріше, курсор інспектора було клацнуто під час введення тексту, і відповідний HTML-код у DevTools буде виділено.
Це націлює поточний перевірений елемент для моніторингу подій, що робить елемент доступним як спеціальну змінну JavaScript під назвою $0. Далі, переконавшись, що я не натискаю недбало деінде у вікні браузера (особливо частину HTML-коду), я натискаю на консолі та прикріплюю прослуховувач подій для цього введення тексту. Для цього мені потрібен лише один рядок коду: monitorEvents($0, ‘mouse’). Частина «миша» тут повідомляє Chrome, що я зацікавлений лише в спостереженні за подіями, які відбуваються за допомогою миші.
Щойно я натискаю клавішу Enter/Return, моніторинг активується, і якщо я зараз наведу курсор миші на введений текст або клацну його, ці події реєструватимуться на консолі як об’єкти JavaScript:
Як ви можете бачити на знімку екрана, було зафіксовано декілька типів подій миші, коли я клацав елемент, вводив своє ім’я, а потім відводив мишу (події введення, оскільки вони були подіями клавіатури, не реєструвалися). Події самі є об’єктами JavaScript, як видно зі знімка екрана; кожен об’єкт події містить величезну кількість інформації. Наприклад, я розгорнув об’єкт події «click», і кількість властивостей не могла вмістити всі на одному знімку екрана!
Я наполегливо рекомендую вам негайно випробувати цю функцію, оскільки вона напевно позбавить вас від багатьох головних болів у ваших майбутніх проектах!
Звіти про роботу сайту
У наші дні ефективність веб-сайту створює або руйнує бізнес/веб-сайт. Навіть невелике підвищення продуктивності призводить до значного покращення пошукової оптимізації, а також до задоволення користувачів. Але як дізнатися, які частини вашого веб-сайту потребують уваги, а які з них уже хороші?
Вам потрібно найняти команду експертів і терпляче чекати кілька днів?
Що ж, є випадки, коли це потрібно зробити, але, на щастя, Chrome DevTools допоможе нам. В останніх версіях Chrome (кінець 2020 року) ви знайдете вкладку Lighthouse в DevTools. Кілька місяців тому він називався Audits, і, як не дивно, саме таку назву ви знайдете в офіційних документах на момент написання. У будь-якому разі справа в тому, що раніше Lighthouse був модним веб-сайтом для безкоштовної перевірки ефективності веб-сайтів, але потім Google його заблокував (причини не вказуються). На щастя, той самий потужний функціонал пізніше знову з’явився в 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 або стрибати через якісь інші обручі під час спостереження елемента в іншому стані.
Панель інструментів
Останньою, але не менш важливою в цьому списку є панель інструментів. Це ще одна з тих неймовірно корисних функцій, які добре приховані, і їх можна побачити лише за допомогою комбінацій клавіш. Як випливає з назви, панель «Інструменти» — це не окремий інструмент, а свого роду інформаційна панель, де доступні майже всі функції DevTool. Оскільки існує занадто багато функцій, які пропонують загальну функціональність DevTools, рядок пошуку доступний прямо вгорі.
Щоб активувати панель інструментів, переконайтеся, що ви перебуваєте на панелі DevTools, а потім натисніть Ctrl + Shift + P (або Cmd + Shift + P для користувачів Mac):
Панель інструментів наповнена можливостями та сюрпризами. Наприклад, чи знаєте ви, що можете зробити знімок екрана безпосередньо з DevTools?
Б’юся об заклад, що ні, тому що вам доведеться запустити панель інструментів і ввести «скріншот» у рядку пошуку, щоб дізнатися, що:
Ви також помітите кілька варіантів створення скріншотів, включаючи один для вибраного вузла DOM! Досліджуйте панель інструментів більше, і я запевняю, що ви не розчаруєтеся!
Якщо вам потрібно віддалено зробити знімок екрана будь-якої веб-сторінки, скористайтеся інструментом знімка екрана techukraine.net.
Висновок
Браузер Chrome сам по собі багатий функціями, але де він справді блищить, так це пропозиція DevTools. Як ми бачили в цій статті, існує чимало добре прихованих функцій, а також інших, які ховаються на виду, про які переважна більшість користувачів не знають. Чому ці функції приховані?
Я припускаю, що деякі з них є дуже експериментальними (наприклад, режим дизайну), і розробники Chrome хочуть, щоб звичайним користувачам було важко знайти ці функції. Що стосується решти багатьох функцій, я вважаю, що це просто випадок перевантаження інформацією: якщо є, скажімо, 120 функцій, де деякі з них мають підфункції тощо, майже неможливо розробити правильний інтерфейс користувача для таких сценарій. Крім того, Google історично не дуже добре працював над UX своїх продуктів, тож це так. 🤷🏻♂️
Незважаючи на це, я сподіваюся, що деякі з цих функцій були для вас корисними. Але що ще важливіше, я сподіваюся, що ця стаття дала вам уявлення про те, що де ховається, щоб наступного разу, коли ви захочете дослідити або шукати щось конкретне, ви знаєте, куди піти, щоб «копати глибше». 😆