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.
![Effektiv bruk av Safari-utviklertverktøy: En omfattende veiledning Effektiv bruk av Safari-utviklerverktøy: En omfattende veiledning](https://www.tutkit.com/storage/media/text-tutorials/2982/effektive-nutzung-der-safari-developer-tools-eine-umfassende-anleitung-97.webp?tutkfid=226920)
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.
![Effektiv bruk av Safari Developer-verktøy: en omfattende veiledning Effektiv bruk av Safari Developer Tools: En omfattende veiledning](https://www.tutkit.com/storage/media/text-tutorials/2982/effektive-nutzung-der-safari-developer-tools-eine-umfassende-anleitung-104.webp?tutkfid=226923)
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.
![Effektiv bruk av Safari Developer Tools: En omfattende veiledning Effektiv bruk av Safari-utviklerværktøy: En omfattende veiledning](https://www.tutkit.com/storage/media/text-tutorials/2982/effektive-nutzung-der-safari-developer-tools-eine-umfassende-anleitung-144.webp?tutkfid=226925)
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.
![Effektiv bruk av Safari Developer-verktøy: En omfattende veiledning Effektiv bruk av Safari-utviklerværktøy: En omfattende veiledning](https://www.tutkit.com/storage/media/text-tutorials/2982/effektive-nutzung-der-safari-developer-tools-eine-umfassende-anleitung-227.webp?tutkfid=226928)
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.
![Effektiv bruk av Safari Developer Tools: En omfattende veiledning Effektiv bruk av Safari Developer-verktøy: En omfattende guide](https://www.tutkit.com/storage/media/text-tutorials/2982/effektive-nutzung-der-safari-developer-tools-eine-umfassende-anleitung-253.webp?tutkfid=226929)
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.
![Effektiv bruk av Safari Developer-verktøy: En omfattende veiledning Effektiv bruk av Safari Developer Tools: En omfattende veiledning.](https://www.tutkit.com/storage/media/text-tutorials/2982/effektive-nutzung-der-safari-developer-tools-eine-umfassende-anleitung-331.webp?tutkfid=226930)
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.
![Effektiv bruk av Safari Developer Tools: En omfattende veiledning Effektiv bruk av Safari-utviklerverktøy: En omfattende veiledning](https://www.tutkit.com/storage/media/text-tutorials/2982/effektive-nutzung-der-safari-developer-tools-eine-umfassende-anleitung-352.webp?tutkfid=226931)
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.
![Effektiv bruk av Safari Developer-verktøy: En omfattende veiledning Effektiv bruk av Safari Developer Tools: En omfattende veiledning](https://www.tutkit.com/storage/media/text-tutorials/2982/effektive-nutzung-der-safari-developer-tools-eine-umfassende-anleitung-416.webp?tutkfid=226932)
En interessant funksjon her er forskjellen mellom overskriftene og timingene, som gir deg et dypere innblikk i ytelsen til nettsiden din.
![Effektiv bruk av Safari-utviklertools: En omfattende veiledning Effektiv bruk av Safari Developer-verktøy: En omfattende veiledning](https://www.tutkit.com/storage/media/text-tutorials/2982/effektive-nutzung-der-safari-developer-tools-eine-umfassende-anleitung-435.webp?tutkfid=226933)
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.
![Effektiv bruk av Safari Developer Tools: En omfattende veiledning Effektiv bruk av Safari Developer-verktøy: En omfattende veiledning](https://www.tutkit.com/storage/media/text-tutorials/2982/effektive-nutzung-der-safari-developer-tools-eine-umfassende-anleitung-459.webp?tutkfid=226934)
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.
![Effektiv bruk av Safari-utviklerverktøy: En omfattende veiledning Effektiv bruk av Safari Developer-verktøy: En omfattende veiledning](https://www.tutkit.com/storage/media/text-tutorials/2982/effektive-nutzung-der-safari-developer-tools-eine-umfassende-anleitung-482.webp?tutkfid=226935)
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.
![Effektiv bruk av Safari Developer Tools: En omfattende veiledning Effektiv bruk av Safari Developer Tools: En omfattende veiledning](https://www.tutkit.com/storage/media/text-tutorials/2982/effektive-nutzung-der-safari-developer-tools-eine-umfassende-anleitung-534.webp?tutkfid=226936)
Gå deretter til "Utvikler"-menyen og velg den tilkoblede enheten din for å få tilgang til de åpne vinduene og deres Developer Tools.
![Effektiv bruk av Safari-utviklerverktøy: En omfattende veiledning Effektiv bruk av Safari-utviklervesktøy: En omfattende veiledning](https://www.tutkit.com/storage/media/text-tutorials/2982/effektive-nutzung-der-safari-developer-tools-eine-umfassende-anleitung-569.webp?tutkfid=226937)
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.
Ofte stilte spørsmål
Hvordan aktiverer jeg Developer Tools i Safari?Gå til Safari-innstillinger under "Avansert" og aktiver alternativet "Vis utviklingsfunksjoner for nettutviklere".
Hvordan åpner jeg konsollen i Safari?Du kan åpne konsollen ved å trykke Cmd+Option+C eller ved å klikke på "Undersøk element" i kontekstmenyen.
Hva er forskjellene i Safari-konsollen sammenlignet med andre nettlesere?I Safari blir det første argumentet presentert som tekst og de følgende som JavaScript-objekter, og det er ingen mellomrom mellom utgangene.
Kan jeg utføre feilsøking på iPhonen min med Safari?Ja, ved å koble iPhonen din via USB og aktivere feilsøkingsalternativene, kan du feilsøke nettsider på iPhonen din.
Finnes det samme ytelsesanalyse i Safari som i Chrome?Ja, tidslinjefunksjonen i Safari muliggjør lignende ytelsesanalyser, men visningen kan være annerledes.