Har du någonsin velat redigera en webbsida tillfälligt för att se hur den skulle se ut med specifika färger, teckensnitt, stil? Detta är möjligt med ett verktyg som redan finns i din webbläsare som heter " Inspektera elementet ". Detta är en dröm som går i uppfyllelse för alla användare som gillar att manipulera CSS.

I den här guiden går vi igenom grunderna för artikelinspektion och hur du använder den med din WordPress-webbplats.

Inspektion av WordPress-element

Vad är ett objektinspektionsverktyg?

Moderna webbläsare som Google Chrome och Mozilla Firefox har byggt verktyg som gör det möjligt för webbutvecklare att felsöka fel. Dessa verktyg visar HTML, CSS och JavaScript för en sida och visar hur koden körs.

Användningen av verktyget " inspektera Element Du kan redigera HTML-, CSS- eller JavaScript-koden för vilken webbsida som helst och se dina förändringar live (enbart på din dator).

För en ägare av en webbplats, kan dessa verktyg hjälpa dig att förhandsgranska hur en viss stil kommer att se ut utan att faktiskt tillämpa ändringarna för alla.

För författare är dessa verktyg fantastiska eftersom du enkelt kan ändra personlig identifieringsinformation medan du tar dina skärmdumpar, vilket eliminerar behovet av att suddiga element.

För supportagenter är detta ett utmärkt sätt att identifiera felet som kan orsaka att dina gallerier inte laddas eller hindrar dem från att fungera korrekt.

Vi kliar bara ytan på användningsfall eftersom verktyget " Inspektera elementet Är verkligen kraftfull.

I den här artikeln kommer vi att fokusera på verktyget " Inspektera elementet Från Google Chrome, eftersom det är vår webbläsare du väljer. Firefox har sina egna utvecklingsverktyg som också kan åberopas genom att välja menyn " inspektera elementet ".

Start av verktyget "Inspektera elementet" och lokalisering av koden

Du kan köra det här verktyget genom att trycka CTRL + Shift + I på tangentbordet. Alternativt kan du klicka var som helst på en webbsida och sedan välja Inspektera webbläsarens menyalternativ.

blogpascher kodkontroll

Din webbläsarfönster delas upp i två, och det nedre fönstret visar källkoden för webbsidan.

Utvecklarens verktygsfönster är vidare uppdelat i två fönster. Till vänster ser du HTML-koden för sidan. I den högra rutan ser du CSS-reglerna.

HTML-CSS-kodinspektion

När du flyttar musen över källan till HTML-koden ser du det markerade området markerat på webbsidan. Du kommer också att märka CSS-reglerna för detta ifrågavarande element.

HTML-element CSS-regler

Du kan också ta muspekaren över ett objekt på webbsidan, högerklicka och välja " inspektera elementet ". Objektet du klickade på kommer att markeras i källkoden.

Kodutvecklare och utvecklarfelsökare

HTML och CSS i elementinspektionsfönstret kan redigeras. Du kan dubbelklicka på HTML-källkoden och redigera koden som du vill.

ändra HTML-källkod

Du kan också dubbelklicka och redigera attributen för stilarna i CSS-fönstret. Om du vill lägga till en regel klickar du på plusikonen i stilfönstret längst upp.

lägg till ny css-regel

När du gör ändringar i CSS eller HTML-koden kommer dessa ändringar att återspeglas direkt i din webbläsare.

live kodredigering

Observera att inte alla ändringar som görs här sparas var som helst. Verktyget Inspektera elementet Är ett felsökningsverktyg och det sparar inte dina ändringar i en fil på din server. Detta innebär att om du uppdaterar sidan kommer alla dina ändringar att gå förlorade.

För att faktiskt göra ändringarna måste du ändra stilen på din Wordpress tema eller en mall för att lägga till ändringarna du vill spara.

Innan du börjar redigera din Wordpress tema existerande med hjälp av verktyget " Inspektera elementet Se till att spara alla dina ändringar genom att skapa ett barntema.

Hur man hittar fel på Wordpress

Verktyget Inspektera elementet Har ett område som heter " Konsol Som visar alla fel som finns på din webbplats. Innan du försöker felsöka ett fel eller be om hjälp från författarna till ett tema eller plugin är det alltid värt att titta här för att se vad som är fel.

javascript-konsol

Till exempel om du var kund OptinMonster Vem undrar varför hans optin inte laddas, då kan du enkelt hitta problemet som indikerar att " snigel på sidan matchar inte ".

Om din delningsfält inte fungerade ordentligt kan du se att det finns ett JavaScript-fel som orsakar det.

Det var allt för denna handledning, jag hoppas att du bättre kan anpassa din Wordpress blogg. Dela gärna denna handledning med dina vänner.