Innehåll
- Få tillgång till utvecklarverktyg i Apples webbläsare
- Hur man aktiverar responsivt designläge i Safari
- Safari Developer Tools
Få tillgång till utvecklarverktyg i Apples webbläsare
Att se till att webbplatser och webbappar stöder en mängd enheter och plattformar är en viktig uppgift för webbutvecklare. Apples Safari-webbläsare innehåller ett responsivt designläge som låter dig förhandsgranska hur din webbplats kommer att visas vid olika skärmupplösningar och på olika iPad-, iPhone- och iPod touch-byggnader.
Instruktioner i den här artikeln gäller Safari 13 för macOS. Responsive Design-läge är inte tillgängligt i Windows-versionen.
Hur man aktiverar responsivt designläge i Safari
För att aktivera Safaris utvecklarverktyg och läge för responsiv design:
-
Välj Safari > Inställningar i Safari-verktygsfältet.
Du kan också använda kortkommandot Kommando+Kommatecken (,) för att öppna menyn Inställningar.
-
Välj inställningsmenyn Avancerad fliken och markera rutan bredvid Visa Utveckla-menyn i menyraden. Ett nytt alternativ ska nu vara tillgängligt i Safari-verktygsfältet högst upp på skärmen.
-
Välj Utveckla > Gå in i responsivt designläge i Safari-verktygsfältet.
Du kan också använda kortkommandot Alternativ+Kommando+R för att gå in i Responsive Design Mode.
-
Den aktiva webbsidan ska nu visas i responsiv designläge. Välj en iOS-enhet eller en skärmupplösning längst upp på sidan för att se hur sidan kommer att visas.
Du kan också instruera Safari att simulera olika användaragenter med hjälp av rullgardinsmenyn direkt ovanför upplösningsikonerna.
Safari Developer Tools
Utöver läget för responsiv design erbjuder Safaris utvecklingsmeny många andra användbara alternativ inklusive:
- Öppna sidan med: Öppna den aktiva webbsidan i någon annan webbläsare som för närvarande är installerad på din Mac.
- Användaragent: Att byta användaragent gör att webbservrar identifierar din webbläsare som något annat än Safari.
- Anslut webbinspektör: Visa alla webbsidans resurser inklusive CSS-information och DOM-statistik.
- Visa felkonsol: Visa JavaScript-, HTML- och XML-fel och varningar.
- Visa sidkälla: Visa och sök på den aktiva webbsidans källkod.
- Visa sidresurser: Visa dokument, skript, CSS och andra resurser från den aktuella sidan.
- Visa utdragsredigeraren: Redigera och köra fragment av kod. Denna funktion är mycket användbar ur ett testperspektiv.
- Show Extension Builder: Bygg dina egna Safari-tillägg genom att förpacka din kod i enlighet därmed och lägga till metadata.
- Starta tidslinjeinspelning: Spela in nätverksbegäranden, exekvering av JavaScript, rendering av sidor och andra händelser inom WebKit Inspector.
- Tömma cachar: Ta bort alla lagrade cacheminne i Safari, inte bara de vanliga cache-filerna på webbplatsen.
- Inaktivera cacheminne: När cache är inaktiverat laddas resurser ned från en webbplats varje gång en åtkomstbegäran görs i motsats till att använda den lokala cachen.
- Tillåt JavaScript från smart sökfält: Inaktiverad som standard av säkerhetsskäl, den här funktionen låter dig ange webbadresser som innehåller JavaScript i Safaris adressfält.
- Behandla SHA-1-certifikat som osäkra: Förkortning för Secure Hash Algoritm, SHA-1-hashfunktionen har visat sig vara mindre säker än vad som ursprungligen trott, därmed tillägget av detta alternativ i Safari.
