Окт. 31

Chrome DevTools: налаштування, можливості та способи перевірки коду

Для чого потрібні Chrome DevTools? Буває так, що написаний код невідомо чому відмовляється працювати. Щоб швидко з’ясувати, у чому проблема з кодом й ефективно її розв’язати, потрібно опанувати певний набір інструментів. Chrome DevTools — один з найпотужніших інструментів веб-розробника. Його вбудовано в найпопулярніший нині браузер Chrome.

Кому це буде корисно? Усім, хто займається веб-розробкою і переймається своєю ефективністю. Однозначно must read для початківців. Я впевнений, що кожен читач зможе знайти в цій статті щось нове й корисне, незалежно від свого досвіду в розробці.

Чому я вирішив про це розповісти? Мій досвід як програміста починався ще до виникнення Chrome, і знайомство з DevTools відбувалося поступово від початку їхнього створення. Однак про багато можливостей цього інструменту я дізнався вже навчаючи програмувати в академії.

Коли викладаєш програмування для початківців, помічаєш, чого може не вистачати, щоб ефективно виконати завдання. Часто перешкоджає брак досвіду, а отже — відсутність у свідомості студента вже готових шаблонів, що розв’язують поставлене завдання. Та навіть тоді, коли студент здогадався, який підхід варто застосувати, його може спіткати несподіванка: написаний код працює зовсім не так, як повинен би!

Продемонструвати зацікавленому читачеві, як швидко розв’язувати подібні проблеми за допомогою Chrome DevTools, і стало мотивацією для написання статті.

Виклик і налаштування

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

Щоб дослідити якийсь елемент на сторінці (у вкладці Elements), на нього потрібно клацнути правою кнопкою миші й вибрати пункт Inspect.
Щоб швидко відкрити вкладку Elements без конкретного виділеного елемента, можна скористатися комбінацією клавіш Ctrl + Shift + C або Command + Option + C (Mac).
Щоб швидко опинитися у вкладці Console, натисніть Ctrl + Shift + J або Command + Option + J (Mac). З допомогою цієї ж комбінації клавіш DevTools можна закрити.

Налаштувати інструменти можна, натиснувши три вертикально розміщені крапки в правому верхньому куті їхнього вікна (поруч із хрестиком). За допомогою меню, яке з’явиться, можна вибрати варіант розміщення DevTools: унизу сторінки, з якою ви працюєте, у лівій або правій її частині чи взагалі в окремому вікні. Імовірно, час від часу вам доведеться перемикатися між цими варіантами, адже, залежно від розміщення елементів на сторінці та їхнього розміру, мати панель з інструментами буде (не)зручно в різних місцях.

З того ж меню, вибравши Show console drawer або More tools, відкривається доступ до додаткових можливостей інструментів розробника (див. останній розділ нижче). Пункт Shortcuts дасть змогу переглянути основні комбінації клавіш, які суттєво пришвидшують роботу з DevTools, а пункт Settings — налаштувати інструменти й сторінку загалом. Скажімо, пункт налаштувань, яким я користуюся найчастіше, — відключення скриптів на сторінці (Disable JavaScript). Він, щоправда, допомагає мені здебільшого не як розробникові, а як користувачеві інших сайтів: інколи стає в пригоді, коли треба відключити некоректну клієнтську валідацію полів або зупинити скрипт, що без причини вантажить процесор.

Вкладка Elements

Перша і для багатьох випадків основна вкладка інструментів — Elements. Тут розробник може переглянути дерево HTML-елементів і редагувати їхній код «на льоту».

Для того щоб перейти до потрібного елемента на сторінці, можна натиснути кнопку з курсором у лівому верхньому куті вікна DevTools, а потім — у тому місці на сторінці, де відображено елемент. Інший спосіб — відразу знайти потрібний елемент серед дерева, яке відображає DevTools. Для цього рухайтеся між рядками дерева, натискаючи кнопки вниз і вгору на клавіатурі, а коли певний рядок потрібно буде розгорнути й відобразити його дочірні елементи, натисніть клавішу зі стрілкою праворуч (звичайно, для такої навігації можна користуватися й мишею). У будь-який момент Chrome підсвічуватиме на сторінці виділений елемент синім кольором; крім того, за допомогою клавіші H цей елемент можна тимчасово приховати, а потім відобразити знову, а за допомогою клавіші Delete відразу видалити.

Під час зневаджування (debugging) скриптів, що маніпулюють деревом елементів, незамінною може виявитися функція зупинки (breakpoint) на подію зміни елемента. Для її активації клацніть правою кнопкою на елементі у дереві, виберіть Break on, а далі один з трьох варіантів: зупинятися, коли скрипт вносить зміни у структуру вкладеного дерева цього елемента; коли міняється атрибут; або коли елемент збираються видалити.

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

Щоб змінити тег елемента, якийсь його атрибут або текстовий вміст, двічі клацніть цей тег, атрибут або текст, уведіть нове значення й натисніть Enter. Інколи хочеться змінити увесь код HTML-елемента. Тоді вам знадобиться клавіша F2 (або можна клацнути елемент правою кнопкою миші й вибрати Edit as HTML). У нижній частині вікна DevTools продублює «шлях» до поточного вибраного елемента.

Проте велику частину функціоналу містить і права частина вкладки Elements, що, своєю чергою, містить кілька панелей-підвкладок. На панелі Styles можна переглянути всі присвоєні виділеному елементу стилі разом з назвою CSS-файлу і номером рядка, в якому задано відповідне правило. Стилі можна швидко відключати й підключати знову, натискаючи прапорець ліворуч від конкретної властивості. Ще можна змінити значення властивості, натиснувши її, а також додати нову CSS-властивість, натиснувши праворуч від якої-небудь з наявних.

Угорі списку CSS-правил міститься поле швидкого пошуку потрібної властивості. Туди можна ввести, наприклад, «color» або «black» і побачити, яке правило задає елементу чорний колір. Поряд з полем є кнопки, що дають змогу навісити на елемент нові класи або навіть псевдокласи. Останнє буває зручно, коли потрібно розібратися в стилях, що з’являються в елемента лише тоді, коли на нього наведено курсор або коли цей елемент стає активним.

Під списком CSS-правил (або за маленького розміру вікна — праворуч від них) з’являється діаграма блокової моделі виділеного елемента:

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

У другій панелі — Computed — можна переглянути конкретні значення, які браузер присвоїв тим або іншим CSS-властивостям. Скажімо, замість формального color: inherit тут можна побачити фактичний color: rgb(0, 0, 0), а замість width: auto — width: 1234px. Також, якщо розкрити властивість, натиснувши стрілку поруч з нею, з’явиться ланцюжок правил, що її зачіпають; переписані (відхилені) значення закреслено:

Для елементів, що містять текст, унизу панелі відображено інформацію про фактичний шрифт, який використано для його промалювання. Цей шрифт може відрізнятися від прописаного у font-family, якщо, наприклад, потрібного шрифта у розпорядженні браузера не виявилося.

У наступній підвкладці — Event Listeners — браузер відображає всі обробники подій, навішені на поточний виділений елемент. Якщо ж встановити прапорець Ancestors, то до цього списку додадуться ще й обробники, навішені на будь-який елемент вище в дереві: саме вони потенційно можуть відреагувати на подію, пов’язану з поточним елементом. Для кожного обробника вказано місце в коді, де його оголошено. Крім того, є змога негайно видалити цей обробник, щоб перевірити, чи не він спричиняє певний баг, який ви зараз зневаджуєте.

У підвкладці DOM Breakpoints відображено список усіх елементів DOM-дерева, на зміну яких браузер зупинятиме виконання скриптів (про налаштування таких точок зупинки див. трохи вище). Тут також можна тимчасово відключити ту або іншу зупинку.

У панелі Properties виводять перелік усіх властивостей елемента як JavaScript-об’єкта, до того ж список розбивають за ланцюжком успадкування від властивостей Object через Node й інші проміжні класи до властивостей самого елемента.

Панель Accessibility презентує сторінку в такому вигляді, як її бачать пристрої для слабозрячих людей. Якщо виділити який-небудь елемент у лівій частині вкладки Elements, на цій панелі відобразиться інформація про нього. Водночас, якщо клацати на рядках-рівнях дерева доступності (Accessibility Tree), можна проглянути все це дерево. Утім, звичайно, тема доступності потребує для адекватного розкриття окремої повноцінної статті.

Вкладка Console

Основна функція цієї вкладки — інтерактивна взаємодія з браузером через введення в консоль JavaScript-команд й отримання у відповідь результатів, які вони повертають. Скажімо, у такий спосіб можна потестувати роботу певного фрагмента коду, просто вставивши його в консоль і натиснувши Enter. Інший сценарій використання — запуск глобально оголошеної функції або того чи іншого методу маніпуляції DOM. Наприклад, щоб додати в елемент footer текст, можна набрати й запустити в консолі команду document.getElementsByTagName('footer')[0].append('Bye!'); якщо ж футер і так вибрано у вкладці Elements, то досить написати $0.append('Bye!'), бо Chrome автоматично підставить у змінну з назвою $0 поточний елемент.

Сюди ж, у вкладку Console, потраплятимуть діагностичні повідомлення, які виводить ваш код за допомогою команди console.log(…), а також спеціалізованих варіантів цієї команди:

console.dir(…) — на відміну від console.log(…), який намагається презентувати об’єкт у найзрозумілішій формі, dir виводить його як дерево властивостей. Це може бути зручно, наприклад, коли ми аналізуємо DOM-елементи в ролі JavaScript-об’єктів.
console.trace() — виводить поточне дерево виклику (stack trace).
console.error(…) — виводить повідомлення як помилку, включаючи дерево виклику.
console.assert(expression, …) — виводить повідомлення про помилку, якщо вираз expression має значення false.
console.warn(…) — оформлює повідомлення як попередження.
console.count(label) — автоматичний лічильник: виводить мітку label і кількість разів, які console.count уже виводився з цією міткою, ураховуючи й поточний виклик.
console.time(label) / console.timeEnd(label) — засікає час між викликами time і timeEnd та виводить цей час.
console.table(…) — виводить масив об’єктів як таблицю.

За допомогою елементів у верхній частині консолі її можна налаштувати:

При натисканні на трикутник (кнопка зліва), відкриється панель, що дасть змогу відфільтрувати повідомлення в консолі — наприклад, показати лише помилки або попередження. Кнопка із зображеним на ній перекресленим колом натомість очистить всі повідомлення без змоги їх повернути. Далі розміщено випадний список, з якого можна вибрати контекст, в якому виконує команди консоль. Основний контекст — top — це сама сторінка, з якою ви працюєте. Однак у списку можуть бути й інші варіанти — по окремому контексту на кожен iframe, розміщений на сторінці, на кожен worker і навіть на розширення, що мають до сторінки доступ.

За допомогою наступної кнопки, на якій зображено око, можна створити «живий» вираз: його Chrome обчислює кілька разів на секунду й щоразу оновлює результат, який відображає на екрані. Це дає змогу в режимі реального часу стежити за змінами в значеннях, які вас цікавлять.

Поля, розміщені праворуч, теж призначені для фільтрування повідомлень у консолі. За допомогою останньої кнопки відкриваємо мініпанель з додатковими налаштуваннями консолі, такими як заборона очищувати консоль під час переходу на іншу сторінку й відключення «жадібного» обчислення — виведення в консоль значення виразу до натискання кнопки Enter.

Вкладка Sources

У цій вкладці можна переглянути, відкрити й навіть редагувати вихідні файли сайту. Для цього в лівій частині вкладки, на панелі Page, виберіть потрібний файл. Унесені в нього зміни будуть застосовані до сторінки в режимі реального часу: наприклад, якщо ви змінюєте стиль, то сторінка миттєво оновлює свій вигляд, а якщо змінюєте код, який виконує деяка кнопка, то після наступного натискання на цю кнопку браузер запустить уже нову версію коду. Щоправда, після перезавантаження сторінки всі внесені у файли зміни будуть втрачені. Щоб цього уникнути, вам потрібно підключити сторінку до локального диска, скориставшись панеллю Filesystem. Альтернативно, перемкнувшись на панель Overrides, ви зможете вибрати теку, файли з якої автоматично підмінятимуть ті, що завантажує сторінка.

Остання панель у лівій частині вкладки — Snippets — призначена для збереження й запуску фрагментів коду багаторазового використання. Прикладом подібного «сніпету» може бути завантаження на сторінку вашого звичного набору JS-бібліотек.

Нарешті, натиснувши в лівій частині вкладки кнопку з трьома крапками й вибравши пункт Open file, ви отримаєте доступ до поля швидкого пошуку файлів.

Проте, мабуть, найголовніше, що пропонує вкладка Sources — це можливість зневаджувати код. Спершу для цього потрібно зупинити виконання коду в тому місці, яке вас цікавить і яке ви хочете дослідити. Найпрямолінійніший спосіб виставити такий breakpoint — відкрити потрібний файл, знайти потрібний рядок і клацнути на його номері. Тоді номер підсвітиться синім кольором, а, коли виконання дійде до вибраного рядка, браузер призупинить виконання JS і підсвітить синім увесь рядок. Навіть якщо вихідний код сторінки мініфіковано й склеєно в один суцільний рядок, Chrome може його миттєво «розмініфікувати» й акуратно відформатувати. Для цього потрібно клацнути на спеціальній кнопці в нижній частині вкладки: там зображено фігурні дужки.

Панель у правій частині вкладки дає змогу керувати процесом зневадження. Кнопки зверху мають такі функції:

Продовжити виконання скриптів (якщо браузер перебуває в режимі зневадження) або зупинити виконання скриптів і перейти до зневадження (в іншому випадку). Також у режимі зневадження можна затиснути цю кнопку й вибрати один з двох додаткових варіантів:
- продовжити виконання з ігноруванням точок зупину (breakpoints) протягом наступних 500 мілісекунд — наприклад, якщо ви не хочете зупинятися в тілі поточної функції;
- перервати виконання поточного коду — наприклад, щоб вийти з нескінченного циклу.
Перейти до наступного рядка коду.
Перейти всередину виклику функції в поточному рядку коду. Якщо функцію викликають асинхронно, виконання перейде до коду за нею, але потім, коли настане час запуску функції, виконання зупиниться знову так, наче у функції виставлено breakpoint. Якщо поточний рядок передає повідомлення у фоновий потік або навпаки, виконання перейде у відповідний обробник.
Дочекатися виходу з поточної функції і продовжити зневадження.
Перейти всередину виклику функції в поточному рядку коду. Асинхронні функції й обробники повідомлень між потоками ігноруються.
Тимчасово деактивувати/поновити всі точки зупину.
Зупинятися на всіх винятках (exceptions).

Також панель містить такі блоки:

Блок Threads відображає, в якому потоці ми зараз перебуваємо, і дає змогу перемикатися між потоками.
Watch дає змогу відстежувати значення змінних і довільних заданих виразів. Зверніть увагу, що змінні беруться (і вирази обчислюються) відповідно до локального оточення коду в місці його зупинки.
Call Stack показує ланцюжок виклику функцій і методів (поточний рядок коду належить функції з верхнього рядка списку, яку викликала функція з наступного рядка, яку, своєю чергою, викликала функція з третього рядка списку і т. д.). Між функціями з цього ланцюжка можна перемикатися.
Блок Scope чимось нагадує Watch: у ньому структуровано виведено всі змінні, доступні з поточного контексту.
У блоці Breakpoints перераховано всі виставлені в DevTools точки зупину з можливістю тимчасово відключити або видалити кожну.
Блок XHR/fetch Breakpoints дає змогу встановити неформальну точку зупину на момент ініціювання будь-якого AJAX-запиту.
DOM Breakpoints показує всі елементи, на модифікацію яких встановлено зупинку (див. розділ про вкладку Elements), і, так само як і блок Breakpoints вище, дає змогу відключити відстеження кожної з таких подій.
Global Listeners має те саме призначення, що й панель Event Listeners вкладки Elements, але спеціалізується на подіях, навішених на window.
Блок Event Listener Breakpoints дає змогу встановити неформальні точки зупину на довільні з широкого класу подій: будь-які події, пов’язані з мишею, або окреме натискання лівою або правою кнопкою, подвійне натискання, вихід за межі елементів тощо; події клавіатури; події, пов’язані з анімаціями; різні етапи AJAX-завантажень; навішування і спрацьовування таймерів setTimeout/setInterval і чимало іншого.

Якщо ж панелей зліва й/або справа у вкладці Sources не видно, розкрийте їх, клацнувши на відповідних трикутниках зверху.

Вкладка Network

Тут відображено список усіх завантажених сторінкою ресурсів, а також діагностична інформація щодо кожного з них. У списку, правда, не буде завантажень, запущених до виклику інструментів розробника.

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

Якщо правою кнопкою миші клацнути на елементі у списку завантажень, то можна скопіювати його адресу, експортувати в різні формати (зокрема, для використання в Postman) і заблокувати завантаження цього URL у майбутньому. Натомість клацання по завантаженню лівою кнопкою відкриє панель з великою кількістю додаткової інформації про нього. У загальному випадку це заголовки (headers) і параметри запиту, текст відповіді сервера (панель Response) та його перегляд у відформатованому вигляді (Preview), передані на сервер і назад cookies, детальний таймінг завантаження, а також, у разі сокетного з’єднання, інформація про передані в обидва боки повідомлення (панель Frames).

Тепер гляньмо на елементи керування, що розміщені у верхній частині вкладки. Перша кнопка запускає/зупиняє протоколювання завантажень, а друга — очищує список. Далі — відображення панелі фільтрації і швидкий пошук. Фільтрація дає змогу залишити в списку лише ті файли, чия назва містить певний підрядок або відповідає регулярному виразу, або ті, які мають певний тип (картинки, стилі, AJAX-запити тощо). Пошук дає змогу шукати не лише за назвою файлу, а й за контентом завантажень, наприклад, ви можете з’ясувати, на який саме запит клієнту повернуто той або інший елемент на сторінці, або виявити, які ресурси було віддано з певним заголовком (header).

Наступні два прапорці визначають, чи очищувати список завантажень під час переходу на іншу сторінку й чи дозволяти кешування, коли відкрито інструменти розробника (позначте Disable cache, якщо хочете симулювати завантаження для користувача, який ніколи раніше не заходив на сторінку).

Випадний список, що йде далі, призначений для тестування роботи сторінки в умовах повільного або навіть відсутнього Інтернету. Виберіть один з передналаштованих профілів швидкості або створіть власний.

Дві наступних кнопки дають змогу імпортувати й експортувати (тобто зберегти) весь список у спеціальному форматі HAR. Нарешті, кнопка налаштувань, що розміщена в правому куті, надає доступ до ще кількох корисних функцій:

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

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

Вкладки Performance та Memory

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

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

Правіше на панелі містяться дві галочки, які для зручності приховують/показують на вкладці хронологічні скриншоти сторінки й графік використання пам’яті. Наступна кнопка викликає garbage collection — очищує зайняту пам’ять, яку насправді не використовують скрипти (це може знадобитися під час збору профілю). Остання кнопка відкриває панель налаштувань, за допомогою якої можна ввімкнути симуляцію повільного з’єднання з Інтернетом або слабкого процесора, а також виставити розширені параметри збору інформації.

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

Докладна інформація про вибраний проміжок буде доступна під графіком у формі окремих блоків, кожен з яких можна розгорнути. Наприклад, у блоці Main ви побачите діаграму виконання коду: по горизонталі йде час, а по вертикалі — ланцюжок виклику функцій. Блок Interactions містить протокол взаємодії користувача зі сторінкою (наприклад, натискання кнопок миші), Network — мережеві запити тощо.

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

Вкладка Bottom-up сортує всі функції, що викликані у вибраний період, за часом виконання власного коду (тобто без часу виконання «дочірніх» функцій) — це дає змогу швидко знайти конкретні рядки коду, що виконуються повільно. Для кожної функції можна переглянути ланцюжок її виклику. Водночас вкладка Call Tree сортує всі виконані браузером дії за загальним часом виконання і дає змогу розгортати їх, а також переглянути все піддерево викликів, яке вас зацікавить. Нарешті, у вкладці Event Log у хронологічному порядку розміщено всі події, що їх браузер зафіксував протягом вибраного періоду часу.

Вкладка інструментів Memory розробника дає змогу ліпше розібратися з тим, як на сторінці виділяється пам’ять під JavaScript.

Передусім у вкладці запропоновано вибрати один з трьох видів профілювання пам’яті:

Heap snapshot показує, які об’єкти займають скільки пам’яті саме в цей момент.
Allocation instrumentation on timeline будує хронологічний графік виділення пам’яті і дає змогу проаналізувати список об’єктів, створений протягом вибраного на графіку періоду часу.
Allocation sampling виводить інформацію про виділену пам’ять, розподілену за окремими функціями, які її споживали.

Для запуску будь-якого з цих видів профілювання слід натиснути на першу кнопку на мініпанелі інструментів у лівому верхньому куті вкладки; для зупинки останніх двох типів профілювання треба натиснути на цю кнопку ще раз. Ця мініпанель також містить кнопку Collect, про призначення якої ми говорили трохи вище.

Вкладки Application, Security й Audits

Вкладка Applications містить кілька окремих розділів:

Manifest — показує діагностичну інформацію про маніфест сторінки як веб-застосунку.
Service Workers — відображає список скриптів однойменного типу й дає змогу керувати ними.
Clear Storage — дає змогу очищувати збережений і закешований вміст сайту.
Local Storage, Session Storage і Cookies — надають інструменти для перегляду, редагування й додавання ключів/значень у відповідні сховища даних.

IndexedDB і Web SQL — дають змогу переглядати інформацію, збережену в локальних базах даних.
Cache Storage й Application Cache — відображають список програмно закешованих ресурсів.
Background Fetch і Background Sync — відображають події фонового завантаження й надсилання даних на сервер.
Notifications і Push Messaging — відображають події, пов’язані з пуш-повідомленнями та їхнім відображенням користувачеві.
Frames — ще один спосіб переглянути файли, завантажувані сторінкою; тут їх розподілено за типом.

Вкладка Security інструментів розробника надає інформацію, пов’язану з HTTPS: показує список усіх незахищених доменів, з яких вантажить ресурси сторінка (якщо такі є), а також дає змогу переглянути інформацію про SSL-сертифікат.

Вкладка Audits — проведення автоматизованої діагностики сторінки — як настільної, так і мобільної її версії — за цілою низкою параметрів:

Швидкодія (прапорець Performance).
Поведінка сторінки як незалежного застосунку (прапорець Progressive Web App).
Наявність або відсутність у коді потенційно проблемних моментів, наприклад використання застарілих API (прапорець Best practices).
Зручність використання сторінки для людей з вадами зору (прапорець Accessibility).
Оптимізованість сторінки для індексації пошуковими рушіями (прапорець SEO).

Після проведення тестів браузер виведе результати перевірки сторінки, а також набір порад щодо усунення виявлених недоліків.

Додаткові панелі

Додаткові панелі можна відкрити, скориставшись пунктом More tools меню інструментів розробника (див. розділ «Виклик і налаштування» вище). Тут є:

Додаткова консоль. Стане в пригоді, якщо ви захочете попрацювати водночас і з консоллю, і з однією з інших основних вкладок інструментів розробника.
Animations. Виводить список усіх анімацій, що запускаються на сторінці, поки панель відкрита, і розумно їх групує, спираючись на таймінг. Для кожної анімації можна переглянути її вихідний код та підправити параметри; також повторно відтворити анімацію, зокрема в сповільненому темпі.
Changes. Відображає зміни в коді сайту, внесені безпосередньо в браузер для тестування сторінки й відсутні в реальному вихідному коді.

Coverage. Показує статистику того, яка частина завантаженого JS- і CSS-коду реально використовується на сторінці. Дає змогу зробити детальний порядко́вий аналіз і в такий спосіб виявити й видалити зайвий код.
Layers. Дає змогу переглянути 3D-модель сторінки й проаналізувати її розбивку на спеціальні шари, в які браузер групує різні елементи й промальовує один над одним.
Performance monitor. Відображає навантаження сторінки на процесор, кількість пам’яті, яку з’їдає JavaScript, кількість DOM-елементів і навішених обробників подій, частоту перерахунку стилів, оновлення розмітки, а також графіки зміни цих параметрів з часом.
Remote devices. Дає змогу підключати до браузера Android-пристрої і зневаджувати роботу сторінки на такому пристрої просто на комп’ютері.
Rendering. Надає інструменти відстеження ефективності рендерингу сторінки — наприклад, діагностику FPS і підсвічування перемальовуваних ділянок на екрані. Також тут можна симулювати режим друку сторінки.
Request blocking. Список усіх заблокованих для завантаження URL з можливістю його очистити або додати до списку нові адреси.
Sensors. Вкладка дає «підробити» показники умовних сенсорів, які браузер надсилає сторінці. Наприклад, тут можна змінити місце перебування користувача й орієнтацію пристрою.
WebAudio. Виводить діагностичну інформацію щодо однойменної технології.

Мобільне подання

Закінчимо огляд можливостей інструментів розробника, розказавши (або нагадавши) читачеві про функцію мобільного подання, за яку відповідає кнопка у верхній частині вікна DevTools із зображеними на ній ґаджетами:

Після натискання кнопки браузер перейде у спеціальний режим, де ви можете вказати конкретну ширину й висоту умовного пристрою — їх установить для сторінки браузер. Окрім того, можна просто вибрати одну із заздалегідь заданих моделей телефонів або планшетів, під які підлаштується Chrome.

Браузер емулюватиме не лише розмір екрана, а й спеціальний рядок ідентифікації пристрою (user agent string), який він передає вашому коду. Подібно до мобільного пристрою оброблятиметься також клацання мишею — як «дотик» до сторінки. Вийти з цього особливого режиму можна, повторно клацнувши кнопку зверху DevTools.

Підсумок

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

За детальною документацією по функціоналу, пов’язаному з DevTools (зокрема й такому, якого на момент написання статті там ще не було), ви завжди можете зайти на присвячену їм сторінку документації.