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

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

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

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

* Натиснути клавішу <mark style="background-color:red;">F12</mark>
* Комбінація клавіш <mark style="background-color:red;">Ctrl+Shift+I</mark> для Windows
* Комбінація клавіш <mark style="background-color:red;">Cmd+Opt+I</mark> для MacOS
* На веб-сторінці натиснути правою кнопкою миші та вибрати пункт меню «Переглянути код»

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

<figure><img src="https://3125175264-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FClHCh90EjPj6osKWLX7Y%2Fuploads%2FzG8nFHvaFIHnAuYyStXC%2FScreenshot%202023-08-22%20at%2010.27.02.png?alt=media&#x26;token=c85052b2-0782-499a-83eb-e901263e921c" alt=""><figcaption></figcaption></figure>

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

<mark style="background-color:red;">!!!!!</mark>

[<mark style="background-color:red;">https://www.youtube.com/watch?v=dl5HeIW4yQU\&list=PLenwk9TUJzJ6ep0oogRRQZHzPMtTGKqF1\&index=15</mark>](https://www.youtube.com/watch?v=dl5HeIW4yQU\&list=PLenwk9TUJzJ6ep0oogRRQZHzPMtTGKqF1\&index=15)

**Покликання:**

[Огляд всіх можливостей DevTools](https://developer.chrome.com/devtools)