Перевірка HTML у DevTools

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

Рентген-окуляри для вебу

У кожному сучасному браузері є потужний вбудований інструмент під назвою Developer Tools, або коротко DevTools.

Уяви DevTools як рентген-окуляри для інтернету. Він дозволяє зазирнути "за куліси" будь-якого сайту й побачити прихований HTML-"скелет", що тримає все разом.

Як його відкрити

Отримати доступ до цього інструмента дуже просто. Нічого додатково встановлювати не потрібно. Просто виконай ці кроки:

1. Відкрий браузер і перейди на будь-яку вебсторінку.
2. Клацни правою кнопкою на будь-якому елементі на екрані, наприклад на зображенні або текстовому блоці.
3. У меню вибери "Inspect" або "Переглянути елемент".
4. Відкриється нова панель. У верхній частині панелі переконайся, що вибрана вкладка "Elements".

Навігація деревом DOM

У вкладці Elements ти побачиш великий блок коду. Це HTML-структура сторінки, організована як ієрархія, що називається DOM (Document Object Model).

DOM можна уявити як велике складне родинне дерево. Поруч із деякими HTML-тегами ти побачиш маленькі стрілки або трикутники:

• Натисни стрілку вправо, щоб розгорнути тег і подивитися, що вкладено всередині.
• Натисни стрілку вниз, щоб сховати або згорнути ці вкладені теги.

Таке складне дерево допомагає досліджувати великі обсяги коду без перевантаження.

Суперсила (редагування в реальному часі)

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

• Знайди текст або HTML-тег у панелі Elements.
• Зроби подвійний клік по ньому, щоб виділити.
• Введи новий текст.
• Натисни Enter на клавіатурі.

Сторінка миттєво оновиться з твоїми змінами!

Практична вправа

Перевірмо твою нову суперсилу на швидкій веселій місії.

1. Відкрий справжній сайт, який зараз працює, наприклад популярний новинний сайт або readlax.com.
2. Знайди головний заголовок сторінки (зазвичай це тег <h1>).
3. Клацни по заголовку правою кнопкою та вибери "Inspect".
4. У панелі Elements зроби подвійний клік по тексту заголовка.
5. Видали текст, введи своє ім'я та натисни Enter.

Вітаємо! Тепер ти зірка головної сторінки.

Важливе уточнення

Коли ти бачиш своє ім'я на відомому сайті, може з'явитися думка: "Секундочку, я щойно зламав сайт?"

Відповідь однозначна: ні.

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

Щойно ти натиснеш "Оновити", усі зміни зникнуть. Справжній сайт знову завантажиться із сервера таким, яким був раніше. Тож не бійся експериментувати — ти нічого не зламаєш назавжди.

Підсумок

• DevTools — це вбудований інструмент браузера, який дозволяє переглядати код сайту.
• Відкрити його можна в будь-який момент через правий клік і "Inspect".
• DOM має структуру складного дерева, де можна згортати та розгортати вкладені HTML-теги.
• У панелі Elements можна робити подвійний клік по тегах або тексту та редагувати їх у реальному часі.
• Твої зміни безпечні й тимчасові. Після оновлення сторінки все повертається до оригіналу.