Har du nogensinde ønsket at ændre en webside midlertidigt for at se, hvordan den ville se ud med specifikke farver, skrifttyper, stil? Dette er muligt med et værktøj, der allerede findes i din browser kaldet " Kontroller elementet ". Dette er en drøm, der går i opfyldelse for alle brugere, der kan lide at manipulere CSS.
I denne vejledning leder vi dig gennem det grundlæggende ved elementinspektion og hvordan du bruger det med dit WordPress-websted.
Hvad er et genstandsinspektionsværktøj?
Moderne browsere som Google Chrome og Mozilla Firefox har bygget værktøjer, der tillader webudviklere at fejlsøge fejl. Disse værktøjer viser HTML, CSS og JavaScript for en side og viser, hvordan koden kører.
Brug af værktøjet " inspicere Element Du kan redigere HTML-, CSS- eller JavaScript-koden for enhver webside og se dine ændringer live (udelukkende på din computer).
For en ejer af en Websted, kan disse værktøjer hjælpe dig med at se et eksempel på, hvordan en bestemt stilart vil se ud uden faktisk at anvende ændringerne for alle.
For forfattere er disse værktøjer fantastiske, fordi du nemt kan ændre personligt identificerbare oplysninger, mens du tager dine skærmbilleder, hvilket eliminerer behovet for faktisk at sløre elementer.
For supportagenter er dette en fantastisk måde at identificere den fejl, der kan forårsage, at dine gallerier ikke indlæses eller forhindrer dem i at fungere korrekt.
Vi skraber kun overfladen af brugssager, fordi værktøjet " Kontroller elementet Er virkelig magtfuld.
I denne artikel vil vi fokusere på værktøjet " Kontroller elementet Fra Google Chrome, fordi det er vores valgte browser. Firefox har sine egne udviklingsværktøjer, som også kan påberåbes ved at vælge menuen " inspicere element '.
Lancering af værktøjet "Inspicer element" og lokalisering af koden
Du kan køre dette værktøj ved at trykke på CTRL + Shift + I på dit tastatur. Alternativt kan du klikke hvor som helst på en webside og derefter vælge Undersøg browserens menupunkt.
Dit browservindue opdeles i to, og det nederste vindue viser kildekoden på websiden.
Udviklerværktøjsvinduet er yderligere opdelt i to vinduer. Til venstre ser du HTML-koden for siden. I højre rude vil du se CSS-reglerne.
Når du bevæger musen hen over kilden til HTML-koden, vil du se det fremhævede område fremhævet på websiden. Du vil også bemærke CSS-reglerne for dette element.
Du kan også føre musemarkøren over et emne på webside, højreklikke og vælge " inspicere elementet ". Det element, du har klikket på, fremhæves i kildekoden.
Kodeudvikler og debugger af udviklere
HTML og CSS i elementinspektionsvinduet kan redigeres. Du kan dobbeltklikke i HTML-kildekoden og redigere koden, som du vil.
Du kan også dobbeltklikke og redigere attributterne for typografier i CSS-ruden. For at tilføje en regel skal du klikke på plus-ikonet i stilruden øverst.
Når du foretager ændringer i CSS- eller HTML-koden, afspejles disse ændringer øjeblikkeligt i din browser.
Bemærk, at ikke alle ændringer, der er foretaget her, gemmes overalt. Værktøjet Kontroller elementet Er et fejlfindingsværktøj, og det gemmer ikke dine ændringer til en fil på din server. Dette betyder, at hvis du opdaterer siden, vil alle dine ændringer gå tabt.
For rent faktisk at foretage ændringerne skal du ændre stilen på din WordPress tema eller en skabelon for at tilføje de ændringer, du vil gemme.
Før du begynder at redigere din WordPress tema eksisterende ved hjælp af værktøjet " Kontroller elementet Sørg for at gemme alle dine ændringer ved at oprette et underordnet tema.
Sådan finder fejl på WordPress
Værktøjet Kontroller elementet Har et område kaldet " Konsol Som viser alle de fejl, der findes på dit websted. Før du prøver at fejlsøge en fejl eller bede om hjælp fra forfatterne af et tema eller plugin, er det altid værd at kigge her for at se, hvad der er galt.
For eksempel, hvis du var en kunde OptinMonster Hvem undrer sig over, hvorfor hans optin ikke indlæses, så kan du nemt finde det problem, der indikerer, at " slug på din side ikke passer '.
Hvis din delelinje ikke fungerede korrekt, kan du se, at der er en JavaScript-fejl, der forårsager det.
Det er alt for denne tutorial, jeg håber, du bedre kan tilpasse din WordPress blog. Du er velkommen til at dele denne tutorial med dine venner.
