Огляд Chrome DevTools для QA and Dev

💡 Усі статті, обговорення, новини про тестування — в одному місці. Приєднуйтесь до QA спільноти!

Вітаю, з вами Артур.

У цій статті я хочу показати вам, як можна використовувати такий інструмент як Chrome DevTools у тестуванні та дебагінгу.

Це не деталізований гайд інструментом, а швидкий старт в його легкому опануванні.

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

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

Загалом корисними майже для щоденного використання є такі штуки як inspect button, elements, network, console. Трішки менше популярними у використанні є sources, performance, recorder та application.

Тож давайте розглянемо по черзі все це.

Як знайти та відкрити

Для цього є декілька способів:

• Натиснути F12.
• Клацнути правою кнопкою миші та обрати пункт Inspect на якомусь елементі.
• Натиснути Ctrl + Shift + C або Command + Option + C (Mac).
• Натиснути Ctrl + Shift + J або Command + Option + J (Mac) для виклику консолі.

Сам інстурмент можна розмістити в різних положеннях: внизу, справа, зліва та як окреме вікно.

Inspect button

Вона дозволяє швидко переглянути властивості елемента: розмір, колір шрифта та тип, колір фону, тег айдішний та клас елемента.

Коли використовувати: для шводкого перегляду властивостей елемента.

Toggle Device Mode

Дозволяє імітувати адаптацію вебзастосунку під різні екрани та девайси.

Можна додати свій власний девайс або обрати з наявних.

Коли використовувати: при тестуванні адаптації під мобілки та різних ширин екранів.

Elements

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

Із цікавого — тут можна робити пошук за елементами (наприклад, за xpath або тегом).

Ще дуже класна штука, котра допомагає інколи зафрізити стан застосунку — breakpoint. Вони дозволяють зафрізити застосунок при певних діях: модифікації атрибутів, модифікації дерева або видаленні ноди. Для цього треба клікнути правою кнопкою миші на елементі та обрати один з варіантів зупинки.

Ну і останнє — примусово вводити елемент в якийсь стан. Наприклад, в стан наведення мишки.

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

Коли використовувати: для детального тестування дом-дерева, перевірки стилів та зупинки сторінки в певному стані.

Network

Дозволяє вам перегладяти весь трафік з вашого застосунку.

Ви можете фільтрувати запити за типами — js, css, img, XmlHttpRequests та інші.

Також можна змінювати швидкість інтернету для тестування лоадеров.

Коли використовувати: для перегляду та аналізу трафіку застосунку.

Console

Консолька дозволяє виконувати джаваскріпт-код і взаємодіяти з вебсторінкою, а також передивлятися всі логи від вашого застосунку.

Логи системи можна з легкістью фільтрувати.

Консольку можна налаштувати кастомно під себе.

Можна сховати нетворк або заборонити видаляти логи при перезавантаженні сторінки, згрупувати подібні повідомлення, логувати xml-реквести або доповнювати з історії введення.

Ще одна цікава особливість — це експрешн.

Це штука, котра виконується 4 рази за 1 секунду. Можна написати будь-який скрипт і він буде виконуватися 4 рази за 1 секунду.

Коли використовувати: для моніторингу логів та виконання JS-коду.

Sources

Покаже вам, на які домени ходить ваш сайт та які ресурси завантажує.

З цікавого, що може стати також в нагоді, перезапис файлів. Тобто ви можете обрати якийсь файл з сайту та переписати, наприклад, своїм власним. Це може бути як картинка, так і якийсь css-файл з фіксом бага, щоб швидко перевірити, як це буде виглядати.

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

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

Application

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

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

Recorder

Штука, котра дозволить вам зробити запис послідовності якихось дій на сторінці. Міні-автоматизація за принципом record-and-play.

Коли використовувати: для автоматизаціїї невеличких рутиних дій.

Performance

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

Коли використовувати: для аналізу перфомансу вашого застосунку.

Сподіваюсь, вам це стане у нагоді та допоможе у роботі.

Також підписуйтесь на мій телеграм-бложик, де багато корисної інформації.

Щасливого тестування :)