Chrome Developer Tools (DevTools) f\u00f8les ret essentielt, n\u00e5r man f\u00f8rst har v\u00e6nnet sig til det, men i starten kan det v\u00e6re lidt overv\u00e6ldende. Is\u00e6r hvis du pr\u00f8ver at rode rundt i en hjemmesides kode eller fejlfinde problemer uden nogen kodningserfaring. Nogle gange fungerer tingene ikke som forventet – m\u00e5ske vises elementerne ikke i den rigtige stil, eller siden indl\u00e6ses super langsomt. Og selvf\u00f8lgelig er det frustrerende, n\u00e5r man ikke kan finde ud af, hvordan man \u00e5bner det uden at skulle klikke og udforske menuer i en evighed. Heldigvis er der nogle afpr\u00f8vede m\u00e5der at \u00e5bne og bruge DevTools p\u00e5, s\u00e5 du ikke sidder fast i at fumle rundt hver gang.<\/p>\n
Dette er nok den hurtigste m\u00e5de, is\u00e6r hvis du er vant til tastaturkommandoer. P\u00e5 Windows eller Linux skal du blot trykke p\u00e5 Ctrl + Shift + C<\/kbd>for at \u00e5bne fanen Elementer<\/strong> og begynde at inspicere ting. Hvis du vil hoppe direkte til konsolloggen, skal du trykke p\u00e5 Ctrl + Shift + J<\/kbd>. Og for en generel hurtig skift, Ctrl + Shift + I<\/kbd>eller bare tryk p\u00e5 F12<\/kbd>. P\u00e5 en Mac? Det er stort set det samme, men byt Ctrl<\/kbd>med Command<\/kbd>og Shift<\/kbd>med Option<\/kbd>. For eksempel Command + Option + C<\/kbd>\u00e5bner Elements. Nogle gange virker dette ikke i f\u00f8rste fors\u00f8g, is\u00e6r hvis Chrome er st\u00e6dig, eller hvis du bruger et m\u00e6rkeligt tastaturlayout – pr\u00f8v bare igen eller genstart Chrome, hvis det er n\u00f8dvendigt.<\/p>\n \u00c6rligt talt, disse genveje er livreddere – lidt m\u00e6rkeligt, at de ikke er mere fremtr\u00e6dende, men n\u00e5r du f\u00f8rst har l\u00e6rt dem udenad, er det hurtigere end at klikke gennem menuer.<\/p>\n Mindre lusket, men lige s\u00e5 nyttigt, h\u00f8jreklik p\u00e5 et hvilket som helst element p\u00e5 en webside og v\u00e6lg Inspicer<\/strong>. I stedet for at lede gennem menuer \u00e5bner det \u00f8jeblikkeligt DevTools og fremh\u00e6ver det p\u00e5g\u00e6ldende element i fanen Elementer<\/strong>. Eller klik p\u00e5 menuen med tre prikker i \u00f8verste h\u00f8jre hj\u00f8rne af Chrome, g\u00e5 til Flere v\u00e6rkt\u00f8jer<\/strong>, og v\u00e6lg derefter Udviklerv\u00e6rkt\u00f8jer<\/strong>. Denne metode er god, hvis du ikke er til genveje eller vil spare noget hjernekraft ved at klikke rundt.<\/p>\n Hvis Chrome ikke \u00e5bner med det samme, eller hvis udviklerv\u00e6rkt\u00f8jerne ikke viser det, du forventer, skal du dobbelttjekke, at din Chrome-browser er opdateret. Nogle gange kan fejl eller for\u00e6ldede versioner forstyrre DevTools’ korrekte funktion.<\/p>\n Mange udviklere og lidt nysgerrige personer bruger DevTools til en bred vifte af opgaver \u2013 inspektion af sidens HTML, fejlfinding af JavaScript, kontrol af netv\u00e6rksanmodninger eller endda test af, hvordan deres side ser ud p\u00e5 forskellige enheder. Men husk: Alle redigeringer, du foretager, er kun midlertidige. Genindl\u00e6s siden, og alt nulstilles. Det er dog stadig super praktisk at pr\u00f8ve hurtige l\u00f8sninger eller se, hvad der g\u00e5r galt, f\u00f8r man redigerer selve kodebasen.<\/p>\n Det hj\u00e6lper at blive fortrolig med kernefanerne:<\/p>\n Vil du se, hvordan dit websted ser ud p\u00e5 telefoner eller tablets? Klik p\u00e5 enhedsknappen (det lille smartphone-ikon) i DevTools, eller tryk p\u00e5 Ctrl + Shift + M<\/kbd>. Du kan v\u00e6lge forudindstillede enheder fra en rullemenu \u2013 f.eks.iPhone eller Pixel \u2013 eller indstille brugerdefinerede dimensioner til test af m\u00e6rkelige sk\u00e6rmst\u00f8rrelser. Dette hj\u00e6lper normalt med at finde layoutproblemer, som du m\u00e5ske overser p\u00e5 en stor sk\u00e6rm.<\/p>\n Har du nogensinde spekuleret p\u00e5, hvorfor dit websted f\u00f8les langsomt? Tryk p\u00e5 fanen Netv\u00e6rk<\/strong>, opdater siden, og du vil se alle de anmodninger, der foretages for at indl\u00e6se siden. Se nederst \u2013 DOMContentLoaded<\/strong> og Indl\u00e6sningstiderne<\/strong> fort\u00e6ller dig, hvor lang tid det tog at indl\u00e6se HTML sammenlignet med alt andet. Hvis disse tider er lange, er nogle billeder m\u00e5ske for store, eller din hosting er langsom. Du kan endda simulere langsommere forbindelser fra dropdown-menuen med begr\u00e6nsninger, hvilket er nyttigt, hvis du vil se, hvordan det pr\u00e6sterer p\u00e5 mellemklasseenheder.<\/p>\n Et andet v\u00e6rkt\u00f8j i b\u00e6ltet er Lighthouse, som du kan tilg\u00e5 via menuen (dobbeltpilikonet > Lighthouse<\/strong> ).K\u00f8r en hurtig SEO-revision, et performancetjek eller en gennemgang af bedste praksis. Det er lidt ligesom at give dit websted en sundhedsrapport. Skift indstillingerne, s\u00e5 de matcher din m\u00e5lenhed, v\u00e6lg kategorier som SEO, og k\u00f8r revisionen. Resultaterne tager normalt cirka 30 sekunder, men de kan give gode tips til at rette metatags, indholdsstruktur eller indl\u00e6sningsproblemer.<\/p>\n Pro-tip: Chromes dokumentation ([her](https:\/\/developer.chrome.com\/docs\/devtools\/)) er ret detaljeret, hvis du vil g\u00e5 videre ud over det grundl\u00e6ggende.<\/p>\n Samlet set, n\u00e5r du f\u00f8rst er blevet fortrolig med disse muligheder, bliver det en selvf\u00f8lge at bruge DevTools. Det er ikke perfekt \u2013 nogle gange er det langsomt eller fejlbeh\u00e6ftet \u2013 men i sidste ende er det den hurtigste m\u00e5de at fejlfinde og forbedre dit websted p\u00e5 uden at vente p\u00e5 udviklere eller skrive din egen kode fra bunden.<\/p>\n At f\u00e5 styr p\u00e5 Chrome Developer Tools \u00e5bner op for en masse muligheder, uanset om det er til fejlfinding eller bare at finde ud af, hvordan websteder er bygget. Det kan v\u00e6re lidt akavet i starten \u2013 is\u00e6r i nogle ops\u00e6tninger \u2013 men n\u00e5r man f\u00f8rst har v\u00e6nnet sig til det, sparer det en masse tid. Og hey, hvis lidt roderi sparer timer med frustration, er det helt sikkert det v\u00e6rd. Krydser fingre for, at dette hj\u00e6lper nogen med at komme i gang uden for meget besv\u00e6r.<\/p>\n","protected":false},"excerpt":{"rendered":" Chrome Developer Tools (DevTools) f\u00f8les ret essentielt, n\u00e5r man f\u00f8rst har v\u00e6nnet sig til det, men i starten kan det v\u00e6re lidt overv\u00e6ldende. Is\u00e6r hvis du pr\u00f8ver at rode rundt i en hjemmesides kode eller fejlfinde problemer uden nogen kodningserfaring. Nogle gange fungerer tingene ikke som forventet – m\u00e5ske vises elementerne ikke i den rigtige […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-10900","post","type-post","status-publish","format-standard","hentry","category-how-to"],"acf":[],"_links":{"self":[{"href":"https:\/\/howtogeek.blog\/da\/wp-json\/wp\/v2\/posts\/10900","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/howtogeek.blog\/da\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/howtogeek.blog\/da\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/howtogeek.blog\/da\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/howtogeek.blog\/da\/wp-json\/wp\/v2\/comments?post=10900"}],"version-history":[{"count":1,"href":"https:\/\/howtogeek.blog\/da\/wp-json\/wp\/v2\/posts\/10900\/revisions"}],"predecessor-version":[{"id":10901,"href":"https:\/\/howtogeek.blog\/da\/wp-json\/wp\/v2\/posts\/10900\/revisions\/10901"}],"wp:attachment":[{"href":"https:\/\/howtogeek.blog\/da\/wp-json\/wp\/v2\/media?parent=10900"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/howtogeek.blog\/da\/wp-json\/wp\/v2\/categories?post=10900"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/howtogeek.blog\/da\/wp-json\/wp\/v2\/tags?post=10900"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Brug af Chrome-menuen \u2013 ingen genvej n\u00f8dvendig<\/h3>\n
F\u00e5 mest muligt ud af Chrome DevTools<\/h2>\n
\n
Pr\u00f8v responsivt designtest<\/h3>\n
Tjek din hjemmesides hastighed og foresp\u00f8rgsler<\/h3>\n
Hvad med SEO og grundl\u00e6ggende revision?<\/h3>\n
Oversigt<\/h2>\n
\n
Opsummering<\/h2>\n