Inhoud
- Open ontwikkelaarstools in de webbrowser van Apple
- Hoe de responsieve ontwerpmodus in Safari in te schakelen
- Safari Developer Tools
Open ontwikkelaarstools in de webbrowser van Apple
Ervoor zorgen dat websites en web-apps een groot aantal apparaten en platforms ondersteunen, is een essentiële taak voor webontwikkelaars. De Safari-webbrowser van Apple bevat een responsieve ontwerpmodus waarmee u een voorbeeld kunt bekijken van hoe uw site wordt weergegeven met verschillende schermresoluties en op verschillende iPad-, iPhone- en iPod touch-builds.
De instructies in dit artikel zijn van toepassing op Safari 13 voor macOS. De modus Responsive Design is niet beschikbaar in de Windows-versie.
Hoe de responsieve ontwerpmodus in Safari in te schakelen
Om de ontwikkelaarstools en de responsieve ontwerpmodus van Safari in te schakelen:
-
Selecteer Safari > Voorkeuren in de Safari-werkbalk.
U kunt ook de sneltoets gebruiken Opdracht+Komma (,) om het menu Voorkeuren te openen.
-
Selecteer in het menu Voorkeuren de Geavanceerd tabblad en vink het vakje naast aan Toon ontwikkelmenu in menubalk. Er zou nu een nieuwe optie beschikbaar moeten zijn in de Safari-werkbalk bovenaan het scherm.
-
Selecteer Ontwikkelen > Ga naar de responsieve ontwerpmodus in de Safari-werkbalk.
U kunt ook de sneltoets gebruiken Keuze+Opdracht+R om de Responsive Design Mode te openen.
-
De actieve webpagina moet nu worden weergegeven in de modus Responsive Design. Kies bovenaan de pagina een iOS-apparaat of een schermresolutie om te zien hoe de pagina wordt weergegeven.
U kunt Safari ook instrueren om verschillende user-agents te simuleren met behulp van het vervolgkeuzemenu direct boven de resolutiepictogrammen.
Safari Developer Tools
Naast de modus Responsive Design biedt het menu Ontwikkelen van Safari vele andere handige opties, waaronder:
- Open pagina met: Open de actieve webpagina in een andere browser die momenteel op uw Mac is geïnstalleerd.
- Gebruikersagent: Door de user-agent te wijzigen, identificeren webservers uw browser als iets anders dan Safari.
- Verbind Web Inspector: Alle bronnen van een webpagina weergeven, inclusief CSS-informatie en DOM-statistieken.
- Foutconsole weergeven: Geef JavaScript-, HTML- en XML-fouten en waarschuwingen weer.
- Paginabron weergeven: Bekijk en zoek de broncode van de actieve webpagina.
- Paginabronnen weergeven: Documenten, scripts, CSS en andere bronnen van de huidige pagina weergeven.
- Snippet-editor weergeven: Bewerk en voer codefragmenten uit. Deze functie is erg handig vanuit een testperspectief.
- Extensiebouwer weergeven: Bouw uw eigen Safari-extensies door uw code dienovereenkomstig in te pakken en metagegevens toe te voegen.
- Start tijdlijnopname: Record netwerkverzoeken, JavaScript-uitvoering, paginaweergave en andere gebeurtenissen binnen de WebKit Inspector.
- Lege caches: Verwijder alle opgeslagen caches in Safari, niet alleen de standaard cachebestanden van de website.
- Schakel caches uit: Als caching is uitgeschakeld, worden bronnen van een website gedownload telkens wanneer een toegangsverzoek wordt gedaan, in plaats van het gebruik van de lokale cache.
- JavaScript toestaan vanuit slim zoekveld: Standaard uitgeschakeld om veiligheidsredenen, met deze functie kunt u URL's invoeren die JavaScript bevatten in de adresbalk van Safari.
- Behandel SHA-1-certificaten als onveilig: Afkorting van Secure Hash Algorithm, de SHA-1 hash-functie is minder veilig gebleken dan oorspronkelijk werd gedacht, vandaar de toevoeging van deze optie in Safari.
