У цьому посібнику ви навчитеся, як редагувати структуру HTML веб-сторінки за допомогою інструментів розробника Chrome (DevTools). Ці корисні інструменти дозволяють вам спостерігати зміни в структурі та відображенні вашої веб-сторінки в реальному часі. DevTools надають багато функцій для полегшення розробки та налагодження веб-сторінок. У цьому посібнику ми зосередимося на редагуванні HTML та DOM (Document Object Model).
Найважливіші відомості
- Інструменти розробника Chrome дозволяють широкий спектр маніпуляцій з HTML та DOM.
- Ви можете дублювати HTML-елементи, змінювати їх текст, додавати або видаляти атрибути, навіть змінювати стиль елемента.
- Ці зміни не є постійними і допомагають під час тестування та налагодження веб-сторінок.
Покрокова інструкція
Спочатку вам потрібно переконатися, що ви відкрили інструменти розробника Chrome. Це можна зробити, натиснувши праву кнопку миші на веб-сторінці і вибравши "Дослідити" або використовуючи комбінацію клавіш Ctrl + Shift + I (Windows) або Cmd + Option + I (Mac).
Дублювання елементів
Щоб дублювати елемент, клацніть правою кнопкою миші на потрібному елементі в вкладці Elements DevTools і виберіть опцію "Дублювати елемент". Це скопіює весь елемент, включаючи всі стилі.
Редагування HTML
Ви також можете безпосередньо редагувати HTML-вміст елемента. Клацніть правою кнопкою миші на елементі та виберіть "Редагувати як HTML". Відкриється поле введення, де ви можете редагувати HTML-код.
Тут ви можете навіть додавати багаторядковий вміст, використовуючи теги
, щоб створювати розриви рядків.
Щоб зберегти зміни, просто натисніть клавішу Enter або клацніть за межами поля введення.
Додавання та зміна атрибутів
Щоб додати або змінити атрибут, просто клацніть на елементі. Подвійно клацніть на потрібному атрибуті, наприклад, disabled, і змініть його безпосередньо.
Щоб додати новий атрибут, клацніть правою кнопкою миші на елементі і виберіть опцію "Редагувати атрибут". Введіть нову назву та значення атрибуту та підтвердіть клавішею Enter.
Видалення елементів
Якщо вам більше не потрібен елемент, ви можете просто його видалити. Клацніть правою кнопкою миші на елементі та виберіть "Видалити". Елемент буде відразу видалено з DOM.
Примусове застосування стилю
Чудова функція DevTools - можливість примусового застосування стану Hover елемента. Клацніть правою кнопкою миші на елементі та виберіть "Примусовий стан" > "Hover". Цим способом ви побачите ефект Hover і зможете побачити наслідки CSS-стилів.
Керування видимістю
Іноді ви хочете зробити елементи невидимими, не видаляючи їх повністю. Для цього можна керувати видимістю елемента. Клацніть правою кнопкою миші на елементі, виберіть "Приховати елемент", та елемент стане невидимим, але залишиться в DOM.
Тіло та загальна структура
Ти також можеш отримати доступ до елемента тіла і вносити зміни на всій сторінці. Для редагування вмісту тега тіла просто вибери елемент і застосуй техніки, описані вище.
Застосування змін
Важливо зауважити, що всі зміни, які ти робиш через засоби розробника, тимчасові. Після перезавантаження сторінки всі налаштування будуть втрачені. Тому рекомендується скопіювати відредагований код і зберегти його в своєму проєкті, якщо ти хочеш зберегти зміни.
Підсумок
У цьому навчальному посібнику ти дізнався, як використовувати засоби розробника Chrome для редагування HTML та DOM. Ти можеш дублювати елементи, модифікувати HTML, додавати, видаляти атрибути та керувати видимістю елементів. Ці функції особливо корисні для відладки та розвитку веб-сторінок.
