Effektiv bruk av Safari-utviklerverktøy: En omfattende veiledning

I denne veiledningen vil jeg gi deg en grundig innsikt i bruken av utviklerværktøyene til Safari. Selv om utviklerværktøyene i Safari har noen forskjeller sammenlignet med de i Chrome og Firefox, forblir grunnprinsippet det samme. Du vil lære hvordan du aktiverer utviklerværktøyene, bruker de ulike områdene og funksjonene, og gjennomfører viktige feilsøkings-prosesser. La oss starte med de viktigste erkjennelsene.

Viktigste erkjennelser

• Utviklerværktøyene i Safari er ikke like lett tilgjengelig som i andre nettlesere, da de må aktiveres via innstillingene.
• Grensesnittet og funksjonene til utviklerværktøyene ligner på de i andre nettlesere, men de spesifikke implementasjonene varierer.
• Feilsøking på iOS-enheter er mulig med Safari ved å koble enheten til via USB.

Trinn-for-trinn-veiledning

1. Aktivering av utviklerværktøy i Safari

For å aktivere utviklerværktøyene i Safari må du tilpasse Safari-innstillingene. Start Safari og gå til menylinjen. Velg "Safari" og deretter "Innstillinger".

Gå til fanen "Avansert" helt til høyre. Der finner du alternativet "Vis utviklingsverktøy for webutviklere". Aktiver dette alternativet for å aktivere utviklerværktøyene.

2. Tilgang til utviklerværktøyene

Når utviklerværktøyene er aktivert, kan du åpne dem via menyen "Utvikle" i menylinjen eller ved hjelp av bestemte tastekombinasjoner. Direkte tilgang via tastene F12 eller Alt-Cmd-I fungerer ikke, men du kan for eksempel høyreklikke på elementet og velge "Undersøk element".

Du kan også bruke tastekombinasjonen Cmd+Option+C for å åpne konsollen og bytte mellom ulike visninger.

3. Navigering gjennom utviklerværktøyene

Grensesnittet til utviklerværktøyene ser kanskje likt ut som du er vant til fra andre nettlesere, men de har noen spesielle avvik. I sidefeltet til venstre kan du bytte mellom fanene "Elementer", "Konsoll", "Kilder", "Nettverk" og flere.

Her kan du få mer informasjon om elementene på nettstedet for å vise og redigere deres stiler og layouter. Du kan redigere enhver stil ved å klikke på de tilhørende CSS-reglene.

4. Arbeid med konsollen

Konsollen i Safari lar deg kjøre JavaScript-kode og vise ønskede utganger. En interessant aspekt er at formateringen av utgangene her er annerledes. Det første argumentet vises som tekst, mens alle påfølgende argumenter vises som JavaScript-objekter.

Når du skriver ut ekstra loggmeldinger, sørg for at visningen ikke har mellomrom mellom de enkelte argumentene, men at de er adskilt med streker. Dette kan være viktig for å unngå misforståelser under feilsøkingen.

5. Sette kildekode og breakpoints

I fanen "Kilder" kan du se de opprinnelige filene og transpilerte filene til nettstedet ditt. Her kan du også sette breakpoints for å lette feilsøkingen. Klikk bare på den relevante kodelinjen for å gjøre det.

Husk også å bruke de ulike kontrollene for å lette gjennomgangen av koden. I Safari er snarveien for å trå inn annerledes; i stedet bruker du spesifikke symboler.

6. Gjennomføre nettverksanalyser

I fanen "Nettverk" får du omfattende informasjon om alle forespørslene nettstedet ditt gjør mens det lastes. Her kan du se de sendte og mottatte forespørslene, samt deres overskrifter og forhåndsvisninger.

En interessant funksjon her er forskjellen mellom overskriftene og timingene, som gir deg et dypere innblikk i ytelsen til nettsiden din.

7. Bruk av ytelsesmålinger og tidslinjer

I fanen "Tidslinjer" kan du utføre omfattende ytelsesanalyser og lage opptak for å bedre forstå hastigheten og prosessene på nettsiden din.

Denne funksjonen fungerer på en lignende måte som ytelsesprofilene i andre nettlesere, men du må kanskje venne deg til noen forskjeller i visningen og navngivningen.

8. Debugging på mobile enheter

En spesiell funksjon i Safari Developer Tools er muligheten til å debugge nettsider på din iPhone eller iPad. Koble enheten din via USB og aktiver de relevante feilsøkingsalternativene i enhetsinnstillingene.

Gå deretter til "Utvikler"-menyen og velg den tilkoblede enheten din for å få tilgang til de åpne vinduene og deres Developer Tools.

Oppsummering

I denne omfattende veiledningen har du lært hvordan du aktiverer Safari Developer Tools, bruker de ulike funksjonene og fanene, og utfører feilsøking på mobile enheter. De fleste funksjonene ligner på verktøyene i andre nettlesere, men det er spesielle forskjeller, spesielt når det gjelder brukergrensesnittet og snarveiene. Når du blir kjent med det, vil feilsøking i Safari gå raskt for hånden.