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.

Je moet eerst even de ontwikkel-functies van Safari activeren.

© 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.

Leeg de caches als je problemen ondervindt.

© 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.

Open de pagina met een andere browser op je systeem.

© 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.

De adaptieve ontwerpmodus laat je zien hoe je website erop een iPad uitziet.

© 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.

In de tijdlijn zie je welke elementen wanneer precies worden geladen.

© PXimport

Deel dit artikel
Voeg toe aan favorieten