Про те, що таке інструменти розробника у браузері можна прочитати у нашій попередній статті «Інструменти розробника у браузері. Вкладка Console».
У цій статті ми розглянемо вкладку Elements, основним призначенням якої є перегляд коду сторінки у вигляді дерева елементів DOM. За допомогою цієї вкладки можна не тільки переглядати код, а й вносити в нього зміни, клікнувши правою кнопкою миші по потрібному елементу: додавати і редагувати атрибути, приховувати або видаляти елементи з дерева, додавати псевдокласи. Зміни, які відбулися на вкладці Elements, застосовуються тільки локально і скидаються після перезавантаження сторінки. Тому ця вкладка використовується для тестування зміни елементів сторінки, атрибутів, пошуку необхідного елемента в коді та перегляду його властивостей.
Щоб переглянути необхідний елемент в структурі, можна скористатися двома способами:
- Натиснути кнопку «Select an element in the page to inspect it».
2. Навести курсор на потрібний елемент на сторінці, він виділиться блакитним кольором в коді.
Рухатись між рядками коду також можна за допомогою клавіш зі стрілками вниз і вгору на клавіатурі, а щоб розгорнути дочірні елементи, потрібно натиснути клавішу зі стрілкою вправо, згорнути – вліво.
Як змінювати елементи сторінки?
Варто ще раз нагадати, що зміни не впливають на дані на сервері, а будуть застосовані лише на ПК конкретного користувача і скинуті після оновлення сторінки.
Щоб приховати елемент зі сторінки, потрібно його виділити і натиснути клавішу H, або натиснути правою кнопкою миші і в контекстному меню вибрати «Hide element». Для видалення елемента дії аналогічні, використовуючи клавішу Delete або кнопку «Delete element».
Для внесення змін до HTML-елементу потрібно виділити його в структурі та натиснути клавішу F2. Відкриється вікно, в якому можна змінювати атрибути і вміст тега, або дописувати інші теги.
Змінювати теги можна також і в контекстному меню, яке відображається після кліку правою кнопкою миші по елементу в коді.
Щоб змінити динамічний елемент, який відображається, наприклад, тільки після наведення на інший елемент, потрібно спочатку відобразити його на сторінці, а потім відкрити інструменти розробника за допомогою клавіші F12 і вибрати цей елемент за допомогою поєднання клавіш Ctrl + Shift + C.
У меню Copy можна вирізати або скопіювати елемент, а також вибрати його різні шляхи копіювання.
Ще одна корисна функція – Force state. З її допомогою можна імітувати різні стани елементів, наприклад, при наведенні курсору на них або натискання.
На вкладці Elements є й інші додаткові вкладки, які не менш важливі.
У вкладці Styles можна переглянути CSS стилі елементів (кольори кнопок, фонів, полів, а також розмір, вид і колір шрифтів), а також назва файлу, звідки вони взяті. Праворуч від фільтра знаходиться кнопка додавання стилів.
Внизу вкладки Styles і на вкладці Computed відображається блокова схема елемента і його стилі, межі та розміри, а також відступи і інтервали навколо елемента.
Важливою функцією вкладки Elements є можливість емуляції перегляду сторінки з мобільного пристрою. При натисканні кнопки «Toggle device toolbar» відкривається вікно перегляду сайту з мобільного пристрою, в якому можна вибрати необхідний девайс або ж задати потрібне розширення екрану.
Орієнтуватися у вкладці Elements, як і в цілому в інструментах розробника, необхідно всім тестувальникам, які прагнуть розібратися в технічній стороні тестування та підвищити якість виконуваного ними тестування і оформленої документації. Інструменти розробника можуть надати багато корисних деталей для відтворення та виправлення бага.
