Slik bruker du Google Chrome til å feilsøke CSS

Inspect Element-verktøyet er flott når det gjelder å feilsøke nettsidene dine i sanntid. Du kan bruke dette verktøyet til å forhåndsvise og endre utformingen av et nettsted. Den lar deg også gjøre det uten å måtte laste inn siden på nytt, og viser CSS-endringene dine umiddelbart.

Denne artikkelen vil gå gjennom hvordan du kan se CSS-klasser og deres anvendte stiler i Inspect Element-vinduet. Den vil også dekke hvordan du kan bruke dette til å forhåndsvise endringer du gjør i CSS-en din i sanntid.

Åpne Inspect Element i Google Chrome

Du kan besøke et hvilket som helst nettsted og åpne vinduet Inspiser element for å se hvordan HTML- eller CSS-koden ser ut. Denne opplæringen vil bruke et eksempelnettsted å demonstrere.

Du kan åpne Inspect Element-vinduet i Google Chrome ved å trykke på F12 nøkkel. Du kan også høyreklikke hvor som helst på siden og klikke videre Undersøke.

Inspiser element-vinduet åpnes for HTML-koden for den delen av nettstedet der du høyreklikket. Det er her du også kan rediger nettsidetekst ved hjelp av Google Chrome.

Stiler-fanen i Inspiser Element-vinduet

I selve Inspect Element-vinduet, under Elementer fanen, er det et sted å se både HTML- og CSS-koden. Du kan se HTML-koden til venstre i Inspect Element-vinduet. Du finner CSS-koden til høyre, under Stiler fanen.

La oss si at du hadde et HTML-element med en klasse kalt "card-padding", med høyre og venstre polstring brukt på den:

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

Hvis du forhåndsviste dette nettstedet i nettleseren, ville du kunne velge div element med "card-padding"-klassen. Enhver styling brukt på "card-padding"-klassen vises til høyre under Stiler fanen.

Når du holder markøren over et element i HTML-kodevisningen, vil den delen av nettsiden fremheves i nettleseren. HTML-elementtypen, sammen med eventuelle klassenavn, vises også i en dialogboks ved siden av elementet.

I dette tilfellet vil du se div-beholderen med klassenavnene "row", "card-padding" og "pb-5" uthevet på siden.

Hvordan gjøre endringer i CSS i sanntid

Du kan endre CSS direkte fra Stiler-fanen:

1. Ved hjelp av denne nettsiden, høyreklikk på den første overskriften.
2. På den spesielle h4-overskriften vil du se en klasse brukt på den kalt "tekstgrå" med fargen #8a8a8a.
3. Endre fargen til noe annet i stedet, for eksempel oransje. Du ønsker kun å endre selve verdien, og ikke navnet på eiendommen, "farge".
4. Du vil se overskriften endres fra mørkegrå til oransje.
5. Hvis du vil deaktivere en bestemt CSS-stil, fjerner du merket i boksen til venstre for stilen.
6. Du kan også legge til flere stiler til originalsettet. Klikk rett under eller til høyre for en eiendom for å begynne å legge til en ny. Du bør bruke samme syntaks som du ville gjort i en vanlig CSS-fil når du legger til nye stiler.
7. Hvis du forhåndsviser et lokalt nettsted, kan du fortsette å gjøre CSS-endringer til du kommer nærmere det nødvendige utseendet og følelsen for brukergrensesnittet ditt. Etter det kan du kopiere CSS-endringene du gjorde tilbake til din lokale kode.

Hvordan endre CSS fra tredjepartsbiblioteker eller rammeverk

Du kan også gjøre endringer i HTML-elementer hvis du bruker tredjepartsbiblioteker eller rammeverk som Bootstrap.

1. Ved hjelp av denne nettsiden, høyreklikk på en av Bootstrap-knappene på siden.
2. Du vil se to klasser brukt på knappen, "btn" og "btn-primær". Bootstrap har allerede sin egen styling brukt på begge disse klassene. Fargene som brukes som bakgrunn og kantfarger er #007bff. Endre dette til noe annet, for eksempel Violet.
3. Hvis du forhåndsviser et lokalt nettsted, kan du legge til de nye endringene tilbake i den lokale koden. Avhengig av rekkefølgen på din CSS, kan det hende du må bruk en mer spesifikk CSS-velger. For eksempel, prefiks velgeren med ".btn". Dette vil overstyre den originale Bootstrap-stylingen.

   .btn.btn-primær {
    bakgrunnsfarge: fiolett;
    kantfarge: fiolett;
   }

Hva betyr element.style i stiler-fanen?

Hvert HTML-element du markerer i Inspiser element-vinduet har en element.styles-blokk. Dette tilsvarer å legge til innebygd stil til HTML-elementet, i stedet for å målrette det ved å bruke en velger.

1. Høyreklikk på et HTML-element. Legg til enhver stil i element.style-delen, for eksempel:

   farge: whitesmoke;

2. Du vil se at koden for HTML-elementet også har endret seg. Koden i HTML-elementet har nå den nye linjen:

   stil="farge: whitesmoke;"

Hvordan underordnede HTML-elementer arver styling

Hvis du har brukt to forskjellige stilverdier på et overordnet element og et underelement, vil verdien i underelementet ha forrang.

1. Ved hjelp av denne nettsiden, høyreklikk hvor som helst på ytterkantene av nettstedet.
2. I HTML-delen av Inspiser element-vinduet fokuserer du på to bestemte HTML-elementer. Det er et overordnet div-element med en "innhold"-klasse brukt på det. Dette HTML-elementet har et h4 underordnet element, med en "tekstgrå" klasse brukt på det.
3. Velg det underordnede h4 HTML-elementet, og deaktiver fargestilen i klassen "tekstgrå".
4. Velg det overordnede HTML-elementet med klassen "innhold". Legg til følgende CSS-stil til klassen:

   fargen rød;

   All tekst i den overordnede divisjonen blir rød. Denne endringen vil også overlappe de underordnede elementene, noe som betyr at h4 også vil ha en rød farge.
5. Velg det underordnede h4 HTML-elementet, og legg til en ny stil i klassen "tekstgrå":

   farge: grønn;

   Dette vil overstyre stylingen til alle foreldreklasser. H4 HTML-elementet blir fra rødt til grønt.
6. Du vil også se en gjennomstreking hvis du ser på stylingen for "innholdsklassen". Dette bekrefter at h4 underordnet element overstyrer overordnets farge.

Fordelene ved å feilsøke CSS i nettleseren

Feilsøking av CSS i nettleseren din kan spare mye tid og øke hastigheten på arbeidsflyten for koding. Dette gjelder spesielt hvis du trenger å se hvordan de nye CSS-endringene påvirker brukergrensesnittet på nettstedet ditt i sanntid.

Du kan bruke denne teknikken i stedet for å gjøre endringer i den lokale koden din og laste inn appen på nytt. Dette vil spare deg for å gjette hvilke CSS-verdier som ville fungere, siden du nå kan se UI-endringene dine mens du gjør dem.

Du kan gjøre endringer i Inspect Element-vinduet til du kommer nær ønsket design. Når du har det, kan du kopiere koden fra Inspiser Element-vinduet, tilbake til din lokale kode. Du kan fortsatt kjøre appen på nytt for å teste at de nye CSS-endringene fortsatt fungerer.

Denne opplæringen dekket det grunnleggende om hvordan du feilsøker CSS-en til et nettsted ved å bruke Inspect Element-vinduet, inkludert hvor du finner CSS-en i stiler-fanen.

Den dekket også hvordan du gjør endringer i CSS og viser de visuelle endringene i brukergrensesnittet i sanntid. Forhåpentligvis forstår du også hvordan du gjør endringer når CSS bruker et tredjepartsbibliotek, og hvordan stilarv fungerer.

Det er mange andre interessante ting du kan gjøre med vinduet Inspiser element.

7 lekne ting du kan gjøre med Inspect Element

Les Neste

Om forfatteren