Hoewel Blocs levert een zeer nauwkeurige weergave van uw uiteindelijke site terwijl u deze daadwerkelijk ontwerpt, het kan voorkomen dat u snel een voorbeeld van uw site moet bekijken om andere ontwerpaspecten te controleren en te testen, zoals interacties, scroll FX en en animaties. Blocs heeft verschillende ingebouwde preview-opties die zijn ontworpen om u te helpen uw site op een natuurlijkere en uitgebreidere manier te testen.
Voorbeeldmodus in Blocs laat je niet alleen lokaal HTML previews zien, maar het ondersteunt ook previews van PHP. Zolang een pagina de bestandstype ingesteld op PHP in het pagina-instellingen, zal het voorbeeld elke PHP-code weergeven die is toegevoegd via de Code-widget in real time.
In app-voorbeeld
Met in-app-voorbeeld kunt u een voorbeeld van uw site bekijken zoals u dat in een webbrowser zou doen, zonder dat u de hoofdpagina hoeft te verlaten Blocs toepassing. Om de voorbeeldmodus te openen, hoeft u alleen maar links klikken de afspeelknop aan de rechterkant van de breekpuntbediening, of anders met de sneltoets V.
Schakelen tussen breekpunten
Naast de ontwerpmodus heeft de voorbeeldmodus ook toegang tot het hoofdmenu breekpunt controles Deze bedieningselementen kunnen worden gebruikt om snel en gemakkelijk tussen verschillende schermformaten te schakelen om de responsieve kenmerken van uw site te controleren.
Developer tools
In app-preview krijgt u ook toegang tot de krachtige WebKit-tools voor ontwikkelaarinspectie. De inspectietools zijn een geweldige manier om de code van uw site te inspecteren en mogelijke problemen die u tegenkomt op te lossen. Ze zijn toegankelijk via de menuknop in de linkerbovenhoek van het voorbeeldframe.
Of gewoon door rechts klikken elk element op een pagina (in de voorbeeldmodus) en selecteren Inspecteren.
Voorbeeld in browser
Evenals in app-preview, Blocs laat je ook snel een voorbeeld van je site bekijken met een van de browsers die je op je Mac hebt geïnstalleerd. Om eenvoudig een voorbeeld van uw site in een browser te bekijken klik met de rechtermuisknop de voorbeeldknop en selecteer een browser in het pop-upmenu.
U kunt meer lezen over voorbeeldweergave in browsers hier.
Als u problemen heeft met de voorbeeldmodus, of het werkt gewoon niet, dan raden we u aan dit te lezen gids voor probleemoplossing.
Lokaal netwerkvoorbeeld
De Blocs preview-server is ook toegankelijk vanaf elk apparaat op hetzelfde netwerk als uw Mac. In de voorbeeldmodus is er een knop met een antenne symbool linksboven in het hoofdtoepassingsframe. Als u op deze knop klikt, wordt een pop-upmenu geopend met twee opties.
Voorbeeld van een luchtdaling
Met de eerste optie kunt u de voorbeeld-URL snel en eenvoudig delen met andere apparaten op hetzelfde lokale netwerk via Air Drop. URL's die worden gedeeld via Air Drop worden automatisch geopend in de webbrowser van het ontvangende apparaat.
Als u merkt dat de Air Drop-opties niet beschikbaar zijn of als uw apparaat niet als beschikbaar wordt weergegeven, hebben wij dat gedaan deze speciale gids voor probleemoplossing die u kunnen helpen het probleem op te lossen.
Kopieer de voorbeeld-URL
De tweede knop kopieert de lokale netwerk-URL naar het plakbord van uw Mac. Als u deze URL in een webbrowser invoert op elk apparaat dat is verbonden met hetzelfde netwerk als uw Mac, kunt u uw site bekijken en testen op het daadwerkelijke apparaat.