Hoe Google Chrome te gebruiken om CSS te debuggen

De tool Inspect Element is geweldig als het gaat om het in realtime opsporen van fouten in uw webpagina's. U kunt deze tool gebruiken om een ​​voorbeeld te bekijken en het ontwerp van een website te wijzigen. U kunt dit ook doen zonder de pagina opnieuw te hoeven laden, waardoor uw CSS-wijzigingen onmiddellijk worden weergegeven.

In dit artikel wordt beschreven hoe u CSS-klassen en hun toegepaste stijlen kunt bekijken in het venster Element inspecteren. Er wordt ook beschreven hoe u dit kunt gebruiken om in realtime een voorbeeld te bekijken van wijzigingen die u in uw CSS aanbrengt.

Inspectie-element openen in Google Chrome

U kunt elke website bezoeken en het venster Inspect Element openen om te zien hoe de HTML- of CSS-code eruitziet. Deze tutorial zal gebruik maken van een voorbeeldwebsite laten zien.

U kunt het Inspect Element-venster in Google Chrome openen door op de F12 sleutel. U kunt ook met de rechtermuisknop ergens op de pagina klikken en op Inspecteren.

Het Inspect Element-venster wordt geopend met de HTML-code voor het deel van de website waar u met de rechtermuisknop hebt geklikt. Hier kun je ook

websitetekst bewerken met Google Chrome.

Het tabblad Stijlen in het venster Element inspecteren

In het Inspect Element-venster zelf, onder de elementen tabblad, is er een plek om zowel de HTML- als de CSS-code te bekijken. U kunt de HTML-code zien aan de linkerkant van het Inspect Element-venster. U vindt de CSS-code aan de rechterkant, onder de stijlen tabblad.

Laten we zeggen dat je een HTML-element had met een klasse genaamd "card-padding", met opvulling rechts en links:

.card-padding {
 opvulling-rechts: 0vh;
 opvulling-links: 0vh;
}

Als u een voorbeeld van deze website in de browser heeft bekeken, kunt u de div element met de klasse "card-padding". Elke stijl die wordt toegepast op de klasse "card-padding" wordt aan de rechterkant weergegeven, onder de stijlen tabblad.

Wanneer u de muisaanwijzer op een element in de HTML-codeweergave plaatst, wordt dat deel van de webpagina gemarkeerd in de webbrowser. Het HTML-elementtype, samen met eventuele klassenamen, wordt ook weergegeven in een dialoogvenster naast het element.

In dit geval ziet u de div-container met de klassenamen "row", "card-padding" en "pb-5" gemarkeerd op de pagina.

Wijzigingen in de CSS in realtime aanbrengen

U kunt de CSS rechtstreeks wijzigen vanaf het tabblad Stijlen:

1. Gebruik makend van deze website, klik met de rechtermuisknop op de eerste kop.
2. Op die specifieke h4-kop ziet u een klasse die erop is toegepast met de naam "text-grey" met een kleur van #8a8a8a.
3. Verander in plaats daarvan de kleur in iets anders, zoals oranje. U wilt alleen de waarde zelf wijzigen, en niet de naam van de eigenschap, "kleur".
4. Je ziet de kop veranderen van donkergrijs naar oranje.
5. Als u een bepaalde CSS-stijl wilt uitschakelen, schakelt u het selectievakje links van de stijl uit.
6. U kunt ook meer stijlen aan de originele set toevoegen. Klik net onder of rechts van een woning om een ​​nieuwe toe te voegen. U moet dezelfde syntaxis gebruiken als in een gewoon CSS-bestand bij het toevoegen van nieuwe stijlen.
7. Als u een voorbeeld van een lokale website bekijkt, kunt u doorgaan met het aanbrengen van CSS-wijzigingen totdat u dichter bij het vereiste uiterlijk voor uw gebruikersinterface komt. Daarna kunt u de door u aangebrachte CSS-wijzigingen terug kopiëren naar uw lokale code.

CSS wijzigen vanuit bibliotheken of frameworks van derden

U kunt ook wijzigingen aanbrengen in HTML-elementen als u bibliotheken of frameworks van derden gebruikt, zoals Bootstrap.

1. Gebruik makend van deze website, klik met de rechtermuisknop op een van de Bootstrap-knoppen op de pagina.
2. U ziet twee klassen toegepast op de knop, "btn" en "btn-primary". Bootstrap heeft al zijn eigen styling toegepast op beide klassen. De kleuren die worden gebruikt als achtergrond- en randkleuren zijn #007bff. Verander dit in iets anders, zoals Violet.
3. Als u een voorbeeld van een lokale website bekijkt, kunt u uw nieuwe wijzigingen vervolgens weer toevoegen aan uw lokale code. Afhankelijk van de volgorde van uw CSS, moet u mogelijk: gebruik een meer specifieke CSS-selector. Zet de selector bijvoorbeeld vooraf met ".btn". Hiermee wordt de originele Bootstrap-styling overschreven.

   .btn.btn-primair {
    achtergrondkleur: violet;
    randkleur: violet;
   }

Wat betekent element.style op het tabblad Stijlen?

Elk HTML-element dat u markeert in het venster Element inspecteren heeft een blok element.styles. Dit is het equivalent van het toevoegen van inline-styling aan het HTML-element, in plaats van het te targeten met een selector.

1. Klik met de rechtermuisknop op een HTML-element. Voeg een stijl toe aan de sectie element.style, zoals:

   kleur: witte rook;

2. U zult zien dat de code voor het HTML-element ook is gewijzigd. De code binnen het HTML-element heeft nu de nieuwe regel:

   stijl="kleur: witte rook;"

Hoe onderliggende HTML-elementen styling overerven

Als u twee verschillende stijlwaarden hebt toegepast op een bovenliggend element en een onderliggend element, heeft de waarde in het onderliggende element voorrang.

1. Gebruik makend van deze website, klik met de rechtermuisknop ergens aan de buitenranden van de website.
2. In de HTML-sectie van het Inspect Element-venster, focus je op twee specifieke HTML-elementen. Er is een bovenliggend div-element waarop een "content" -klasse is toegepast. Dit HTML-element heeft een h4 onderliggend element, waarop een "text-grey" klasse is toegepast.
3. Selecteer het onderliggende h4 HTML-element en schakel de kleurstyling in de klasse "text-grey" uit.
4. Selecteer het bovenliggende HTML-element met de klasse "content". Voeg de volgende CSS-stijl toe aan de klasse:

   kleur rood;

   Alle tekst in de bovenliggende div wordt rood. Deze wijziging zal ook worden doorgevoerd in de onderliggende elementen, wat betekent dat de h4 ook een rode kleur zal hebben.
5. Selecteer het onderliggende h4 HTML-element en voeg een nieuwe stijl toe aan de klasse "text-grey":

   kleur groen;

   Hiermee wordt de stijl van alle ouderklassen overschreven. Het h4 HTML-element verandert van rood in groen.
6. U ziet ook een doorhaling als u de stijl voor de klasse "inhoud" bekijkt. Dit bevestigt dat het h4 onderliggende element de kleur van de ouder overschrijft.

De voordelen van het debuggen van uw CSS in de browser

Het debuggen van CSS in uw browser kan veel tijd besparen en uw codeerworkflow versnellen. Dit is met name het geval als u in realtime wilt zien hoe uw nieuwe CSS-wijzigingen de gebruikersinterface van uw website beïnvloeden.

U kunt deze techniek gebruiken in plaats van wijzigingen aan te brengen in uw lokale code en uw app opnieuw te laden. Hierdoor hoeft u niet te raden welke CSS-waarden zouden werken, omdat u nu uw UI-wijzigingen kunt bekijken terwijl u ze aanbrengt.

U kunt wijzigingen aanbrengen in het venster Element inspecteren totdat u het gewenste ontwerp nadert. Zodra u dit hebt gedaan, kunt u de code kopiëren vanuit het venster Element inspecteren, terug naar uw lokale code. U kunt uw app nog steeds opnieuw uitvoeren om te testen of uw nieuwe CSS-wijzigingen nog steeds werken.

Deze tutorial behandelde de basisprincipes van het debuggen van de CSS van een website met behulp van het Inspect Element-venster, inclusief waar de CSS te vinden is op het tabblad Stijlen.

Het behandelde ook hoe u wijzigingen aanbrengt in de CSS en de visuele wijzigingen in de gebruikersinterface in realtime kunt bekijken. Hopelijk begrijp je ook hoe je wijzigingen aanbrengt wanneer de CSS een bibliotheek van derden gebruikt, en hoe styling-overerving werkt.

Er zijn nog veel meer interessante dingen die u kunt doen met het venster Element inspecteren.

7 speelse dingen die je kunt doen met Inspect Element

Lees volgende

Over de auteur