Інструменти розробника в браузері. Вкладка Console

Інструмент DevTools

Developer Tools – інструмент за замовчуванням у браузері Google Chrome та інших, який призначений для розробників та тестувальників з метою відладки коду. З його допомогою можна переглядати код сторінки, логи, завантаження сторінки, відображення в різних дозволах, помилки коду і багато іншого.

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

Існує декілька способів відкриття Developer Tools:

• гарячі клавіші Command – Option – I (Mac) або Control – Shift – I (Windows/Linux);
• меню Додаткові інструменти > Інструменти розробника;
• Кнопка F12.

Основні вкладки Developer Tools:

• Elements
• Console
• Sources
• Network
• Performance 
• Memory 
• Application 
• Security 
• Lighthouse 

У цій статті буде детально розглянута вкладка «Console».

Вкладка «Console» призначена для виведення важливих повідомлень про роботу сайту. У ній відображаються помилки, попередження і логи (якщо вони включені), а також в цій вкладці можна виконувати JavaScript код. Іноді при тестуванні сайту тестувальники тримають цю вкладку відкритою весь час, щоб відстежувати логи та спіймати невидимі з боку користувацького інтерфейсу помилки або попередження. Такі помилки та попередження означають проблеми у роботі коду і є не менш важливими, аніж видимі помилки через інтерфейс. Виявлення подібних помилок і попереджень – привід заводити баг-репорт.

Повідомлення про помилки в консолі містять посилання на рядок з дефектом. При натисканні на посилання відкривається вкладка «Sources», де буде відображений JS елемент з невірними параметрами.

Консоль можна і необхідно очищати, щоб видаляти вже непотрібні логи – так буде простіше орієнтуватися серед повідомлень і помилок. Зробити це можна різними способами:

1. Натиснути відповідну кнопку у вкладці.

2. Натиснути на панелі з повідомленнями правою кнопкою миші і в контекстному меню обрати пункт «Clear Console».

3. Ввести команду clear() або console.clear() в командну строку API та натиснути Enter.

4. Використати гарячі кнопки ⌘K або ⌃L (Mac), Control – L (Windows та Linux).

Щоб налаштувати консоль, необхідно натиснути іконку «Console Settings» та обрати відповідні параметри.

Основні параметри:

1. Log XMLHTTPRequests – визначає чи необхідно логувати цей запит у консолі.
2. Preserve log – визначає, чи скидати історію консолі при переході на нову сторінку або при оновленні сторінки. Якщо вимкнути цю опцію і оновити сторінку – вся попередня історія логів не буде доступна. Якщо ж залишити увімкненою – історія консолі буде збережена при переході на іншу сторінку або оновленні сторінки. Ця опція рятує у ситуаціях, коли для відтворення бага потрібно відкрити кілька сторінок і відобразити це в логах.
3. Eager Evaluation відображає результат виконання виразу без виконання коду безпосередньо в консолі. Тобто превью результату буде відображатися до натискання клавіші Enter.

4. Autocomplete from History – якщо в консолі вже була введена якась команда, то вона буде виводитися в запропонованих після початку введення цієї ж команди.

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

Відображення повідомлень у консолі можна фільтрувати по їх типу: 

1. All – виводяться і відображаються усі повідомлення. 
2. Errors – відображаються лише помилки під час завантаження сайту.
3. Warnings – з'являються лише попередження.
4. Info –. відображаються інформаційні повідомлення і відкладна інформація.
5. Verbose – відображається повідомлення console.timeEnd() та інші функції консольного виводу.

Відфільтрувати повідомлення можна за допомогою кнопки «Default levels» (встановлені налаштування у випадаючому списку будуть збережені після перезапуску браузера) або кнопки «Show console sidebar» (встановлені фільтри в цьому меню є пріоритетними по відношенню до випадаючого списку «Default levels»). До консолі можуть потрапляти також помилки різних плагінів, а не тільки самого сайту. Тому повідомлення потрібно фільтрувати і з точки зору того, чи стосується помилка сайту чи ні.

Випадаючий список «Top» також призначений для фільтрації інформації в консолі. З його допомогою можна розділяти логи на фрейми, відокремлюючи повідомлення самого сайту і різних плагінів, розширень і вірусів. Щоб ця фільтрація працювала, потрібно увімкнути чекбокс «Selected Context Only».

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

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