Разширено променяне на HTML и DOM в Chrome Developer Tools

В този урок ще научите как да редактирате структурата на HTML уебсайт чрез използването на инструментите за разработка на Chrome (DevTools). Тези удобни инструменти ви позволяват да наблюдавате промените в структурата и изгледа на вашата уеб страница в реално време. DevTools предлагат много функционалности, които улесняват разработката и дебъгването на уебсайтове. В този урок ще се фокусираме специално върху редактирането на HTML и DOM (Document Object Model).

Основни наблюдения

• Инструментите за разработка на Chrome позволяват обширни манипулации на HTML и DOM.
• Можете да дублирате HTML елементи, да променяте техния текст, да добавяте или премахвате атрибути и дори да променяте стила на един елемент.
• Тези промени не са постоянни и помагат за тестването и дебъгването на уебсайтове.

По стъпково ръководство

Първо трябва да се уверите, че сте отворили инструментите за разработка на Chrome. Това може да стане като щракнете с десния бутон върху уебсайта и изберете „Инспектиране“ или използвате комбинацията от клавиши Ctrl + Shift + I (Windows) или Cmd + Option + I (Mac).

Дублиране на елементи

За да дублирате елемент, щракнете с десния бутон върху желания елемент в раздела „Елементи“ на DevTools и изберете опцията „Дублиране на елемент“. Това копира целия елемент, включително всички стилове.

Редактиране на HTML

Можете също така да редактирате HTML съдържанието на един елемент директно. Щракнете с десния бутон върху елемента и изберете „Редактиране като HTML“. Отваря се поле за въвеждане, в което можете да редактирате HTML кода.

Тук можете дори да добавите многоредово съдържание, като използвате таговете br, за да създадете промени в редовете.

За да запазите промените, просто натиснете клавиш Enter или щракнете извън полето за въвеждане.

Добавяне и промяна на атрибути

За да добавите или промените атрибут, може просто да кликнете върху елемента. Два пъти щракнете върху желания атрибут, например disabled, и го променете директно.

За добавяне на нов атрибут, щракнете с десния бутон върху елемента и изберете опцията „Редактиране на атрибут“. Въведете новото име и стойност на атрибута и потвърдете с клавиш Enter.

Изтриване на елементи

Ако не се нуждаете повече от даден елемент, можете просто да го изтриете. Щракнете с десния бутон върху елемента и изберете „Изтриване“. Елементът незабавно се премахва от DOM структурата.

Принудително стилово състояние

Една страхотна функция на DevTools е възможността да принудите елемент да показва състоянието "Hover". Щракнете с десния бутон върху елемента и изберете „Force state“ > „hover“. Това показва Hover ефекта, така че можете да видите ефектите на CSS стиловете.

Контрол на видимостта

Понякога искате да направите елементите невидими, без да ги изтривате напълно. За тази цел можете да контролирате видимостта на един елемент. Щракнете с десния бутон върху елемента, изберете „Скриване на елемент“ и елементът няма да се вижда, но ще остане в DOM структурата.

Тялото и цялата структура

Можеш също да достъпиш елемента тяло (Body) и да направиш промени по цялата страница. За да редактираш съдържанието на тага Body, просто трябва да избереш елемента и да приложиш техниките, описани по-горе.

Прилагане на промени

Важно е да се отбележи, че всички промени, които направиш чрез инструментите за разработчици, са временни. Когато презаредиш страницата, всички настройки ще бъдат загубени. Затова е препоръчително да копираш редактирания код и да го запазиш в своя проект, ако искаш да запазиш промените.

Обобщение

В този урок научи как да използваш инструментите за разработчици на Chrome, за редактиране на HTML и DOM. Можеш да дублираш елементи, да редактираш HTML, да добавяш, премахваш атрибути и да контролираш видимостта на елементите. Тези функции са особено полезни за дебъгване и развитие на уебсайтове.