Как да използвате Google Chrome за отстраняване на грешки в CSS

Инструментът Inspect Element е страхотен, когато става въпрос за отстраняване на грешки в уеб страниците ви в реално време. Можете да използвате този инструмент, за да ви помогне да прегледате и промените дизайна на уебсайт. Освен това ви позволява да направите това, без да е необходимо да презареждате страницата, показвайки незабавно вашите CSS промени.

Тази статия ще разгледа как да преглеждате CSS класове и техните приложени стилове в прозореца Inspect Element. Той също така ще обхване как можете да използвате това, за да прегледате промените, които правите във вашия CSS, в реално време.

Отваряне на Inspect Element в Google Chrome

Можете да посетите всеки уебсайт и да отворите прозореца за проверка на елемента, за да видите как изглежда неговият HTML или CSS код. Този урок ще използва примерен уебсайт демонстрирам.

Можете да отворите прозореца Inspect Element в Google Chrome, като натиснете F12 ключ. Можете също така да щракнете с десния бутон навсякъде на страницата и да кликнете върху Инспектирайте.

Прозорецът Inspect Element ще се отвори за HTML кода за частта от уебсайта, където сте щракнали с десния бутон. Тук също можете редактирайте текста на уебсайта с помощта на Google Chrome.

Разделът Стилове в прозореца за проверка на елемента

В самия прозорец Проверка на елемента под Елементи раздел, има място за преглед на HTML и CSS кода. Можете да видите HTML кода отляво на прозореца за проверка на елемента. Можете да намерите CSS кода вдясно, под Стилове раздел.

Да приемем, че имате HTML елемент с клас, наречен "card-padding", с десен и ляв допълване, приложени към него:

.card-padding {
 padding-right: 0vh;
 padding-left: 0vh;
}

Ако сте прегледали този уебсайт в браузъра, ще можете да изберете раздел елемент с класа "card-padding". Всеки стил, приложен към класа "card-padding", ще се покаже отдясно, под Стилове раздел.

Когато задържите курсора на мишката върху елемент в изгледа на HTML код, тази част от уеб страницата ще се маркира в уеб браузъра. Типът HTML елемент, заедно с всички имена на класове, също ще се покажат в диалогов прозорец до елемента.

В този случай ще видите div контейнера с имената на класовете "row", "card-padding" и "pb-5", подчертани на страницата.

Как да направите промени в CSS в реално време

Можете да промените CSS директно от раздела Стилове:

1. Използвайки този уебсайт, щракнете с десния бутон върху първото заглавие.
2. В това конкретно заглавие h4 ще видите клас, приложен към него, наречен "text-grey" с цвят #8a8a8a.
3. Вместо това променете цвета на нещо друго, като оранжево. Искате само да промените самата стойност, а не името на свойството, "цвят".
4. Ще видите как заглавието се променя от тъмно сиво в оранжево.
5. Ако искате да деактивирате определен CSS стил, премахнете отметката от квадратчето вляво от стила.
6. Можете също да добавите повече стилове към оригиналния комплект. Щракнете точно под или вдясно от свойство, за да започнете да добавяте нов. Трябва да използвате същия синтаксис, както в обикновен CSS файл, когато добавяте нови стилове.
7. Ако преглеждате локален уебсайт, можете да продължите да правите промени в CSS, докато не се доближите до необходимия външен вид и усещане за вашия потребителски интерфейс. След това можете да копирате CSS промените, които сте направили обратно във вашия локален код.

Как да модифицирате CSS от библиотеки или рамки на трети страни

Можете също да правите промени в HTML елементите, ако използвате библиотеки или рамки на трети страни като Bootstrap.

1. Използвайки този уебсайт, щракнете с десния бутон върху един от бутоните Bootstrap на страницата.
2. Ще видите два класа, приложени към бутона, "btn" и "btn-primary". Bootstrap вече има свой собствен стил, приложен към двата класа. Цветовете, които се използват като цветове на фона и границата, са #007bff. Променете това с нещо друго, като например Violet.
3. Ако преглеждате локален уебсайт, тогава можете да добавите новите си промени обратно в местния си код. В зависимост от реда на вашия CSS може да се наложи използвайте по-специфичен CSS селектор. Например, добавете префикс към селектора с ".btn". Това ще отмени оригиналния стил на Bootstrap.

   .btn.btn-първично {
    цвят на фона: виолетов;
    цвят на границата: виолетов;
   }

Какво означава element.style в раздела Стилове?

Всеки HTML елемент, който маркирате в прозореца Inspect Element, има блок element.styles. Това е еквивалентно на добавяне на вграден стил към HTML елемента, вместо да го насочвате с помощта на селектор.

1. Щракнете с десния бутон върху HTML елемент. Добавете всеки стил към секцията element.style, като например:

   цвят: бял дим;

2. Ще видите, че кодът за HTML елемента също е променен. Кодът в HTML елемента вече има новия ред:

   стил="цвят: бял дим;"

Как дъщерните HTML елементи наследяват стила

Ако имате две различни стойности за стил, приложени към родителски елемент и дъщерен елемент, стойността в дъщерния елемент ще има предимство.

1. Използвайки този уебсайт, щракнете с десния бутон навсякъде по външните ръбове на уебсайта.
2. В секцията HTML на прозореца за проверка на елемента се фокусирайте върху два конкретни HTML елемента. Има родителски елемент div с клас "съдържание", приложен към него. Този HTML елемент има дъщерен елемент h4, с приложен клас "text-grey" към него.
3. Изберете дъщерния h4 HTML елемент и деактивирайте стила на цветовете в класа "текст-сив".
4. Изберете родителския HTML елемент с клас "content". Добавете следния CSS стил към класа:

   цвят: червен;

   Целият текст в родителския div ще стане червен. Тази промяна също ще премине към дъщерните елементи, което означава, че h4 също ще има червен цвят.
5. Изберете дъщерния h4 HTML елемент и добавете нов стил към класа "text-grey":

   цвят: зелен;

   Това ще отмени стила на всички родителски класове. HTML елементът h4 ще се превърне от червено в зелено.
6. Ще видите и зачеркване, ако прегледате стила на класа "съдържание". Това потвърждава, че дъщерният елемент h4 отменя цвета на родителя.

Предимствата на отстраняването на грешки във вашия CSS в браузъра

Отстраняването на грешки в CSS във вашия браузър може да спести много време и да ускори работния ви процес на кодиране. Това е особено вярно, ако трябва да видите как вашите нови CSS промени влияят на потребителския интерфейс на вашия уебсайт в реално време.

Можете да използвате тази техника, вместо да правите промени в локалния си код и да презареждате приложението си. Това ще ви спести от гадаене какви CSS стойности ще работят, тъй като вече можете да преглеждате промените в потребителския си интерфейс, докато ги правите.

Можете да правите промени в прозореца Inspect Element, докато се приближите до желания дизайн. След като го направите, можете да копирате кода от прозореца за проверка на елемента обратно във вашия локален код. Все още можете да стартирате отново приложението си, за да проверите дали новите ви CSS промени все още работят.

Този урок обхваща основите на това как да отстраните грешки в CSS на уебсайт с помощта на прозореца за проверка на елемента, включително къде да намерите CSS в раздела Стилове.

Той също така обхваща как да правите промени в CSS и да преглеждате визуалните промени в потребителския интерфейс в реално време. Надяваме се, че разбирате и как да правите промени, когато CSS използва библиотека на трета страна и как работи наследяването на стилове.

Има много други интересни неща, които можете да правите с прозореца Inspect Element.

7 игриви неща, които можете да правите с елемента Inspect

Прочетете Следващото

За автора