Effektiv användning av Safari Developer Tools: En omfattande guide

I denna handledning kommer jag att ge dig en grundlig insikt i hur du använder utvecklarverktygen i Safari. Även om utvecklarverktygen i Safari har vissa skillnader jämfört med de i Chrome och Firefox, förblir grundprincipen densamma. Du kommer att lära dig hur du aktiverar utvecklarverktygen, använder olika områden och funktioner samt genomför väsentliga debuggings-processer. Låt oss börja direkt med de viktigaste insikterna.

Viktigaste insikter

• Utvecklarverktygen i Safari är inte lika lättillgängliga som i andra webbläsare eftersom de måste aktiveras via inställningarna.
• Utvecklarmiljön och funktionerna i utvecklarverktygen liknar andra webbläsare, men de specifika implementeringarna varierar.
• Debugging på iOS-enheter är möjligt med Safari genom att koppla enheten med USB.

Steg-för-steg-handledning

1. Aktivera utvecklarverktygen i Safari

För att aktivera utvecklarverktygen i Safari måste du anpassa Safari-inställningarna. Starta Safari och gå till menyraden. Välj "Safari" och sedan "Inställningar".

Gå till fliken "Avancerat" längst till höger. Där hittar du alternativet "Visa utvecklarverktyg för webbutvecklare". Aktivera detta alternativ för att aktivera utvecklarverktygen.

2. Åtkomst till utvecklarverktygen

När utvecklarverktygen är aktiverade kan du öppna dem via menyn "Utveckla" i menyraden eller med hjälp av vissa tangentkombinationer. Direkt tillgång via tangenterna F12 eller Alt-Cmd-I fungerar inte, men du kan till exempel högerklicka på elementet och välja "Inspektera element".

Du kan också använda tangentkombinationen Cmd+Option+C för att öppna konsolen och växla mellan olika vyer.

3. Navigering genom utvecklarverktygen

Utvecklarverktygens gränssnitt ser visserligen liknande ut som du är van vid från andra webbläsare, men de har vissa speciella avvikelser. I den vänstra sidofältet kan du växla mellan flikarna "Element", "Konsol", "Källor", "Nätverk" och andra.

Här kan du lära dig mer om webbsidans element för att visa och redigera dess stilar och layouter. Du kan redigera varje stil genom att helt enkelt klicka på de relevanta CSS-reglerna.

4. Arbeta med konsolen

Konsolen i Safari låter dig köra JavaScript-kod och visa önskade utmatningar. En intressant aspekt är att formateringen av utmatningarna skiljer sig här. Det första argumentet visas som text medan alla följande argument visas som JavaScript-objekt.

När du loggar ytterligare loggmeddelanden, se till att presentationen inte har mellanslag mellan de enskilda argumenten utan är åtskild med streck. Detta kan vara viktigt för att undvika missförstånd vid debugging.

5. Ställa in källkod och brytpunkter

I fliken "Källor" kan du se originalfiler och transpilerade filer för din webbsida. Här är det också möjligt att ställa in brytpunkter för att underlätta debugging. Klicka helt enkelt på den relevanta kodraden för detta.

Glöm inte att också använda olika kontroller för att underlätta stegningen av koden. I Safari är genvägen för stegning annorlunda; istället använder du specifika symboler.

6. Utföra nätverksanalyser

I fliken "Nätverk" får du omfattande information om alla förfrågningar som din sida gör under dess laddning. Här ser du förfrågningarna som skickas och tas emot, samt deras huvuden och förhandsvisningar.

En intressant funktion här är åtskillnaden mellan headrar och tidpunkterna, som ger dig en djupare insikt i din webbplats prestanda.

7. Använda prestandamätningar och tidslinjer

I fliken "Tidslinjer" kan du göra omfattande prestandaanalyser och spela in för att få en bättre förståelse för hastigheten och aktiviteterna på din webbplats.

Denna funktion fungerar liknande som prestandaprofiler i andra webbläsare, men du kan behöva vänja dig vid vissa skillnader i visningen och namngivningen.

8. Felsökning på mobila enheter

En av höjdpunkterna med Safari Developer Tools är möjligheten att felsöka webbsidor på din iPhone eller iPad. Anslut din enhet via USB och aktivera de relevanta felsökningsalternativen i enhetsinställningarna.

Gå sedan till menyn "Utvecklare" och välj din anslutna enhet för att få tillgång till de öppna fönstren och deras Developer Tools.

Sammanfattning

I denna utförliga guide har du lärt dig hur du aktiverar Safari Developer Tools, använder olika funktioner och flikar samt felsöker på mobila enheter. De flesta funktionerna liknar verktygen i andra webbläsare, men det finns speciella skillnader, framför allt i gränssnittet och genvägarna. När du har bekantat dig med det kommer felsökning i Safari att gå smidigt för dig.