Jak używać Google Chrome do debugowania CSS

Narzędzie Inspect Element jest świetne, jeśli chodzi o debugowanie stron internetowych w czasie rzeczywistym. Możesz użyć tego narzędzia do podglądu i zmiany projektu strony internetowej. Pozwala to również zrobić to bez konieczności ponownego ładowania strony, natychmiast wyświetlając zmiany CSS.

W tym artykule dowiesz się, jak wyświetlić klasy CSS i ich zastosowane style w oknie Sprawdź element. Obejmuje również, w jaki sposób możesz użyć tego do podglądu zmian wprowadzanych w CSS w czasie rzeczywistym.

Otwieranie elementu inspekcji w Google Chrome

Możesz odwiedzić dowolną witrynę i otworzyć okno Sprawdź element, aby zobaczyć, jak wygląda jej kod HTML lub CSS. Ten samouczek użyje przykładowa strona internetowa do zademonstrowania.

Możesz otworzyć okno Sprawdź element w Google Chrome, naciskając F12 klucz. Możesz także kliknąć prawym przyciskiem myszy w dowolnym miejscu na stronie i kliknąć Sprawdzać.

Okno Sprawdź element otworzy się z kodem HTML dla części witryny, w której kliknięto prawym przyciskiem myszy. Tutaj też możesz edytuj tekst witryny za pomocą Google Chrome.

Karta Style w oknie Sprawdź element

W samym oknie Sprawdź element, pod Elementy w zakładce znajduje się miejsce do przeglądania zarówno kodu HTML, jak i CSS. Możesz zobaczyć kod HTML po lewej stronie okna Sprawdź element. Kod CSS znajdziesz po prawej stronie, pod Style patka.

Załóżmy, że masz element HTML z klasą o nazwie „card-padding” z zastosowanym dopełnieniem prawym i lewym:

.dopełnienie karty {
 dopełnienie-prawo: 0vh;
 dopełnienie lewe: 0vh;
}

Jeśli przeglądałeś tę stronę w przeglądarce, możesz wybrać div element z klasą „card-padding”. Wszelkie style zastosowane do klasy „card-padding” będą wyświetlane po prawej stronie, pod Style patka.

Gdy najedziesz kursorem na element w widoku kodu HTML, ta część strony zostanie podświetlona w przeglądarce internetowej. Typ elementu HTML wraz z nazwami klas będzie również wyświetlany w oknie dialogowym obok elementu.

W takim przypadku zobaczysz kontener div z podświetlonymi nazwami klas „row”, „card-padding” i „pb-5”.

Jak wprowadzać zmiany w CSS w czasie rzeczywistym

Możesz zmienić CSS bezpośrednio z zakładki Style:

1. Za pomocą ta strona internetowa, kliknij prawym przyciskiem myszy pierwszy nagłówek.
2. W tym konkretnym nagłówku h4 zobaczysz zastosowaną do niego klasę o nazwie "text-grey" z kolorem #8a8a8a.
3. Zmień kolor na inny, na przykład pomarańczowy. Chcesz zmienić tylko samą wartość, a nie nazwę właściwości „kolor”.
4. Zobaczysz, że kurs zmieni się z ciemnoszarego na pomarańczowy.
5. Jeśli chcesz wyłączyć określony styl CSS, odznacz pole po lewej stronie stylu.
6. Możesz także dodać więcej stylów do oryginalnego zestawu. Kliknij tuż poniżej lub po prawej stronie właściwości, aby rozpocząć dodawanie nowej. Podczas dodawania nowych stylów należy używać tej samej składni, co w zwykłym pliku CSS.
7. Jeśli przeglądasz lokalną witrynę internetową, możesz kontynuować wprowadzanie zmian CSS, aż zbliżysz się do wymaganego wyglądu i stylu interfejsu użytkownika. Następnie możesz skopiować wprowadzone zmiany CSS z powrotem do kodu lokalnego.

Jak modyfikować CSS z zewnętrznych bibliotek lub frameworków

Możesz także wprowadzać zmiany w elementach HTML, jeśli korzystasz z bibliotek lub struktur innych firm, takich jak Bootstrap.

1. Za pomocą ta strona internetowa, kliknij prawym przyciskiem myszy jeden z przycisków Bootstrap na stronie.
2. Zobaczysz dwie klasy zastosowane do przycisku, "btn" i "btn-primary". Bootstrap ma już własną stylizację zastosowaną do obu tych klas. Kolory używane jako kolory tła i obramowania to #007bff. Zmień to na coś innego, na przykład Violet.
3. Jeśli przeglądasz lokalną witrynę internetową, możesz następnie dodać nowe zmiany z powrotem do lokalnego kodu. W zależności od kolejności CSS może być konieczne: użyj bardziej szczegółowego selektora CSS. Na przykład poprzedź selektor przedrostkiem „.btn”. Zastąpi to oryginalną stylizację Bootstrap.

   .btn.btn-podstawowy {
    kolor tła: fioletowy;
    kolor obramowania: fioletowy;
   }

Co oznacza element.style w zakładce Style?

Każdy element HTML podświetlony w oknie Sprawdź element ma blok element.styles. Jest to równoważne dodaniu wbudowanego stylu do elementu HTML, zamiast kierowania go za pomocą selektora.

1. Kliknij prawym przyciskiem myszy element HTML. Dodaj dowolny styl do sekcji element.style, na przykład:

   kolor: biały dym;

2. Zobaczysz, że zmienił się również kod elementu HTML. Kod w elemencie HTML ma teraz nową linię:

   styl="kolor: biały dym;"

Jak podrzędne elementy HTML dziedziczą styl?

Jeśli masz dwie różne wartości stylów zastosowane do elementu nadrzędnego i elementu podrzędnego, pierwszeństwo ma wartość w elemencie podrzędnym.

1. Za pomocą ta strona internetowa, kliknij prawym przyciskiem myszy w dowolnym miejscu zewnętrznej krawędzi witryny.
2. W sekcji HTML okna Sprawdź element skoncentruj się na dwóch konkretnych elementach HTML. Istnieje nadrzędny element div z zastosowaną do niego klasą „content”. Ten element HTML ma element potomny h4 z zaaplikowaną do niego klasą „text-grey”.
3. Wybierz potomny element HTML h4 i wyłącz stylizację kolorów w klasie "text-grey".
4. Wybierz nadrzędny element HTML z klasą „content”. Dodaj następujący styl CSS do klasy:

   kolor czerwony;

   Cały tekst w nadrzędnym div zmieni kolor na czerwony. Ta zmiana będzie również przechodzić kaskadowo na elementy potomne, co oznacza, że ​​h4 również będzie miał czerwony kolor.
5. Wybierz potomny element HTML h4 i dodaj nowy styl do klasy „text-grey”:

   Zielony kolor;

   Zastąpi to stylizację wszelkich klas nadrzędnych. Element HTML h4 zmieni kolor z czerwonego na zielony.
6. Zobaczysz również przekreślenie, jeśli przejrzysz stylizację dla klasy „treść”. Potwierdza to, że element potomny h4 zastępuje kolor rodzica.

Korzyści z debugowania CSS w przeglądarce

Debugowanie CSS w przeglądarce może zaoszczędzić dużo czasu i przyspieszyć proces kodowania. Jest to szczególnie ważne, jeśli chcesz zobaczyć, jak nowe zmiany CSS wpływają na interfejs użytkownika w Twojej witrynie w czasie rzeczywistym.

Możesz użyć tej techniki zamiast wprowadzać zmiany w lokalnym kodzie i ponownie ładować aplikację. Pozwoli ci to uniknąć zgadywania, jakie wartości CSS będą działać, ponieważ możesz teraz wyświetlać zmiany w interfejsie użytkownika podczas ich wprowadzania.

Możesz wprowadzać zmiany w oknie Sprawdź element, aż zbliżysz się do pożądanego projektu. Gdy już to zrobisz, możesz skopiować kod z okna Sprawdź element z powrotem do kodu lokalnego. Nadal możesz ponownie uruchomić aplikację, aby sprawdzić, czy nowe zmiany CSS nadal działają.

W tym samouczku omówiono podstawy debugowania kodu CSS witryny za pomocą okna Sprawdź element, w tym informacje o tym, gdzie znaleźć kod CSS na karcie Style.

Omówiono również, jak wprowadzać zmiany w CSS i wyświetlać wizualne zmiany w interfejsie użytkownika w czasie rzeczywistym. Mamy nadzieję, że rozumiesz również, jak wprowadzać zmiany, gdy CSS korzysta z biblioteki innej firmy i jak działa dziedziczenie stylów.

Jest wiele innych interesujących rzeczy, które możesz zrobić w oknie Sprawdź element.

7 zabawnych rzeczy, które możesz zrobić dzięki inspekcji elementu

Czytaj dalej

O autorze