At være en webudvikler i nutidens verden betyder at støtte et væld af enheder og platforme, som nogle gange kan vise sig at være en skræmmende opgave. Selv med den mest veludformede kode, der overholder de nyeste webstandarder, kan du stadig opdage, at dele af dit websted muligvis ikke ser eller virker som du vil have dem på bestemte enheder eller opløsninger. Når man står over for udfordringen med at støtte så mange forskellige scenarier, kan det være uvurderligt at have de rigtige simuleringsværktøjer til din rådighed.
Hvis du er en af de mange programmører, der bruger en Mac, har Safari's udvikler værktøjssæt altid været til nytte. Med udgivelsen af Safari 9 er bredden af denne funktionalitet vokset betydeligt, hovedsagelig på grund af Responsive Design Mode, som giver dig mulighed for at forhåndsvise, hvordan dit websted vil gøre ved forskellige skærmopløsninger såvel som på forskellige iPad-, iPhone- og iPod touch-builds.
Denne vejledning beskriver, hvordan du aktiverer Responsive Design Mode, samt hvordan du bruger det til dine udviklingsbehov.
Safari præferencer
Først skal du åbne din Safari-browser.
Klik på Safari i browsermenuen, der er placeret øverst på skærmen. Når rullemenuen vises, skal du vælge Indstillinger mulighed cirkuleret i det viste eksempel.
Bemærk: Du kan bruge følgende tastaturgenvej i stedet for det ovennævnte menupunkt: COMMAND + COMMA (,)
02 af 05Vis Udviklingsmenu
Safari-dialogboksen skal nu vises, hvor du overlejrer dit browservindue. Først skal du klikke på Fremskreden ikon repræsenteret af et gear og placeret i øverste højre hjørne af vinduet.
Browseren Avancerede indstillinger skal nu være synlige. Nederst er en mulighed ledsaget af en afkrydsningsfelt, mærket Vis udvikle menuen i menulinjen og cirklede i eksemplet ovenfor. Klik på afkrydsningsfeltet en gang for at aktivere denne menu.
03 af 05Indtast Responsive Design Mode
En ny mulighed skal nu være tilgængelig i din Safari-menu, der er placeret øverst på skærmen, mærket Udvikle. Klik på denne indstilling.
Når rullemenuen vises, skal du vælge Indtast Responsive Design Modecirklede i det viste eksempel.
Bemærk: Du kan bruge følgende tastaturgenvej i stedet for det ovennævnte menupunkt:OPTION + COMMAND + R
04 af 05Responsive Design Mode
Den aktive webside skal nu vises i Responsive Design Mode, som vist i eksemplet ovenfor. Ved at vælge en af de iOS-enheder, der er angivet, f.eks. IPhone 6 eller en af de angivne skærmopløsninger, som f.eks. 800 x 600, kan du straks se, hvordan siden vil blive vist på den pågældende enhed eller i den pågældende skærmopløsning.
Ud over de viste enheder og opløsninger kan du også instruere Safari til at simulere en anden brugeragent - f.eks. En fra en anden browser - ved at klikke på rullemenuen vist direkte over opløsningsikoner.
05 af 05Udvikle menu: Andre muligheder
Udover Responsive Design Mode indeholder Safari 9's Develop-menuen mange andre nyttige muligheder, hvoraf nogle er angivet nedenfor.
- Åbn side med: Giver dig mulighed for at åbne den aktive webside i enhver anden browser, der for øjeblikket er installeret på din Mac.
- Brugeragent: Ved at ændre brugeragenten får webserverne til at identificere din browser som noget andet end Safari 9.
- Slut Web Inspector: Safari 9s webinspektør viser alle en websides ressourcer, hvilket giver mulighed for at gennemgå CSS-oplysninger, DOM-metrics og struktur samt den oprindelige kildekode.
- Vis fejlkonsol: En af de mest anvendte muligheder i Udviklingsmenuen viser denne konsol JavaScript, HTML og XML fejl og advarsler.
- Vis side Kilde: Tillader dig at se og søge på den aktive websides kildekode.
- Vis side ressourcer: Hvis du vælger denne indstilling, vises dokumenter, scripts, CSS og andre ressourcer fra den aktuelle side.
- Vis uddragsredigering: Giver mulighed for at redigere og udføre fragmenter af kode, i modsætning til en komplet side. Denne funktion er meget nyttig ud fra et testperspektiv.
- Vis udvidelsesbygger: Tillader dig at opbygge dine egne Safari-udvidelser ved at pakke din kode i overensstemmelse hermed og tilføje metadata.
- Start Timeline Recording: Optager en række elementer, herunder netværksanmodninger, JavaScript-udførelse, sidegengivelse og andre begivenheder i en brugerdefineret periode, der alle kan ses i WebKit Inspector.
- Tomme caches: Hvis du klikker på denne mulighed, slettes alle gemte cache i Safari, ikke kun standardwebstedets cache-filer.
- Deaktiver Caches: Når caching er deaktiveret, downloades ressourcer fra et websted hver gang en adgangsforespørgsel foretages i modsætning til at udnytte den lokale cache.
- Tillad JavaScript fra Smart Search Field: Deaktiveret som standard af sikkerhedsmæssige årsager, giver denne funktion dig mulighed for at indtaste webadresser, der indeholder JavaScript, i Safaris adresselinje.
- Behandle SHA-1-certifikater som usikre: Kort for Secure Hash Algorithm har SHA-1 hash-funktionen vist sig at være mindre sikker end oprindeligt tænkt, og dermed tilføjelsen af denne mulighed i Safari 9.
