Brug Chrome-udviklerværktøjer effektivt (tutorial)

Optimer dine hjemmesider med Chrome-udviklerværktøjerne

En fejlfri hjemmeside, der indlæses super hurtigt og ser godt ud på enhver skærmstørrelse?! For at opnå dette skal du analysere og optimere din sides kode. Chrome-udviklerværktøjerne er fantastiske til dette formål. Med dem kan du opdage fejl i din HTML, CSS og JavaScript-kode. Derudover kan du grundigt undersøge ydelsen, kodeeksekveringer og hukommelsesforbrug. Brug disse erkendelser til at redigere dine sider målrettet og øge dine siders synlighed gennem fejlfinding og optimering.

Denne over seks timer lange tutorial af softwareudvikler og træner Stephan Haewß lærer dig, hvordan du effektivt anvender Chrome-udviklerværktøjerne, lige fra grundlæggende til avancerede teknikker - for en ren og kraftfuld præsentation af dine sider!

HTML, CSS, JavaScript - Fejlfinding for rene, hurtige hjemmesider med optimerede layouts

Kurset begynder med en introduktion til Chrome-udviklerværktøjerne, som er tilgængelige direkte i browseren. Du lærer, hvad DevTools er, og hvordan du grundlæggende kan anvende dem. Derefter fokuserer du på fanen Elements, hvor du kan inspicere og redigere styling, layout og udseende på dine sider. Med områderne Sources og Console udfører du script-fejlfinding. Derudover lærer du, hvordan du opnår netværksanalyse samt ydeevne- og hukommelsesoptimering ved hjælp af Chrome-udviklerværktøjerne. Til sidst får du et overblik over DevTools fra andre browsere. Kurset egner sig derfor til alle webudviklere, der ønsker at fejlfinde og optimere websider ved hjælp af Chrome DevTools.

Effektiv anvendelse af Chrome DevTools - oversigt over tutorialens indhold

• Introduktion til Chrome DevTools: Kurset viser dig, hvordan du åbner DevTools, navigerer i dem og effektivt bruger de vigtigste funktioner til redigering og fejlfinding af HTML, CSS og JavaScript.
• Fejlfinding af HTML og CSS: Hvordan du gennemgår DOM-træet på en webside, redigerer HTML og CSS direkte i live-tilstand og dermed øjeblikkeligt løser layoutproblemer og CSS-stylingfejl - optimalt til hurtig test og tilpasning af designet, inden ændringerne gøres permanente.
• Fejlfinding af JavaScript: Lær hvordan du indlæser JavaScript-filer, sætter breakpoints og gradvist gennemløber koden. Variabler og objekter kan undersøges i realtid, mens CallStack gør det lettere at spore funktionssamtaler tilbage - ideelt til præcis fejlfinding.
• Brug af konsollen: Chrome Development Tools-konsollen tillader åbning og analyse af logs, udførelse af JavaScript-kode samt direkte manipulation af webelementer. Ved hjælp af målrettede logudgange kan du grundigt analysere og optimere koden, hvilket væsentligt letter fejlfinding og ydelsesforbedring.
• Ydeevneoptimering: Gennemgå netværksforespørgsler og indlæsningstider, overvåg hukommelsesforbrug og identificer hukommelseslækager. Ved at optimere JavaScript-ydelsen målrettet og udføre detaljerede ydelsesanalyser af applikationer kan indlæsningstid og ressourcestyring effektivt forbedres.
• Avancerede teknikker: Chrome DevTools' Application-panel giver dig adgang til webopbevaring som LocalStorage, IndexedDB og Cache samt administration af servicearbejdere og manifester. Derudover kan udvidelser som React-DevTools integreres for at fejlfinde bedre i reaktive applikationer. Tilpasselige indstillinger tilbyder desuden optimal konfiguration af DevTools til individuelle arbejdskrav.