Effektiv brug af Safari-udviklerværktøjer: En omfattende vejledning

I denne vejledning vil jeg gerne give dig en grundig gennemgang af, hvordan du bruger Safaris udviklerværktøjer. Selvom udviklerværktøjerne i Safari har nogle forskelle i forhold til dem i Chrome og Firefox, er det grundlæggende princip det samme. Du vil lære, hvordan du aktiverer udviklerværktøjerne, bruger de forskellige områder og funktioner og gennemfører vigtige fejlsøgningsprocesser. Lad os starte med de vigtigste indsigter.

De vigtigste konklusioner

• Udviklerværktøjerne i Safari er ikke så let tilgængelige som i andre browsere, da de skal aktiveres via indstillingerne.
• Brugergrænsefladen og funktionerne i udviklerværktøjerne er de samme som i andre browsere, men de specifikke implementeringer varierer.
• Fejlfinding på iOS-enheder er mulig med Safari ved at tilslutte enheden via USB.

Trin-for-trin instruktioner

1. Aktivér udviklerværktøjerne i Safari

For at aktivere Developer Tools i Safari skal du justere Safari-indstillingerne. Start Safari, og gå til menulinjen. Vælg "Safari" og derefter "Indstillinger".

Skift til fanen "Avanceret" yderst til højre. Der finder du indstillingen "Vis udviklingsfunktioner for webudviklere". Aktivér denne mulighed for at aktivere udviklerværktøjerne.

2. Adgang til udviklerværktøjerne

Så snart udviklerværktøjerne er aktiveret, kan du åbne dem via menuen "Develop" i menulinjen eller ved at bruge bestemte tastekombinationer. Direkte adgang via tasterne F12 eller Alt-Cmd-I fungerer ikke, men man kan f.eks. højreklikke på elementet og vælge "Examine element".

Du kan også bruge tastekombinationen Cmd+Option+C til at åbne konsollen og skifte frem og tilbage mellem forskellige visninger.

3. Navigation gennem udviklerværktøjerne

Selvom brugergrænsefladen i Developer Tools ligner det, du er vant til fra andre browsere, har de nogle særlige forskelle. I venstre sidebjælke kan du skifte mellem fanerne "Elements", "Console", "Sources", "Network" og andre.

Her kan du lære mere om hjemmesidens elementer og se og redigere deres stilarter og layouts. Du kan redigere hver stil ved blot at klikke på de tilsvarende CSS-regler.

4. Arbejde med konsollen

Konsollen i Safari giver dig mulighed for at udføre JavaScript-kode og vise de ønskede resultater. Et spændende aspekt er, at formateringen af output er anderledes her. Det første argument vises som tekst, mens alle efterfølgende argumenter vises som JavaScript-objekter.

Hvis du udsender yderligere logmeddelelser, skal du sørge for, at der ikke er mellemrum mellem de enkelte argumenter, men at de er adskilt af bindestreger. Det kan være vigtigt for at undgå misforståelser under fejlsøgningen.

5. Indstil kildekode og breakpoints

På fanen "Kilder" kan du se de originale filer og de transpilerede filer på din hjemmeside. Det er også muligt at indstille breakpoints her for at gøre fejlsøgningen lettere. For at gøre dette skal du blot klikke på den tilsvarende kodelinje.

Glem ikke at bruge de forskellige kontroller til at gøre det lettere at gå gennem koden. I Safari er genvejen til stepping anderledes; brug i stedet specifikke ikoner.

6. Udfør netværksanalyser

Fanen "Netværk" giver dig omfattende information om alle de forespørgsler, din side foretager under indlæsningstiden. Her kan du se de anmodninger, der sendes og modtages, samt deres overskrifter og forhåndsvisninger.

En interessant funktion her er sondringen mellem headers og timings, som giver dig en dybere indsigt i dit sites performance.

7. Brug præstationsmålinger og tidslinjer

På fanen "Timelines" kan du lave omfattende performance-analyser og optagelser for bedre at forstå hastigheden og processerne på dit site.

Denne funktion fungerer på samme måde som præstationsprofilerne i andre browsere, men du skal måske vænne dig til nogle forskelle i visning og navngivning.

8 Fejlfinding på mobile enheder

Et særligt højdepunkt i Safari Developer Tools er muligheden for at debugge websites på din iPhone eller iPad. Tilslut din enhed via USB, og aktiver de tilsvarende debugging-muligheder i enhedens indstillinger.

Gå derefter til menuen "Develop", og vælg din tilsluttede enhed for at få adgang til de åbne vinduer og deres Developer Tools.

Opsummering

I denne detaljerede vejledning har du lært, hvordan du aktiverer Safari Developer Tools, bruger de forskellige funktioner og faner og udfører debugging på mobile enheder. De fleste af funktionerne ligner værktøjerne i andre browsere, men der er visse forskelle, især i brugergrænsefladen og genvejene. Når du har sat dig ind i dem, vil du hurtigt kunne debugge i Safari.