Å være en webutvikler i dagens verden betyr å støtte en mengde enheter og plattformer, som noen ganger kan vise seg å være en skremmende oppgave. Selv med den mest godt utformede koden som overholder de nyeste webstandardene, kan du likevel oppdage at deler av nettstedet ditt ikke ser ut eller fungerer slik du vil at de skal på bestemte enheter eller vedtak. Når du står overfor utfordringen med å støtte et så bredt utvalg av scenarier, kan det være uvurderlig å ha de riktige simuleringsverktøyene til din disposisjon.
Hvis du er en av de mange programmørene som bruker en Mac, har Safaris verktøysett alltid vært nyttig. Med utgivelsen av Safari 9 har bredden av denne funksjonaliteten blitt utvidet betraktelig, hovedsakelig på grunn av Responsive Design Mode, som lar deg forhåndsvise hvordan nettstedet ditt skal gjengis ved ulike skjermoppløsninger, samt på ulike iPad-, iPhone- og iPod touch-bygg.
Denne opplæringen beskriver hvordan du aktiverer Responsive Design Mode, samt hvordan du bruker den til dine utviklingsbehov.
Safari-preferanser
Først åpner du Safari-nettleseren din.
Klikk på Safari i nettlesermenyen, plassert øverst på skjermen. Når rullegardinmenyen vises, velger du Preferanser alternativet sirklet i det viste eksemplet.
Merk: Du kan bruke følgende snarvei i stedet for det nevnte menypunktet: COMMAND + COMMA (,)
02 av 05Vis utviklingsmeny
Safari-dialogboksen skal nå vises, overlegger nettleservinduet. Først klikker du på Avansert ikonet representeres av et gir og ligger i øvre høyre hjørne av vinduet.
Nettleserens avanserte preferanser skal nå være synlige. På bunnen er et alternativ ledsaget av en avmerkingsboks, merket Vis Utvikle-menyen i menylinjen og sirklet i eksemplet ovenfor. Klikk på avkrysningsruten en gang for å aktivere denne menyen.
03 av 05Skriv inn Responsive Design Mode
Et nytt alternativ bør nå være tilgjengelig i Safari-menyen din, plassert øverst på skjermen, merket Utvikle. Klikk på dette alternativet.
Når rullegardinmenyen vises, velger du Skriv inn Responsive Design Modesirklet i det viste eksemplet.
Merk: Du kan bruke følgende snarvei i stedet for det nevnte menypunktet:OPTION + COMMAND + R
04 av 05Responsive Design Mode
Den aktive nettsiden skal nå vises i Responsive Design Mode, som vist i eksemplet ovenfor. Ved å velge en av de iOS-enhetene som er oppført, for eksempel iPhone 6, eller en av de angitte skjermoppløsningene som er tilgjengelige, for eksempel 800 x 600, kan du umiddelbart se hvordan siden skal gjengis på den enheten eller i denne skjermoppløsningen.
I tillegg til de viste enhetene og resolusjonene kan du også instruere Safari til å simulere en annen brukeragent - for eksempel en fra en annen nettleser - ved å klikke på rullegardinmenyen som vises rett over oppløsningsikonene.
05 av 05Utvikle meny: Andre alternativer
I tillegg til Responsive Design Mode, tilbyr Safari 9s utviklingsmeny mange andre nyttige alternativer, hvorav noen er oppført nedenfor.
- Åpne side med: Lar deg åpne den aktive nettsiden i en hvilken som helst annen nettleser som for øyeblikket er installert på din Mac.
- Bruker agent: Hvis du endrer brukeragenten, får webserverne til å identifisere nettleseren din som noe annet enn Safari 9.
- Koble Web Inspector: Safari 9s Web Inspector viser alle nettsidens ressurser, og gir muligheten til å lese CSS-informasjon, DOM-beregninger og struktur, samt den opprinnelige kildekoden.
- Vis feilkonsoll: En av de mest brukte alternativene i utviklingsmenyen, viser denne konsollen JavaScript, HTML og XML-feil og advarsler.
- Vis side Kilde: Lar deg se og søke på den aktive nettsiden kildekoden.
- Vis side ressurser: Hvis du velger dette alternativet, vises dokumenter, skript, CSS og andre ressurser fra gjeldende side.
- Vis utklippsredigerer: Gir muligheten til å redigere og gjennomføre fragmenter av kode, i motsetning til en komplett side. Denne funksjonen er veldig nyttig fra et testperspektiv.
- Vis utvidelsesbygger: Lar deg bygge dine egne Safari-utvidelser ved å pakke inn koden din og legge til metadata.
- Start Timeline Recording: Registrerer en rekke elementer, inkludert nettverksforespørsler, JavaScript-utførelse, sidegengivelse og andre hendelser for en brukerdefinert periode, alle tilgjengelige i WebKit Inspector.
- Tomme kufferter: Hvis du klikker på dette alternativet, slettes alt lagret cache i Safari, ikke bare standardwebbens cache-filer.
- Deaktiver Caches: Når caching er deaktivert, lastes ressurser ned fra et nettsted hver gang en tilgangsforespørsel blir gjort i motsetning til bruk av den lokale cachen.
- Tillat JavaScript fra Smart Search Field: Deaktivert som standard av sikkerhetshensyn, lar denne funksjonen deg legge inn nettadresser som inneholder JavaScript i adressefeltet til Safari.
- Behandle SHA-1-sertifikater som usikre: Kort for Secure Hash Algorithm har SHA-1 hash-funksjonen vist seg å være mindre sikker enn opprinnelig tenkt, og dermed tillegget av dette alternativet i Safari 9.
