At unders\u00f8ge kildekoden p\u00e5 en HTML-side er en slags magtfaktor, is\u00e6r hvis du er i gang med webudvikling eller bare pr\u00f8ver at finde ud af, hvad der f\u00e5r et websted til at fungere. Nogle gange indl\u00e6ser websteder scripts eller stilarter dynamisk, s\u00e5 den faktiske kode, du ser p\u00e5 siden, er ikke hele historien. Det er her, det bliver praktisk at se kildekoden \u2013 is\u00e6r hvis du vil scrape data eller bare l\u00e6re, hvordan tingene er bygget op. Og ja, Chrome g\u00f8r det ret ligetil, men \u00e6rligt talt kan det f\u00f8les lidt forvirrende, hvis du ikke er vant til v\u00e6rkt\u00f8jerne eller jargonen.<\/p>\n
Google Chrome giver et par nemme metoder til at kigge bag kulisserne. For det f\u00f8rste kan du \u00e5bne den r\u00e5 HTML-kildekode direkte fra serveren, eller du kan bruge interaktive v\u00e6rkt\u00f8jer, der viser dig koden, efter at webstedets JavaScript og CSS har gjort deres arbejde. V\u00e6rkt\u00f8jet “Inspect” er dybest set det, alle udviklere bruger til at hoppe rundt i koden. Det er super nyttigt til fejlfinding eller bare til at fors\u00f8ge at forst\u00e5 komplekse layouts. Men v\u00e6r opm\u00e6rksom p\u00e5: Nogle gange er den kildekode, du ser, ikke pr\u00e6cis den, der oprindeligt blev vist, p\u00e5 grund af DOM-manipulationer eller andre scripts. Det er lidt m\u00e6rkeligt, men i nogle ops\u00e6tninger indl\u00e6ses det muligvis ikke med det samme, hvis du \u00e5bner “Inspect” eller kildevisningen \u2013 det kan hj\u00e6lpe at genindl\u00e6se siden, rydde cachen eller endda lukke Chrome ned og gen\u00e5bne den.<\/p>\n
Den hurtigste m\u00e5de? Bare tryk p\u00e5 den Ctrl + U<\/kbd>p\u00e5 Windows eller \u2318-Option-U<\/kbd>Mac. Dette \u00e5bner \u00f8jeblikkeligt en ny fane med den r\u00e5 HTML. P\u00e5 nogle websteder er det den nemmeste m\u00e5de, is\u00e6r hvis du bare pr\u00f8ver at kigge hurtigt p\u00e5 koden. Men husk, at dette viser koden, som serveren sender den, ikke hvad du ser efter JavaScript eller stilarter har modificeret tingene. For et dybere dyk er “Inspicer”-panelet et bedre valg.<\/p>\n H\u00f8jreklik et vilk\u00e5rligt sted p\u00e5 siden \u2013 ja, et vilk\u00e5rligt sted \u2013 og du vil se muligheder som Vis sidekilde<\/strong> eller Unders\u00f8g<\/strong>. V\u00e6lg Vis sidekilde<\/strong> for at se den r\u00e5 HTML, der vises, som opdateres, hvis du opdaterer siden. Hvis du v\u00e6lger Unders\u00f8g<\/strong>, \u00e5bner det Chrome DevTools-panelet lige ved det element, du klikkede p\u00e5, s\u00e5 du kan se den aktuelle tilstand af det p\u00e5g\u00e6ldende element, efter at scripts eller stilarter er blevet anvendt. Dette er praktisk, n\u00e5r du foretager fejlfinding af problemer med layout eller dynamisk indhold. Nogle gange indl\u00e6ses dette panel ikke med det samme, s\u00e5 giv det et \u00f8jeblik, eller genindl\u00e6s det, hvis det er n\u00f8dvendigt \u2013 Chrome kan v\u00e6re lidt ustabil her.<\/p>\n For de sande n\u00f8rder og mobilbrugere kan I hacke selve URL’en. Bare klik p\u00e5 URL-linjen, og skriv derefter Hvis h\u00f8jreklik ikke hj\u00e6lper dig, har Chrome-menuen det, du s\u00f8ger. Klik p\u00e5 ikonet med de tre prikker, naviger derefter til <\/strong>Flere v\u00e6rkt\u00f8jer<\/strong>, og v\u00e6lg Udviklerv\u00e6rkt\u00f8jer<\/strong>. Dette \u00e5bner panelet DevTools, som er fyldt med funktioner \u2013 Elementer, Konsol, Netv\u00e6rk osv. Fanen Elementer<\/strong> er der, hvor du sandsynligvis vil bruge det meste af din tid p\u00e5 at unders\u00f8ge live DOM’er eller justere stilarter. Det er lidt skr\u00e6mmende i starten, men at rode rundt her kan l\u00e6re dig en masse om, hvordan websteder fungerer. Bonus: Du kan sl\u00e5 enhedsemulering til og fra og teste mobillayouts lige der.<\/p>\n N\u00e5r du har koden foran dig, hj\u00e6lper det meget at forst\u00e5 det grundl\u00e6ggende. HTML er bygget p\u00e5 tags \u2013 f.eks. Husk, at det, du ser i kildekoden, nogle gange ikke er det fulde billede. Scripts \u00e6ndrer DOM-elementer efter indl\u00e6sning, s\u00e5 siden i realtid kan se anderledes ud. Det er her, Inspect hj\u00e6lper, fordi det viser den *faktiske* kode, du interagerer med, ikke kun den originale HTML.<\/p>\n Helt \u00e6rligt? Det kan v\u00e6re lidt rodet nogle gange \u2013 scripts indl\u00e6ses asynkront, og DOM’er \u00e6ndres i farten. Men at f\u00e5 styr p\u00e5 det grundl\u00e6ggende g\u00f8r det meget nemmere at debugge eller bare at l\u00e6re. Fordi Chrome selvf\u00f8lgelig skal g\u00f8re det lidt kompliceret.<\/p>\n","protected":false},"excerpt":{"rendered":" At unders\u00f8ge kildekoden p\u00e5 en HTML-side er en slags magtfaktor, is\u00e6r hvis du er i gang med webudvikling eller bare pr\u00f8ver at finde ud af, hvad der f\u00e5r et websted til at fungere. Nogle gange indl\u00e6ser websteder scripts eller stilarter dynamisk, s\u00e5 den faktiske kode, du ser p\u00e5 siden, er ikke hele historien. Det er […]<\/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-10896","post","type-post","status-publish","format-standard","hentry","category-how-to"],"acf":[],"_links":{"self":[{"href":"https:\/\/howtogeek.blog\/da\/wp-json\/wp\/v2\/posts\/10896","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=10896"}],"version-history":[{"count":1,"href":"https:\/\/howtogeek.blog\/da\/wp-json\/wp\/v2\/posts\/10896\/revisions"}],"predecessor-version":[{"id":10897,"href":"https:\/\/howtogeek.blog\/da\/wp-json\/wp\/v2\/posts\/10896\/revisions\/10897"}],"wp:attachment":[{"href":"https:\/\/howtogeek.blog\/da\/wp-json\/wp\/v2\/media?parent=10896"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/howtogeek.blog\/da\/wp-json\/wp\/v2\/categories?post=10896"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/howtogeek.blog\/da\/wp-json\/wp\/v2\/tags?post=10896"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Brug af kontekstmenuen<\/h3>\n
Redigering af URL for at se kilde<\/h3>\n
view-source:<\/code>f\u00f8r websidens URL. S\u00e5 hvis det var https:\/\/www.example.com<\/a>, skal du \u00e6ndre det til view-source:https:\/\/www.example.com<\/a> og trykke p\u00e5 Enter. Dette indl\u00e6ser \u00f8jeblikkeligt den r\u00e5 HTML. Jeg er ikke sikker p\u00e5, hvorfor det virker, men det er super nyttigt p\u00e5 mobilen, n\u00e5r browserens brugergr\u00e6nseflade kan komme i vejen for DevTools. Det er et m\u00e6rkeligt hack, men det redder dagen nogle gange.<\/p>\nAdgang via Chrome-menuen<\/h3>\n
Bliv fortrolig med kildekoden som det grundl\u00e6ggende<\/h2>\n
<p><\/code>afsnit, <div><\/code>containere eller <a><\/code>links. Disse tags fort\u00e6ller browseren, hvad hvert enkelt stykke indhold er. Attributter i tags, som f.eks.class<\/code>eller id<\/code>, giver ekstra information, f.eks.styling eller identifikation af specifikke elementer. For eksempel er MDN’s webside om HTML-elementer<\/a> en god ressource, hvis du farer vild.<\/p>\n