Als webontwikkelaar in de wereld van vandaag betekent het ondersteunen van een groot aantal apparaten en platforms, wat soms een ontmoedigende taak kan zijn. Zelfs met de meest goed ontworpen code die voldoet aan de nieuwste webstandaarden, kunt u nog steeds merken dat bepaalde delen van uw website er niet uitzien zoals u wilt op bepaalde apparaten of resoluties. Wanneer u voor de uitdaging staat om een dergelijk breed scala aan scenario's te ondersteunen, kan het van onschatbare waarde zijn om over de juiste simulatietools te beschikken.
Als je een van de vele programmeurs bent die een Mac gebruiken, is Safari's toolset voor ontwikkelaars altijd handig geweest. Met de release van Safari 9 is de breedte van deze functionaliteit aanzienlijk uitgebreid, voornamelijk dankzij de Responsive Design-modus, waarmee u een voorbeeld kunt bekijken van hoe uw site wordt weergegeven op verschillende schermresoluties en op verschillende iPad-, iPhone- en iPod touch-builds.
In deze zelfstudie wordt beschreven hoe u de Responsive Design-modus kunt activeren en hoe u deze kunt gebruiken voor uw ontwikkelingsbehoeften.
Safari-voorkeuren
Open eerst je Safari-browser.
Klik op Safari in het browsermenu bovenaan het scherm. Wanneer het vervolgkeuzemenu verschijnt, selecteert u de voorkeuren optie omcirkeld in het getoonde voorbeeld.
Notitie: U kunt de volgende sneltoets gebruiken in plaats van het eerder genoemde menu-item: COMMAND + COMMA (,)
02 van 05Toon ontwikkelmenu
Het voorkeurenvenster van Safari moet nu worden weergegeven, die over uw browservenster heen ligt. Klik eerst op de gevorderd pictogram weergegeven door een versnelling en bevindt zich in de rechterbovenhoek van het venster.
De geavanceerde voorkeuren van de browser moeten nu zichtbaar zijn. Onderaan is een optie met een selectievakje, gelabeld Toon Ontwikkelingsmenu in menubalk en omcirkeld in het bovenstaande voorbeeld. Klik eenmaal op het selectievakje om dit menu te activeren.
03 of 05Ga naar de responsieve ontwerpmodus
Een nieuwe optie zou nu beschikbaar moeten zijn in uw Safari-menu, bovenaan het scherm, gelabeld Ontwikkelen. Klik op deze optie.
Wanneer het vervolgkeuzemenu verschijnt, selecteert u Ga naar de responsieve ontwerpmodusomcirkeld in het getoonde voorbeeld.
Notitie: U kunt de volgende sneltoets gebruiken in plaats van het eerder genoemde menu-item:OPTIE + COMMAND + R
04 van 05Responsieve ontwerpmodus
De actieve webpagina moet nu worden weergegeven in de responsieve ontwerpmodus, zoals in het bovenstaande voorbeeld. Door een van de vermelde iOS-apparaten te selecteren, zoals de iPhone 6, of een van de aangegeven schermresoluties, zoals 800 x 600, kunt u onmiddellijk zien hoe de pagina zal worden weergegeven op dat apparaat of in die schermresolutie.
Naast de weergegeven apparaten en resoluties, kunt u Safari ook instrueren om een andere user-agent te simuleren, bijvoorbeeld een uit een andere browser, door te klikken op de vervolgkeuzelijst die direct boven de resolutiepictogrammen wordt weergegeven.
05 of 05Ontwikkel Menu: Andere Opties
Naast de Responsive Design-modus biedt het Develop-menu van Safari 9 nog vele andere handige opties, waarvan sommige hieronder worden opgesomd.
- Open pagina met: Hiermee kunt u de actieve webpagina openen in elke andere browser die momenteel op uw Mac is geïnstalleerd.
- User Agent: Het wijzigen van de user-agent zorgt ervoor dat webservers uw browser identificeren als iets anders dan Safari 9.
- Connect Web Inspector: De Web Inspector van Safari 9 geeft alle bronnen van een webpagina weer, en biedt de mogelijkheid om CSS-informatie, DOM-metrieken en structuur door te nemen, evenals de oorspronkelijke broncode.
- Show Error Console: Een van de meest gebruikte opties in het ontwikkelmenu, deze console geeft JavaScript-, HTML- en XML-fouten en waarschuwingen weer.
- Toon paginabron: Hiermee kunt u de broncode van de actieve webpagina bekijken en doorzoeken.
- Toon paginabronnen: Als u deze optie selecteert, worden documenten, scripts, CSS en andere bronnen van de huidige pagina weergegeven.
- Show Snippet Editor: Biedt de mogelijkheid om fragmenten van code te bewerken en uit te voeren, in tegenstelling tot een complete pagina. Deze functie is erg handig vanuit een testperspectief.
- Toon extensiebouwer: Hiermee kunt u uw eigen Safari-extensies bouwen door uw code dienovereenkomstig in te pakken en metagegevens toe te voegen.
- Start tijdlijnopname: Neemt een aantal items op, waaronder netwerkverzoeken, JavaScript-uitvoering, paginaweergave en andere gebeurtenissen voor een door de gebruiker gedefinieerde periode die alle zichtbaar zijn in de WebKit Inspector.
- Lege caches: Als u op deze optie klikt, wordt alle opgeslagen cache in Safari verwijderd, niet alleen de cache-bestanden van de standaardwebsite.
- Caches uitschakelen: Wanneer caching uitgeschakeld is, worden bronnen telkens van een website gedownload wanneer een toegangsverzoek wordt gedaan, in tegenstelling tot het gebruik van de lokale cache.
- JavaScript toestaan uit het slimme zoekveld: Standaard uitgeschakeld om veiligheidsredenen, kunt u met deze functie URL's invoeren die JavaScript bevatten in de adresbalk van Safari.
- Behandel SHA-1-certificaten als onzeker: Afkorting voor Secure Hash Algorithm, de SHA-1 hash-functie is bewezen minder veilig te zijn dan aanvankelijk werd gedacht, vandaar de toevoeging van deze optie in Safari 9.
