Kan vi nogensinde få nok måder at manipulere alle de forskellige elementer på vores websteder på? Vi kan gøre det med temaer, webstedsbyggere og ved at tilføje tilpasset CSS og tilpasset kode. Har vi virkelig brug for en anden måde at se koden, der gør vores websider og rode med den?
Ja, hvis vi med det mener at bruge browserinspect element-værktøjet i WordPress. Det er ikke som nogen af de almindelige måder at manipulere webstedet på, og det tilbyder nogle virkelig sjove og unikke funktioner.
I denne artikel viser vi dig:
Inspect Element-værktøjet er en funktion, der almindeligvis findes i moderne browsere som Firefox og Chrome. Det er også kendt under navnet Developers Tools, eller blot DevTools. De er, som deres navn siger, en gruppe værktøjer, der er indbygget i browseren, som lader dig gøre nogle ret gode ting – men for det meste se og ændre indholdet og udseendet af en webside.
Det er lige så nemt at hente værktøjerne som at trykke på F12-tasten på et tastatur, hvis du har en pc – det virker i enhver browser. Du kan også højreklikke og vælge “Inspicer element.” Hvis du bruger en Mac og Safari-browseren, skal du først aktivere Developer-menuen. Gå til Safari > Præferencer > Avanceret, og klik derefter på menuen Vis udvikling i menulinjen. Derefter skal du enten bruge højreklik + Inspicer element eller genvejen option+cmd+i for at få værktøjet frem.
Undervinduet, der åbnes, er der, hvor al magien sker. Det er generelt opdelt i to dele, Elements-panelet, hvor du kan se og redigere side-HTML, og det andet, hvor du kan se og redigere CSS. Der er også en JavaScript-konsol, du kan få adgang til, såvel som Debugger.
Nu skal du vide, at forskellige browsere kan have forskellige muligheder i deres DevTools. Der er en heftig diskussion, om det er Firefox eller de Chromium-baserede browsere, der har fordelen, men uanset hvad, det er vigtigt at huske, at du nogle gange har brug for specifikke browsere til bestemte ting. Hvis du for eksempel har brug for en konsol, hvor du kan skifte mellem fejl og advarsler, men også CSS og log-meddelelser, bør du bruge Firefox. Hverken Chrome eller Edge har muligheden.
Den anden vigtige ting at huske er, at de ændringer, du foretager i DevTools, ikke skaber permanente ændringer på webstedet. Det smukke ved at bruge dem er, at du kan foretage ændringer i realtid på dine websider uden at skulle bekymre dig om, at du ved et uheld ødelægger noget. Det er en kæmpe sandkasse, hvor du kan prøve ting og lejlighedsvis finde løsninger på nogle problemer. Lad os nu se nogle af de ting, du kan gøre med dette sæt værktøjer.
Vi bruger Firefox’s Inspect Elements-værktøj, men det betyder ikke, at du ikke også kan lave disse tricks og tips i andre browsere. De kan bare være tilgængelige under forskellige navne eller forskellige steder.
Lad os starte med noget simpelt. Gå til dit websted, åbn en af dets sider, fremhæv en af de overskrifter, du har på det, og klik derefter på værktøjsindstillingen Inspect Element. DevTools skal åbne med den pågældende overskrift fremhævet i HTML-inspektørværktøjet.
Selv derfra kan du begynde at ændre indholdet på webstedet ved blot at ændre ordene i overskriften. Men det kan være endnu sjovere at ændre skrifttype, størrelse, bogstavmellemrum og endda farven på overskriften, og du kan gøre alt det fra CSS-editoren. Husk, ingen af de ændringer, du foretager her, er permanente.
Rul ned i vinduet Filterstile, indtil du finder mulighederne for farver og skrifttyper og har det sjovt. Du kan endda bruge et pipetteværktøj til at farve underoverskriften til en anden farve, du har på dit websted, men du er ikke sikker på, hvad det er.
Vil du se, hvor hurtigt din hjemmeside vil indlæses på forskellige netværkshastigheder? Inspect Elements-værktøjet lader dig gøre det. Hvis du undrer dig over, hvor hurtigt din webside ville indlæses over et 2G-netværk, skal du blot navigere væk fra Inspector over til Network, finde menuen Ingen Throttling.
Åbn menuen og vælg 2G. Genindlæs siden, og du vil bemærke den pludselige gennemgang. Muligheden er også til stede i Chrome – du kan endda oprette brugerdefinerede reguleringsprofiler fra indstillingerne og få dem frem, når du er på fanen Netværk.
Hver hjemmesideudvikler har brug for en måde at se, hvordan deres hjemmeside fremstår og opfører sig på en lille skærmet enhed. Men da det stadig er mere praktisk at udvikle og designe på en større skærm, er vi nødt til at stole på en slags enhedsemulatorer for at hjælpe os med at se, hvordan det hele ville se ud på en smartphone, for eksempel.
Med Inspect Elements-værktøjerne er Responsive Design Mode indbygget. Du kan nemt skifte til det ved at trykke på knappen ved siden af knappen, der lukker værktøjet Inspect Elements.
Du vil se din side, som den ser ud på mobile enheder. Du kan justere størrelsen på skærmen, samt gasregulering og berøringssimulering. I Chrome finder du til/fra Device Toolbar – som lader dig gøre det samme – i venstre side af Inspector-vinduet.
Undrer du dig over, hvilke cookies der oprettes af din side eller iframes inde i den? Den nemmeste måde at finde ud af det på ville være at gå til Storage Inspector-delen af DevTools og se en komplet liste.
I Chrome kan du gå til applikationsvinduet, og under lagringsmulighederne finde Cookies.
Hvis du er gået glip af det, har værktøjet sine egne indstillinger. Du kan få adgang til dem ved at trykke på F1-tasten og vælge standard udviklerværktøjer, værktøjskasseknapper, temaer, inspektørindstillinger, editorpræferencer og avancerede indstillinger.
Du bør bruge lidt tid på at blive fortrolig med de muligheder, du har her. De spænder fra muligheden for at skifte mellem et mørkt og et lyst tema, til at tilføje en skærmbilledeknap og deaktivere JavaScript.
Konklusion
WordPress giver dig allerede mere end nok kraft, når det kommer til at forme en hjemmeside og dens sider. Men nogle gange, eller endda oftere, er det godt at have en måde at prøve alle mulige ting på eller finde løsninger på problemer i et trygt miljø.
Browseren Inspect Element-værktøjet gør det for udviklere. DevTools lader dig nyde på en legeplads, hvor du helt kan ændre, hvordan en side ser ud, eller hvad den indeholder, uden nogen konsekvens. Uanset om du vil gøre det for at udøve kreativitet eller gøre dit websted mere sikkert, skal du være enig i, at funktionen er mere end nyttig.
Støt vores arbejde ❤️
Hvis du kunne lide denne artikel, kan du overveje at give drikkepenge for at hjælpe os med fortsat at udgive kvalitetsindhold.
