Як відкрити Інструменти розробника

Налаштування інструментів розробника

На цій сторінці наведено способи налаштування засобів розробки Microsoft Edge.

Параметри

Параметри>Параметри містять безліч параметрів налаштування засобів розробки.

Щоб відкрити параметри, у засобах розробки клацніть піктограму Налаштування та керування засобами розробки ( ) та клацніть Параметри ( ). Або, поки devTools має фокус, натисніть клавішу F1.

Швидкий перегляд

На панелі швидкого перегляду у нижній частині засобу розробки можна вибрати засоби для відображення.

Щоб відкрити (або закрити) панель швидкого перегляду , натисніть клавішу ESC коли фокус знаходиться в засобах розробки.

Ви можете переміщати інструменти між панеллю дій (вгорі) та панеллю швидкого перегляду (Внизу).

Щоб перемістити засіб із панелі швидкого перегляду на панель дій, клацніть правою кнопкою миші засіб і виберіть Перемістити до верхньої панелі дій:
Щоб перемістити засіб з панелі дій на панель швидкого перегляду , клацніть правою кнопкою миші засіб і виберіть Пункт Швидкий перегляд вниз:

Зміна порядку коштів

Щоб змінити порядок вкладок на панелі інструментів, перетягніть вкладку інструмента до потрібного місця. Порядок інструментів користувача зберігається в сеансах DevTools.

Наприклад, за замовчуванням засіб "Мережа" є п'ятою вкладкою на панелі дій. Ви можете перетягнути вкладку Мережа , щоб стати першою вкладкою:

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

Відкриття та закриття інструментів

Щоб спростити інтерфейс DevTools, багато засобів не відкриваються за промовчанням. Щоб відкрити інструмент на панелі дій або панелі швидкого перегляду , натисніть кнопку Додаткові інструменти ( ) праворуч від вкладок, а потім виберіть засіб зі списку:

Щоб закрити інструмент, клацніть правою кнопкою миші вкладку засобу та виберіть команду Видалити з панелі дій або Видалити зі швидкого уявлення:

Зміна місця закріплення Засобів розробки у браузері

Щоб змінити місце закріплення Засобів розробки у браузері, клацніть піктограму Налаштування та керування Засобами розробки ( ) і виберіть один із параметрів у підменю Розташування док-станції :

Збільшення чи зменшення масштабу засобів розробки

Відновлення параметрів за замовчуванням

Щоб відновити тему за промовчанням, розміщення, порядок інструментів та інші параметри, виберіть Параметри>, прокрутіть вниз і натисніть Відновити значення за промовчанням та оновити:

Налаштування комбінацій клавіш

Відео про налаштування інтерфейсу користувача DevTools

Налаштування засобів розробника Microsoft Edge та швидкий доступ до функцій

Опубліковано 5 травня 2022 р.

Дізнайтеся, як настроїти засоби розробки відповідно до своїх потреб.

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

Загальні відомості про інтерфейс користувача DevTools

Опубліковано 1 вересня 2022 р.

Дізнайтеся, як організовано інтерфейс Інструменти Microsoft Edge. Якщо ви заплуталися в тому, які інструменти доступні і що роблять основні частини інтерфейсу DevTools, це відео допоможе вам більш комфортно.

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

Ознайомтеся з цим відео, щоб дізнатися про main частинах інтерфейсу користувача DevTools, як налаштувати його відповідно до ваших потреб, дізнатися про різні доступні засоби і про те, куди звернутися за допомогою.

також

Деякі частини цієї сторінки є зміненими матеріалами, створеними та надані Google. Їх використання регулюється умовами, описаними у ліцензії Creative Commons Attribution 4.0 International License. Вихідна сторінка знаходиться тут і автор Кейс Баскі.

DevTools: як відкрити інструменти розробника в браузері і чому вони роблять роботу ефективнішою

DevTools (інструменти розробника) доступні у всіх сучасних браузерах та корисні з кількох причин. Наприклад, їх можна використовувати для налагодження коду та тестування змін у HTML, CSS та JavaScript у режимі реального часу. У цій статті розповімо, як відкривати DevTools у різних браузерах та на прикладі розберемо, які можливості вони надають.

Вкладка Console у DevTools дозволяє працювати з JavaScript під час перегляду будь-якої сторінки. Це може бути зручно у різних ситуаціях:

Перегляд помилок. Наприклад, дозволяє побачити, що якісь ресурси (CSS, зображення тощо) на сторінці не завантажилися.
Звернення до HTML-елементів. Так можна відразу перевірити правильність написання шляху до елемента JavaScript.
Налагодження коду на JavaScript. Йдеться про тестування та усунення помилок безпосередньо у браузері. Для цього вкладка пропонує безліч інструментів.

Спочатку розберемося, як відкрити консоль у різних браузерах.

Змініть професію за 4 місяці - короткий шлях до IT
Познайомтеся з етапами розробки та життєвим циклом ПЗ
Дізнайтесь все про техніки тест-дизайну
Розберіться з системами керування тестуванням та системами баг-трекінгу
Навчіться працювати з API та базами даних

Google Chrome

Натисніть значок із трьома точками у верхньому правому куті вікна браузера.
У меню наведіть курсор миші на «Додаткові інструменти» і виберіть «Інструменти розробника» в розширеному меню.
Після цього у правій частині екрана відкриється розділ DevTools.

Ще один спосіб – використовувати гарячі клавіші. У Chrome це Ctrl+Shift+I (або Command+option+I на Mac).

Microsoft Edge

Натисніть піктограму «Налаштування та інше» у верхньому правому куті екрана.
Потім клацніть на «Додаткові інструменти» в меню, що розкривається, і виберіть «Інструменти розробника».
Після цього у правій частині екрана відкриється розділ DevTools.

Як і в Chrome, відкрити DevTools в Edge можна гарячими клавішами Ctrl+Shift+I (або Command+option+I на Mac).

Mozilla

Виберіть меню-гамбургер у верхньому куті екрана.
Потім натисніть «Додаткові інструменти» у розкривному меню та виберіть «Інструменти веб-розробника».
Після цього в нижній частині екрана відкриється розділ DevTools.

Гарячі клавіші в Mozilla - Ctrl + Shift + I (або Command + Option + I на Mac).

Opera

Клацніть значок Opera у верхньому лівому куті вікна браузера.
Наведіть курсор миші на «Розробник» у меню та виберіть «Інструменти розробника».
Після цього у правій частині екрана відкриється розділ DevTools.

В Opera DevTools можна відкрити комбінацією клавіш Ctrl+Shift+I(або Command+option+I на Mac).

Safari

Виберіть меню Safari у верхньому лівому куті екрана.
Потім натисніть «Налаштування» та перейдіть у меню «Розробка» у верхній частині екрана.
Виберіть «Показати веб-інспектор» у розкривному меню .
Після цього відкриється нове вікно із інструментами розробника.

Гарячі клавіші для Safari - Command + option + I.

Яндекс.Браузер

Натисніть на меню-гамбургер у верхньому правому куті вікна браузера.
Потім клацніть за пунктом «Додатково» та виберіть меню «Додаткові інструменти».
Після цього переходимо до пункту "Інструменти розробника" у наступному меню.

Для запуску консолі можна натиснути Ctrl + Shift + I.

Як використовувати консоль

Зазвичай для швидкого виконання коду та оцінки результату його роботи використовуються сторонні сайти. Інший варіант – NodeJS, яка дає доступ до REPL (Read Eval Print Loop) – інтерактивного інтерпретатора коду. Вкладка Console, по суті, виконує ті ж функції і має безліч інших можливостей.

Розглянемо, як працює консоль, з прикладу Chrome DevTools. У ній можна перевіряти як прості інструкції виду 2+2, так і великі функції.

Відкриємо Chrome DevTools, перейдемо у вкладку Console і вставимо вираз 2 + 2 DevTools відразу видасть відповідь 4 . Таким чином, можна не тільки складати числа, а використовувати будь-які методи зі стандартної бібліотеки JavaScript, наприклад:

'hexlet'.toUpperCase()
// => HEXLET
[1,
2,
3,
4].map((number)
=>
number
**
2)
// => [1, 4, 9, 16]

Крім простих виразів, які не пов'язані з сайтом, можна використовувати і DOM API для доступу до елементів сторінки. Код, вказаний нижче, порахує та поверне кількість посилань на головній сторінці ru.hexlet.io. Ви також можете самостійно перейти на будь-яку сторінку і порахувати кількість посилань або будь-яких інших елементів на ній:

document.querySelectorAll('a').length
// => 73

Крім того, DevTools дозволяє створювати змінні. Поки сторінка існує, створені змінні існуватимуть і ви можете взаємодіяти з ними в майбутньому:

const linksCount
=
document.querySelectorAll('a').length
// => undefined
2
+
2
// => 4
linksCount
// => 73
linksCount
*
2
// => 146

Однорядкові висловлювання та інструкції – це досить просто. Що, якщо хочеться створити функцію, а натискання Enter відразу виконує код? Для багаторядкових виразів використовується перенесення за допомогою Shift+Enter. Ця опція дозволяє писати та використовувати гарні функції, які, як і змінні, можуть бути використані у поточній сесії:

const getElementCount
=
(tag)
=>

const
elementCount
=
document.querySelectorAll(tag).length;
return
`Знайдено
$elementCount>
елементів
$tag>`
>
getElementCount('div')
// => 'Знайдено 105 елементів div'

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

Змініть професію за 4 місяці - короткий шлях до IT
Познайомтеся з етапами розробки та життєвим циклом ПЗ
Дізнайтесь все про техніки тест-дизайну
Розберіться з системами керування тестуванням та системами баг-трекінгу
Навчіться працювати з API та базами даних

DevTools: інструменти розробника у браузері

Вперше інструменти розробника з'явилися в Google Chrome в 2008 році, але їхня історія починається ще раніше - з популярної надбудови Firebug для Firefox. Тоді веб активно розвивався, сайти ставали складнішими, і для налагодження було вже недостатньо просто дивитися вихідний код. Потрібен був зручний спосіб у реальному часі бачити HTML-структуру, CSS, помилки JavaScript і проблеми з продуктивністю. Для цих цілей і з'явилися DevTools (вони ж інструменти розробника). Сьогодні вони є практично в кожному сучасному браузері та дозволяють працювати з DOM, мережевими запитами, JavaScript та продуктивністю.

У цій статті докладно подивимося, що цікавого DevTools вміють, для яких завдань підійдуть та які приховані можливості вони мають.

Що таке DevTools у браузері

DevTools – це вбудовані у браузер засоби для налагодження та аналізу веб-сторінки. Вони допомагають розробникам аналізувати та покращувати сайти. За допомогою цих інструментів можна прямо в браузері вивчати HTML-код та CSS-стилі, дивитися, як працює JavaScript, стежити за завантаженням ресурсів, працювати з анімаціями, продуктивністю та навіть емулювати поведінку сайту на мобільних пристроях.

Хоча DevTools є у кожному браузері, інструменти можуть трохи відрізнятися за функціональністю.

Chrome, Edge, Яндекс Браузер. Всі ці браузери побудовані на движку Chromium і в них одразу є багато класного та різного. Наприклад, вони підтримують налагодження Shadow DOM, що є корисним для роботи з компонентами у веб-додатках.

Firefox та TOR. Ці браузери засновані на двигуні Gecko. У інструментах розробника те саме, що і в Chrome, але є свої фішки. Одна з них – візуалізація для сіток та flex-контейнерів.Якщо на сторінці є grid або flexbox-контейнер, браузер може накласти сітку, лінії та області кожного елемента. Це зручно, якщо складний макет і потрібно зрозуміти, як елементи взаємодіють один з одним:

А ще у Firefox є деталізовані інструменти для роботи зі шрифтами та аналізу доступності.

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

Opera. Заснований на Chromium, і інструменти розробника тут майже такі ж, як у Chrome та Edge.

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

Як відкрити браузер

Найпростіший спосіб – натиснути у браузері F12. У Safari та Яндекс Браузері DevTools треба спочатку включити у налаштуваннях.

Google Chrome, Firefox, Opera

Натисніть F12 на клавіатурі, а інструменти розробника відкриються відразу.
Для Windows та Linux натисніть Ctrl+Shift+I, а для macOS — ⌘+⌥+I.
Натисніть правою кнопкою миші на будь-який елемент сторінки та виберіть «Переглянути код» або Inspect.

Safari

У Safari інструменти розробника спочатку потрібно включити у налаштуваннях:

Відкрийте Safari та перейдіть до меню Safari → Установки → Додатки.
У рядку меню увімкніть опцію «Показати функції для веб-розробників».

Після цього DevTools можна відкривати так само, як і в інших браузерах - комбінацією ⌘ + ⌥ + I або через контекстне меню. Для зручності можна перетягнути значок DevTools на панель інструментів у браузері:

Яндекс Браузер

Тут інструменти розробника теж потрібно спочатку увімкнути перед використанням:

Натисніть кнопку з трьома горизонтальними смужками у верхньому правому куті браузера.
У меню, що випадає, виберіть пункт «Додатково».
Клацніть на «Додаткові інструменти».
Виберіть «Інструменти розробника».

Після цього DevTools також можна викликати F12.

Далі докладно розглянемо основні вкладки та інструменти у Chrome DevTools.

Основні можливості DevTools

Інструменти DevTools згруповані у вкладках, розташованих у верхній частині панелі. Тут можна перемикатися між інструментами для роботи з DOM, консоллю для введення та налагодження JavaScript, засобами для аналізу запитів мережі, продуктивності, безпеки, пам'яті і так далі. Нижня частина вікна змінюється залежно від вибраної вкладки. Її можна налаштувати під свої потреби та розділити на кілька частин, щоб відстежувати кілька типів даних одночасно.

Інтерфейс Chrome DevTools

Елементи (Elements). Вкладка для роботи з HTML та CSS. Відкривається, якщо викликати DevTools через контекстне меню. Можна переглянути структуру сторінки, редагувати HTML-код та стилі кожного елемента. А ще перевірити, як стилі різних елементів впливають один на одного. Нижня панель показує подробиці про вибраний елемент: стилі, розміри, властивості box-model, атрибути, обробники подій тощо.

Консоль (Console). Область для написання та виконання JS-коду в реальному часі. Тут будуть логи, помилки та попередження, що виникають під час роботи сторінки. Корисно для швидкого налагодження JavaScript, перевірки гіпотез та швидких дій на сторінці.

Наприклад, можна написати код і вивести в консоль браузера кількість усіх зображень на сторінці:

const images = document.querySelectorAll('img');
console.log('Total images on the page:', images.length);

Вкладка Console у Chrome

Джерела (Sources). Ця вкладка показує всі вихідні файли, які підключені до сторінки. Тут можна робити налагодження JavaScript, встановлювати точки зупинки (breakpoints), переглядати скрипти та їх виконання, а також аналізувати вихідний код програми. Якщо цікаво, як працювати з налагодженням у браузері, почитайте нашу статтю.

Мережа (Network). Містить інформацію про всі запити мережі, які виконуються під час завантаження сторінки. Тут видно кожен запит: його тип (GET, POST і так далі), статус (успішний, редирект або помилка), розмір переданих даних та час завантаження. Можна натиснути будь-який запит, щоб подивитися його заголовки, тіло відповіді, відправлені дані (payload), і побачити, наскільки ефективно завантажуються ресурси.

Коли ми робимо дію на сайті, то в Network можемо відстежувати, як сайт надсилає запити на сервер

Продуктивність (Performance). Тут зібрані інструменти продуктивності, які допомагають аналізувати швидкість роботи сторінки. Можна записувати та аналізувати виконання скриптів, анімацій, рендерингу, щоб знайти проблемні місця та покращити відгук сторінки.

Програма (Application). Ці інструменти дозволяють керувати різними ресурсами веб-додатків: куками, local storage, сесіями та даними від Service Workers. Можна переглянути всі збережені налаштування користувача або дані для входу, змінити їх або видалити, щоб перевірити, як це вплине на роботу сайту.

Захист (Security). Тут розробники перевіряють, наскільки безпечно користуватися сайтом. Вкладка показує, чи використовується на сайті безпечне з'єднання (HTTPS) і чи є SSL-сертифікат, який шифрує дані, щоб їх не могли вкрасти зловмисники.

Приклад безпечного сайту

Ми розглянули основні вкладки, але це не все, що є в інструментах розробника. Також можна додати додаткові інструменти або змінити розташування вкладок. Робиться це так:

Відкриваємо меню налаштувань (іконка з трьома точками у верхньому правому кутку панелі DevTools).
У меню вибираємо пункт «Інші інструменти» та додаємо ті, які нам потрібні.

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

Корисні функції DevTools

Тепер розберемо конкретні інструменти DevTools докладно: подивимося, як активувати інструмент і в яких випадках він стане в нагоді. Усі інструменти згруповані за сферами застосування.

Робота з HTML та CSS

Навіщо: щоб вивчати та редагувати HTML та CSS-код вибраного елемента.

Як запустити: Перейдіть на вкладку «Елементи», виберіть елемент на сторінці за допомогою іконки курсору (або натисніть Ctrl + Shift + C). У бічній панелі ви побачите HTML елемент, а в нижній — CSS. Стилі елемента можна відключати або редагувати прямо у браузері:

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

Інспектування стилів

Навіщо: швидко скопіювати CSS-селектор вибраного елемента для точкової стилізації чи налагодження.

Як запустити: клацніть правою кнопкою миші елемент і виберіть Копіювати → Копіювати selector. Скопіюваний селектор можна вставити у свій CSS-файл для точного виявлення елемента.

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

#anycomment-load-container > div.sc-AxhCb.eSwYtm.anycomment.anycomment-form > div > form > div.anycomment.anycomment-form__submit > div

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

Продуктивність та оптимізація

Навіщо: симулювати роботу сайту при поганому з'єднанні.

Як запустити: перейдіть на вкладку «Мережа», натисніть на меню, що випадає праворуч. За замовчуванням там буде вибрано "Без обмеження". Виберіть потрібний для тестування параметр і перезавантажте сторінку, щоб переглянути, як завантажуватиметься ресурси:

Коли корисно: наприклад, ви створюєте мобільну версію сайту і хочете перевірити, як все працює при слабкому з'єднанні. Вибираєте режим 3G та дивіться, які ресурси завантажуються довше. Допустимо, якщо зображення не оптимізовані, вони уповільнюватимуть весь сайт. Тоді треба подумати, як їх краще стиснути.

Аналіз продуктивності показує, скільки часу витрачається на завантаження, виконання скриптів та рендеринг.

Як запустити: відкрийте вкладку «Продуктивність», натисніть на іконку «Запис» і зробіть щось на сайті. Після завершення аналізу натисніть «Зупинити», щоб переглянути таймлайн подій, ресурси та тривалість їх виконання.

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

Рендер та малювання

Навіщо: побачити, які частини сторінки перемальовуються під час взаємодії із нею.

Як запустити: зайдіть в Установки → Інші інструменти → Малювання. На нижній панелі з'явиться нова вкладка. Відкрийте її та виберіть опцію «Індикатор заміни відображення».

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

Коли корисно: при прокручуванні сторінки ви помічаєте, що деякі елементи мерехтять. В «Отрисовці» ви бачите, що при кожному скролі перемальовуються великі частини сторінки. А це означає, що код працює неефективно. Тоді ви зменшуєте кількість непотрібних перемальовок, і сторінка починає відображатися правильно та завантажується швидше.

Інтерактивність та події

Навіщо: переглянути, які події прив'язані до елементів.

Як запустити: у вкладці «Елементи» виберіть потрібний елемент, а потім у правій панелі перейдіть на вкладку «Прослуховувачі подій», щоб побачити всі події, прив'язані до цього елемента.

Коли корисно: кнопка на сайті не реагує на натискання.Відкривши «Прослуховувачі подій», ви бачите, що до кнопки не прив'язаний жодний обробник подій, тому що взагалі забули підключити потрібний скрипт.

Реєстратор

Навіщо: записати дії користувача на сайті або у додатку для подальшого аналізу.

Як запустити: зайдіть в Установки → Інші інструменти → Реєстратор. Згори з'явиться нова вкладка. Відкрийте її, натисніть «Почати запис» та виконайте потрібні дії на сторінці.

Коли корисно: ви хочете протестувати довгий сценарій покупки в інтернет-магазині. Реєстратор записує всі дії користувача, від додавання товару до кошика до оформлення замовлення. Далі цей сценарій можна відтворити та перевірити, що після змін на сайті все працює коректно.

Експериментальні можливості Chrome DevTools

Експериментальні функції – це набір нових, ще не повністю перевірених інструментів та можливостей, які тестується Google для наступних версій DevTools. Для розробників це пісочниця, де можна спробувати нові технології для налагодження.

Щоб активувати експериментальні функції, у DevTools натисніть на іконку з шестернею:

Відкриється вікно з налаштуваннями:

Виберіть розділ «Експериментальні функції» та позначте галочками ті, які хочете протестувати. Після цього DevTools потрібно перезапустити, щоб зміни набули чинності.

Розглянемо коротко пару цікавих функцій, а з іншими ви потім поекспериментуйте самі.

Highlight a violating node or atribut in the Elements panel - підсвічує елементи на сторінці, що порушують стандарти чи правила.

Якщо на сторінці є елементи з порушеннями (наприклад, невалідні атрибути або застарілий код), вони підсвічуватимуться в DOM у вкладці «Елементи»:

На цьому прикладі підказка вказує на неправильне використання атрибуту for в елементі . Внизу у вкладці Issues перераховані помилки на сторінці: дублювання id полів форми та некоректне використання атрибутів for та autocomplete.

Enable new font editor within the styles tab - Вбудований редактор шрифтів.

Після ввімкнення опції панелі зі стилями елементів праворуч з'явиться додаткова кнопка для відкриття параметрів шрифтів.

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

Що далі

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