Sådan bruger du Google Chrome til at fejlfinde CSS

Inspect Element-værktøjet er fantastisk, når det kommer til fejlretning af dine websider i realtid. Du kan bruge dette værktøj til at hjælpe med at få vist og ændre designet af et websted. Det giver dig også mulighed for at gøre det uden at skulle genindlæse siden, og viser dine CSS-ændringer med det samme.

Denne artikel vil gennemgå, hvordan du får vist CSS-klasser og deres anvendte stilarter i vinduet Inspect Element. Det vil også dække, hvordan du kan bruge dette til at forhåndsvise ændringer, du foretager til din CSS, i realtid.

Åbning af Inspect Element i Google Chrome

Du kan besøge et hvilket som helst websted og åbne vinduet Inspect Element for at se, hvordan dets HTML- eller CSS-kode ser ud. Denne tutorial vil bruge et eksempel på en hjemmeside at demonstrere.

Du kan åbne vinduet Inspect Element i Google Chrome ved at trykke på F12 nøgle. Du kan også højreklikke hvor som helst på siden og klikke videre Inspicere.

Vinduet Inspect Element åbnes for HTML-koden for den del af webstedet, hvor du højreklikkede. Det er her du også kan rediger hjemmesidetekst ved hjælp af Google Chrome.

Fanen Typografier i vinduet Inspect Element

I selve vinduet Inspect Element, under Elementer fanen, er der et sted at se både HTML- og CSS-koden. Du kan se HTML-koden til venstre i vinduet Inspect Element. Du kan finde CSS-koden til højre under Stilarter fanen.

Lad os sige, at du havde et HTML-element med en klasse kaldet "card-padding", med højre og venstre polstring anvendt på det:

.kort-polstring {
 polstring-højre: 0vh;
 polstring-venstre: 0vh;
}

Hvis du forhåndsviste denne hjemmeside i browseren, ville du være i stand til at vælge div element med klassen "card-padding". Enhver styling anvendt på "card-padding"-klassen vil blive vist til højre under Stilarter fanen.

Når du holder markøren over et element i HTML-kodevisningen, fremhæves den del af websiden i webbrowseren. HTML-elementtypen vil sammen med eventuelle klassenavne også blive vist i en dialogboks ved siden af ​​elementet.

I dette tilfælde vil du se div-beholderen med klassenavnene "row", "card-padding" og "pb-5" fremhævet på siden.

Sådan laver du ændringer til CSS i realtid

Du kan ændre CSS direkte fra fanen Styles:

1. Ved brug af denne hjemmeside, højreklik på den første overskrift.
2. På den pågældende h4-overskrift vil du se en klasse anvendt på den kaldet "text-grey" med farven #8a8a8a.
3. Skift farven til noget andet i stedet, såsom orange. Du ønsker kun at ændre selve værdien, og ikke navnet på ejendommen, "farve".
4. Du vil se overskriften skifte fra mørkegrå til orange.
5. Hvis du vil deaktivere en bestemt CSS-stil, skal du fjerne markeringen i feltet til venstre for stylingen.
6. Du kan også tilføje flere stilarter til det originale sæt. Klik lige under eller til højre for en ejendom for at begynde at tilføje en ny. Du bør bruge den samme syntaks, som du ville gøre i en almindelig CSS-fil, når du tilføjer nye typografier.
7. Hvis du forhåndsviser et lokalt websted, kan du fortsætte med at foretage CSS-ændringer, indtil du kommer tættere på det påkrævede udseende og fornemmelse for din brugergrænseflade. Derefter kan du kopiere de CSS-ændringer, du har foretaget, tilbage til din lokale kode.

Sådan ændres CSS fra tredjepartsbiblioteker eller -rammer

Du kan også foretage ændringer i HTML-elementer, hvis du bruger 3. parts biblioteker eller rammer såsom Bootstrap.

1. Ved brug af denne hjemmeside, højreklik på en af ​​Bootstrap-knapperne på siden.
2. Du vil se to klasser anvendt på knappen, "btn" og "btn-primary". Bootstrap har allerede sin egen styling på begge disse klasser. Farverne, der bliver brugt som baggrunds- og kantfarver, er #007bff. Skift dette til noget andet, såsom Violet.
3. Hvis du forhåndsviser et lokalt websted, kan du derefter tilføje dine nye ændringer tilbage i din lokale kode. Afhængigt af rækkefølgen af ​​din CSS, skal du muligvis brug en mere specifik CSS-vælger. For eksempel, præfiks vælgeren med ".btn". Dette vil tilsidesætte den originale Bootstrap-styling.

   .btn.btn-primær {
    baggrundsfarve: violet;
    kant-farve: violet;
   }

Hvad betyder element.style på fanen Styles?

Hvert HTML-element, som du fremhæver i vinduet Inspect Element, har en element.styles-blok. Dette svarer til at tilføje inline-styling til HTML-elementet i stedet for at målrette det ved hjælp af en vælger.

1. Højreklik på et HTML-element. Tilføj enhver formgivning til element.style-sektionen, såsom:

   farve: hvidrøg;

2. Du vil se, at koden til HTML-elementet også er ændret. Koden i HTML-elementet har nu den nye linje:

   stil="farve: hvidrøg;"

Hvordan underordnede HTML-elementer arver styling

Hvis du har anvendt to forskellige stilværdier på et overordnet element og et underelement, vil værdien i underelementet have forrang.

1. Ved brug af denne hjemmeside, højreklik hvor som helst på yderkanten af ​​webstedet.
2. Fokuser på to bestemte HTML-elementer i HTML-sektionen i vinduet Inspect Element. Der er et overordnet div-element med en "indhold"-klasse anvendt på det. Dette HTML-element har et h4 underordnet element, med en "tekst-grå" klasse anvendt på det.
3. Vælg det underordnede h4 HTML-element, og deaktiver farvestilen i klassen "tekstgrå".
4. Vælg det overordnede HTML-element med klassen "indhold". Tilføj følgende CSS-stil til klassen:

   farve: rød;

   Al tekst i den overordnede div bliver rød. Denne ændring vil også kaskade til de underordnede elementer, hvilket betyder, at h4 også vil have en rød farve.
5. Vælg det underordnede h4 HTML-element, og tilføj en ny stil til klassen "tekstgrå":

   farve: grøn;

   Dette vil tilsidesætte stylingen af ​​alle forældreklasser. H4 HTML-elementet skifter fra rødt til grønt.
6. Du vil også se en gennemstregning, hvis du ser stylingen for klassen "indhold". Dette bekræfter, at h4 underordnet element tilsidesætter forældrenes farve.

Fordelene ved at fejlfinde din CSS i browseren

Fejlretning af CSS i din browser kan spare en masse tid og fremskynde din kodningsworkflow. Dette gælder især, hvis du har brug for at se, hvordan dine nye CSS-ændringer påvirker brugergrænsefladen på dit websted i realtid.

Du kan bruge denne teknik i stedet for at foretage ændringer i din lokale kode og genindlæse din app. Dette vil spare dig for at gætte, hvilke CSS-værdier der ville fungere, da du nu kan se dine UI-ændringer, mens du foretager dem.

Du kan foretage ændringer i vinduet Inspect Element, indtil du kommer tæt på dit ønskede design. Når du har det, kan du kopiere koden fra vinduet Inspect Element, tilbage til din lokale kode. Du kan stadig køre din app igen for at teste, at dine nye CSS-ændringer stadig virker.

Denne vejledning dækkede det grundlæggende i, hvordan man fejlretter CSS'en på et websted ved hjælp af vinduet Inspect Element, inklusive hvor man kan finde CSS'en på fanen Styles.

Det dækkede også, hvordan man foretager ændringer i CSS og får vist de visuelle ændringer af brugergrænsefladen i realtid. Forhåbentlig forstår du også, hvordan du laver ændringer, når CSS'en bruger et tredjepartsbibliotek, og hvordan stilarv fungerer.

Der er mange andre interessante ting, du kan gøre med vinduet Inspect Element.

7 legende ting, du kan gøre med Inspect Element

Læs Næste

Om forfatteren