Інструменти розробника

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

Інструменти розробника - вбудований функціонал браузера, і він не потребує додаткової установки.

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

  • Натиснути клавішу F12

  • Комбінація клавіш Ctrl+Shift+I для Windows

  • Комбінація клавіш Cmd+Opt+I для MacOS

  • На веб-сторінці натиснути правою кнопкою миші та вибрати пункт меню «Переглянути код»

При наведенні курсора миші на певний елемент, він буде підсвічуватися у вікні браузера (viewport).

Крім інспектування елементів, в інструментах розробника можна здійснювати зміни в HTML і CSS-коді. Такі зміни одразу будуть відображені на веб-сторінці. Проте у вихідному коді такі зміни зберігатися не будуть і скинуться після перезавантаження сторінки. Ця функція корисна для експериментів з розміткою та стилями.

!!!!!

https://www.youtube.com/watch?v=dl5HeIW4yQU&list=PLenwk9TUJzJ6ep0oogRRQZHzPMtTGKqF1&index=15

Покликання:

Огляд всіх можливостей DevTools

Last updated