Ontdek de ontwikkel-functies van Safari
Safari is een uitgebreide webbrowser en meer dan alleen een gereedschap om internetpagina's mee te bezoeken. Met de ontwikkel-functies kunnen webdevelopers en grafisch ontwerpers websites testen, maar deze kant van Safari herbergt ook voor normale gebruikers interessante opties.
Afbeeldingen uitschakelen
Als je wordt afgeleid door teveel afbeeldingen op een webpagina, dan kun je deze uitschakelen in het ontwikkel-menu van Safari. Allereerst moet je wel even het ontwikkel-menu activeren door bij Safari op Safari / Voorkeuren / Geavanceerd te klikken, zet een vinkje voor Toon Ontwikkel-menu in menubalk.
Schakel nu de afbeeldingen uit door bij Ontwikkel op Schakel afbeeldingen uit te klikken. Als je vervolgens een webpagina opent, zal je zien dat de afbeeldingen worden genegeerd. Wil je zogenoemde CSS-stijlsheets uitschakelen, dan kun je in het ontwikkel-menu de optie Schakel stijlen uit kiezen.
©PXimport
Cache legen
Soms werkt een website niet goed en is het noodzakelijk je cache te legen. Je kunt natuurlijk je gehele geschiedenis wissen en hierbij je cache tegelijkertijd legen, maar een beter idee is om in het ontwikkel-menu voor de optie Leeg caches te kiezen.
De toetscombinatie voor het legen van de cache is Alt-Cmd-E. Je kunt ook de caches compleet uitschakelen door op Schakel caches uit te klikken.
©PXimport
Open een pagina met andere browser
Als een webpagina niet goed wordt weergegeven, kun je snel even kijken hoe de desbetreffende pagina er bijvoorbeeld in Firefox of Chrome uitziet. Deze applicaties moeten wel op je Mac zijn geïnstalleerd. Ga naar Ontwikkel / Open pagina met en kies de applicatie naar keuze.
Je kunt ook de Gebruikersagent wisselen bij Ontwikkel / Gebruikersagent. Je vertelt nu de website die je bezoekt dat je met een andere browser de pagina raadpleegt. Als je op een site bijvoorbeeld de melding krijgt dat Safari niet ondersteund wordt, dan kun je je hier voordoen als een Internet Explorer-browser.
©PXimport
Adaptieve ontwerpmodus
Een functie die handig is voor webdevelopers is de mogelijkheid om je website te testen op een ander virtueel apparaat. Klik op Ontwikkel / Schakel over naar adaptieve ontwerpmodus of gebruik de toetscombinatie Alt-Cmd-R.
Je ziet nu hoe een website eruitziet op het apparaat dat je bovenin hebt geselecteerd. Wil je weten of je pagina goed te zien is op bijvoorbeeld een iPad, klik dan op één van de iPad-icoontjes.
©PXimport
Elementen inspecteren
Een andere handige functie voor webdevelopers is de mogelijkheid om elementen op een webpagina te inspecteren. Dit doe je om op een onderdeel van de website met je rechtermuisknop te klikken en voor de optie Inspecteer element te kiezen. Je kunt dit webinfovenster overigens ook openen met Alt-Cmd-I.
Wil je bijvoorbeeld weten wat voor lettertype een website gebruikt, dan selecteer je een woord, onderin klik je dan op <p class> en aan de rechterkant lees je de eigenschappen van de tekst. Achter font-family zie je dan welk lettertype de website gebruikt.
Bovenin het infovenster zie je hoe lang het duurt voordat een pagina volledig geladen is. Wil je precies weten wat er wanneer geladen wordt, dan kun je op Tijdbalken klikken en de pagina opnieuw laden. Je ziet nu precies op welk moment welk onderdeel aan de beurt is. Handig om op te sporen wat voor vertraging op een website zorgt.
©PXimport