5 funktioner i Chrome Developer tools enhver udvikler bør kende!
Skrevet af: Thomas Iversen 16-06-2017 Skrevet i: HTML + HTML5, Off topic, WordPress
Developer tools i Google Chrome er et uundværlig værktøj for enhver webudvikler, og langt de fleste som arbejder med hjemmesider og webshop har værktøjet åben minimum én gang om dagen. Men får du det optimale ud af Developer Tools? Kender du alle de smarte funktioner, som værktøjet har at byde på?
I denne artikel kigger vi på 5 funktioner i Developer tools, som enhver udvikler bør kende til, da de kan gøre dit arbejde langt nemmere og ikke mindst mere effektivt.
1 – Find hex-farvekoden
Hvis du også har svært ved at huske hex-farver eller bare gerne vil have en nem måde at genbruge farver fra dit website, så er denne funktion lige noget for dig.
I developer tools findes der nemlig et pipette-værktøj, som gør det muligt for dig at “suge” en farve fra dit eller et andet website. Med pipette-værktøjet kan du altså lynhurtigt snuppe den rigtige farveode fra et andet element eller billede og genbruge ten på din egen side uden selv at skulle ind og lede efter farvekoden i CSS´en.
Du kalder pipette-værktøjet frem ved at trykke på den lille farve-firkant, som vist nedenfor.
Herefter får du en pipette frem, og du kan nu føre pipetten hen på det sted på siden, hvorfra du gerne vil have farvekoden på en given farve.
2 – Test din side med andre internet-forbindelser
Når du tester din side, så er det vigtigt, at den også performer godt på knap så hurtige internetforbindelser. Har du f.eks. en fiberforbindelse, så kan det godt være, at din side loader fint hurtigt hos dig, men besøger man din hjemmeside på en mobiltelefon med en dårlig 4G-forbindelse, kan oplevelsen måske være en helt anden.
Du kan i developer tools bruge det man kalder for “throttling”, hvilket er en funktion som begrænser den hastighed hjemmesiden indlæses på. Du kan vælge mellem forskellige forbindelsestyper, og derved teste, hvor hurtigt sin side loader på selv de langsomste forbindelser.
Du finder throttling under “Network”-fanen.
3 – Kør developer tools i fuld skærm
Hvis man har to skærme til rådighed, kan det ofte være en fordel at arbejde med developer tools på en skærm for sig selv.
Du kan vælge din “Dock-side” ved at trykke på den lille kebabmenu (tre lodrette prikker) og herefter vælge den måde du vil dokke din developer tools
4 – Fremkald permanent hover-effekt
Vil du gerne arbejde med et element i dets hover-stadie, så kan dette være ganske umuligt, hvis du ikke permanent kan fastlåse dit element i det stadie. Det kan du heldigvis med developer tools.
Alt hvad du skal gøre er først at vælge det element, du ønsker skal vises i sit hover-stadie, og derefter går til “:hov” og vælge hover, som vist herunder. Du kan selvfølge også vælge alle de andre stadier.
5 – Visning af side på forskellige enheder
Du kan hurtigt og nemt teste, hvordan din side ser ud på forskellige enheder. Alt hvad du skal gøre er at trykke på det lille “toogle device” ikon, hvorefter du kan vælge, hvilken enhed du gerne vil vise din side med.
Det kan være at du måske allerede kendte et par af disse funktioner før, men forhåbentlig har du også lært noget nyt, som kan hjælpe dig, når du arbejder med dine egne sider.
Har du spørgsmål eller har du en funktion som du mener andre bør kender, så skal du være velkommen til at skrive en kommentar herunder!
Denne artikel blev bragt i samarbejde med tweak.dk
