Att vara en webbutvecklare i dagens värld innebär att stödja en uppsjö av enheter och plattformar, vilket ibland kan visa sig vara en skrämmande uppgift. Även med den mest väl utformade koden som följer de senaste webbstandarderna kan du fortfarande finna att delar av din webbplats kanske inte ser eller fungerar som du vill att de ska ha på vissa enheter eller upplösningar. När du står inför utmaningen att stödja så många olika scenarier kan det vara ovärderligt att ha rätt simuleringsverktyg till ditt förfogande.
Om du är en av de många programmerare som använder en Mac har Safari utvecklarverktyg alltid kommit till nytta. Med utgåvan av Safari 9 har bredden av denna funktionalitet utökats betydligt, främst på grund av Responsive Design Mode, vilket gör att du kan förhandsgranska hur din webbplats kommer att göras vid olika skärmupplösningar, liksom på olika iPad, iPhone och iPod touch-byggnader.
Den här handledningen beskriver hur du aktiverar det responsiva designläget och hur du använder det för dina utvecklingsbehov.
Safari-inställningar
Öppna först Safari-webbläsaren.
Klicka på Safari i webbläsarmenyn, högst upp på skärmen. När rullgardinsmenyn visas väljer du Inställningar alternativet cirkulerat i det visade exemplet.
Notera: Du kan använda följande tangentbordsgenväg istället för ovan nämnda menyalternativ: COMMAND + COMMA (,)
02 av 05Visa utvecklingsmenyn
Safari-inställningsdialogrutan ska nu visas och överlägger ditt webbläsarfönster. Klicka först på Avancerad ikonen representerad av ett redskap och ligger i det övre högra hörnet av fönstret.
Webbläsarens Avancerade inställningar ska nu vara synliga. I botten finns ett alternativ som åtföljs av en kryssruta, märkt Visa utveckla menyn i menyraden och cirklade i exemplet ovan. Klicka på kryssrutan en gång för att aktivera den här menyn.
03 av 05Ange Responsive Design Mode
Ett nytt alternativ ska nu vara tillgängligt i din Safari-meny, som ligger längst upp på skärmen, märkt Utveckla. Klicka på det här alternativet.
När rullgardinsmenyn visas väljer du Ange Responsive Design Modecirklade i det visade exemplet.
Notera: Du kan använda följande tangentbordsgenväg istället för ovan nämnda menyalternativ:OPTION + COMMAND + R
04 av 05Responsive Design Mode
Den aktiva webbsidan ska nu visas i Responsive Design Mode, som visas i exemplet ovan. Genom att välja en av de listade iOS-enheterna, som iPhone 6 eller en av de angivna skärmupplösningarna, som t.ex. 800 x 600, kan du omedelbart se hur sidan ska visas på den enheten eller i den här skärmupplösningen.
Utöver de visade enheterna och resolutionerna kan du också instruera Safari att simulera ett annat användaragent - som en från en annan webbläsare - genom att klicka på rullgardinsmenyn som visas direkt ovanför upplösningsikonen.
05 av 05Utveckla meny: Övriga alternativ
Förutom Responsive Design Mode erbjuder Safari 9s utvecklingsmeny många andra användbara alternativ, av vilka några är listade nedan.
- Öppna sidan med: Låter dig öppna den aktiva webbsidan i en annan webbläsare som för tillfället är installerad på din Mac.
- Användaragent: Om du ändrar användaragenten får webbservrar att identifiera din webbläsare som något annat än Safari 9.
- Anslut webbinspektör: Safari 9s webbinspektör visar alla webbsidans resurser, vilket ger möjlighet att läsa igenom CSS-information, DOM-statistik och struktur samt dess ursprungliga källkod.
- Visa felkonsol: Ett av de mest använda alternativen i utvecklingsmenyn visar denna konsol JavaScript, HTML och XML fel och varningar.
- Visa sidokälla: Gör att du kan visa och söka på den aktiva webbsidans källkod.
- Visa sidresurser: Om du väljer det här alternativet visas dokument, skript, CSS och andra resurser från den aktuella sidan.
- Visa redigeringsredigerare: Ger möjlighet att redigera och exekvera fragment av kod, i motsats till en komplett sida. Denna funktion är mycket användbar ur ett testperspektiv.
- Visa Extension Builder: Gör det möjligt att bygga egna Safari-förlängningar genom att förpacka din kod i enlighet med detta och lägga till metadata.
- Starta Timeline Recording: Registrerar ett antal objekt, inklusive nätverksförfrågningar, JavaScript-körning, sidaåtergivning och andra händelser för en användardefinierad period som alla kan ses i WebKit Inspector.
- Tomma kakor: Genom att klicka på det här alternativet raderas all lagrad cache inom Safari, inte bara standardwebbplatsens cachefiler.
- Inaktivera Caches: Med caching inaktiverad hämtas resurser från en webbplats varje gång en åtkomstförfrågan görs i motsats till att använda den lokala cachen.
- Tillåt JavaScript från Smart Search Field: Inaktiverad som standard av säkerhetsskäl kan du med denna funktion skriva in webbadresser som innehåller JavaScript i Safari adressfält.
- Behandla SHA-1-certifikat som osäkra: Kort för Secure Hash Algorithm har SHA-1 hash-funktionen visat sig vara mindre säker än vad som ursprungligen trodde, följaktligen tillägget av det här alternativet i Safari 9.
