Hur man använder Google Chrome för att felsöka CSS

Inspect Element-verktyget är utmärkt när det gäller att felsöka dina webbsidor i realtid. Du kan använda det här verktyget för att förhandsgranska och ändra designen på en webbplats. Det låter dig också göra det utan att behöva ladda om sidan, och visar dina CSS-ändringar omedelbart.

Den här artikeln kommer att gå igenom hur du visar CSS-klasser och deras tillämpade stilar i fönstret Inspektera element. Den kommer också att täcka hur du kan använda detta för att förhandsgranska ändringar du gör i din CSS i realtid.

Öppna Inspect Element i Google Chrome

Du kan besöka vilken webbplats som helst och öppna fönstret Inspektera element för att se hur dess HTML- eller CSS-kod ser ut. Denna handledning kommer att använda en exempelwebbplats att demonstrera.

Du kan öppna fönstret Inspektera element i Google Chrome genom att trycka på F12 nyckel. Du kan också högerklicka var som helst på sidan och klicka på Inspektera.

Fönstret Inspektera element öppnas för HTML-koden för den del av webbplatsen där du högerklickade. Det är här du också kan redigera webbplatstext med Google Chrome.

Fliken Stilar i fönstret Inspektera element

I själva fönstret Inspektera element, under Element fliken finns det en plats att visa både HTML- och CSS-koden. Du kan se HTML-koden till vänster om fönstret Inspektera element. Du hittar CSS-koden till höger, under Stilar flik.

Låt oss säga att du hade ett HTML-element med en klass som heter "card-padding", med höger och vänster utfyllnad på den:

.kort-stoppning {
 stoppning-höger: 0vh;
 stoppning-vänster: 0vh;
}

Om du förhandsgranskade den här webbplatsen i webbläsaren skulle du kunna välja div element med klassen "card-padding". Varje styling som tillämpas på klassen "card-padding" visas till höger, under Stilar flik.

När du håller muspekaren över ett element i HTML-kodvyn kommer den delen av webbsidan att markeras i webbläsaren. HTML-elementtypen, tillsammans med eventuella klassnamn, visas också i en dialogruta bredvid elementet.

I det här fallet kommer du att se div-behållaren med klassnamnen "row", "card-padding" och "pb-5" markerade på sidan.

Hur man gör ändringar i CSS i realtid

Du kan ändra CSS direkt från fliken Stilar:

1. Använder sig av denna webbplats, högerklicka på den första rubriken.
2. På den specifika h4-rubriken kommer du att se en klass applicerad på den som heter "text-grå" med färgen #8a8a8a.
3. Ändra färgen till något annat istället, som orange. Du vill bara ändra själva värdet, och inte namnet på egenskapen, "färg".
4. Du kommer att se rubriken ändras från mörkgrå till orange.
5. Om du vill inaktivera en viss CSS-stil, avmarkera rutan till vänster om stilen.
6. Du kan också lägga till fler stilar till originaluppsättningen. Klicka precis nedanför eller till höger om en fastighet för att börja lägga till en ny. Du bör använda samma syntax som i en vanlig CSS-fil när du lägger till nya stilar.
7. Om du förhandsgranskar en lokal webbplats kan du fortsätta att göra CSS-ändringar tills du kommer närmare det önskade utseendet och känslan för ditt användargränssnitt. Efter det kan du kopiera CSS-ändringarna du gjorde tillbaka till din lokala kod.

Hur man ändrar CSS från tredje parts bibliotek eller ramar

Du kan också göra ändringar i HTML-element om du använder tredje parts bibliotek eller ramverk som Bootstrap.

1. Använder sig av denna webbplats, högerklicka på en av Bootstrap-knapparna på sidan.
2. Du kommer att se två klasser tillämpade på knappen, "btn" och "btn-primary". Bootstrap har redan sin egen styling applicerad på båda dessa klasser. Färgerna som används som bakgrunds- och kantfärger är #007bff. Ändra detta till något annat, till exempel Violet.
3. Om du förhandsgranskar en lokal webbplats kan du sedan lägga till dina nya ändringar i din lokala kod. Beroende på ordningen på din CSS kan du behöva använd en mer specifik CSS-väljare. Till exempel, prefix väljaren med ".btn". Detta kommer att åsidosätta den ursprungliga Bootstrap-stylingen.

   .btn.btn-primär {
    bakgrundsfärg: violett;
    kantfärg: violett;
   }

Vad betyder element.style på fliken Stilar?

Varje HTML-element som du markerar i fönstret Inspektera element har ett element.styles-block. Detta motsvarar att lägga till inline-stil till HTML-elementet, istället för att rikta in det med en väljare.

1. Högerklicka på ett HTML-element. Lägg till valfri stil i avsnittet element.style, till exempel:

   färg: vitrök;

2. Du kommer att se att koden för HTML-elementet också har ändrats. Koden i HTML-elementet har nu den nya raden:

   stil="färg: vitrök;"

Hur underordnade HTML-element ärver styling

Om du har två olika stilvärden som tillämpas på ett överordnat element och ett underordnat element, kommer värdet i det underordnade elementet att ha företräde.

1. Använder sig av denna webbplats, högerklicka var som helst på webbplatsens yttre kanter.
2. I HTML-avsnittet i fönstret Inspektera element fokuserar du på två särskilda HTML-element. Det finns ett överordnat div-element med en "content"-klass applicerad på den. Detta HTML-element har ett h4 underordnat element, med en "text-grå" klass applicerad på det.
3. Välj det underordnade h4 HTML-elementet och inaktivera färgstilen i klassen "text-grå".
4. Välj det överordnade HTML-elementet med klassen "innehåll". Lägg till följande CSS-stil till klassen:

   färgen röd;

   All text inom den överordnade div kommer att bli röd. Denna förändring kommer också att överlappa de underordnade elementen, vilket betyder att h4 också kommer att ha en röd färg.
5. Välj det underordnade h4 HTML-elementet och lägg till en ny stil till klassen "text-grå":

   färg: grön;

   Detta kommer att åsidosätta stylingen av alla föräldraklasser. HTML-elementet h4 ändras från rött till grönt.
6. Du kommer också att se ett genomslag om du tittar på stylingen för klassen "innehåll". Detta bekräftar att det underordnade h4-elementet åsidosätter förälderns färg.

Fördelarna med att felsöka din CSS i webbläsaren

Att felsöka CSS i din webbläsare kan spara mycket tid och påskynda ditt kodningsarbetsflöde. Detta gäller särskilt om du behöver se hur dina nya CSS-ändringar påverkar användargränssnittet på din webbplats i realtid.

Du kan använda den här tekniken istället för att göra ändringar i din lokala kod och ladda om din app. Detta kommer att spara dig från att gissa vilka CSS-värden som skulle fungera, eftersom du nu kan se dina UI-ändringar när du gör dem.

Du kan göra ändringar i fönstret Inspektera element tills du kommer nära din önskade design. När du har gjort det kan du sedan kopiera koden från Inspect Element-fönstret, tillbaka till din lokala kod. Du kan fortfarande köra appen igen för att testa att dina nya CSS-ändringar fortfarande fungerar.

Denna handledning täckte grunderna i hur man felsöker CSS på en webbplats med hjälp av fönstret Inspect Element, inklusive var man hittar CSS på fliken Styles.

Den täckte också hur man gör ändringar i CSS och visar de visuella ändringarna i användargränssnittet i realtid. Förhoppningsvis förstår du också hur du gör ändringar när CSS använder ett tredjepartsbibliotek och hur stilarv fungerar.

Det finns många andra intressanta saker du kan göra med fönstret Inspektera element.

7 lekfulla saker du kan göra med Inspect Element

Läs Nästa

Om författaren