Hoewel Blocs levert een zeer nauwkeurige weergave van uw uiteindelijke site terwijl u deze bouwt. Soms moet u snel een voorbeeld van uw site bekijken om andere ontwerpaspecten te controleren en 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 de in-app preview kunt u uw website bekijken op meerdere schermformaten binnen één werkruimte. Om de preview-modus te openen, hoeft u alleen maar links klikken de afspeelknop ⏵ bevindt zich aan de rechterkant van het breekpuntbesturingselement of gebruik als alternatief de sneltoets V.
Voorbeeldwerkbalk
In de preview-modus is de preview-werkbalk te vinden boven aan het hoofdvenster van de applicatie. Deze werkbalk bevat verschillende functies die u helpen bij het testen en previewen van uw website.
Viewport toevoegen
De plusknop + Met de knop helemaal links op de werkbalk kunt u snel en eenvoudig extra viewports toevoegen op basis van de afmetingen van gangbare computer-, monitor-, tablet- en telefoonschermen.
Zichtvensters geen simuleren de kenmerken van het besturingssysteem van het relevante apparaat. Het zijn slechts browservensters die zijn geschaald om overeen te komen met de schermgrootte van het apparaat.
Viewport tekenen
De knop met de potlood pictogram zal wisselen tekenmodus, waarmee u handmatig aangepaste viewports kunt tekenen. Deze functie kan ook worden ingeschakeld door de D sleutel.
Bewerkingsmodus
De derde knop vanaf de linkerkant van de werkbalk schakelt bewerkingsmodus. Wanneer ingeschakeld, kunt u met de bewerkingsmodus de viewports verplaatsen en rangschikken rond het voorbeeldcanvas. Als een viewport is ontgrendeld, dan is het ook mogelijk om de breedte- en hoogte-afmetingen van de weergaven te wijzigen tijdens de bewerkingsmodus. Deze functie kan ook worden ingeschakeld door de shift-toets ingedrukt te houden ⇧ sleutel.
Pagina Selectie
Met het besturingselement in het midden van de werkbalk kunt u de huidige pagina selecteren die in alle voorbeeldviewports is geladen.
Reload
De knop met de ↻ icoon is de herlaadknop. Deze knop kan worden gebruikt om alle preview-viewports opnieuw te laden.
Uitzendbedieningen
Uw partner voor Blocs De preview-server is toegankelijk vanaf elk ander apparaat in hetzelfde netwerk. Met de tweede knop aan het einde van de werkbalk krijgt u toegang tot de uitzendopties van het lokale netwerk.
AirDrop-voorbeeld
Met deze optie kunt u de preview-URL snel en eenvoudig delen met andere apparaten op hetzelfde lokale netwerk via AirDrop. URL's die worden gedeeld via AirDrop, worden automatisch geopend in de webbrowser van het ontvangende apparaat, zodat u uw site kunt bekijken en testen op het daadwerkelijke apparaat.
Als u merkt dat de AirDrop-opties niet beschikbaar zijn of dat uw apparaat niet als beschikbaar wordt weergegeven, hebben we deze speciale gids voor probleemoplossing die u kunnen helpen het probleem op te lossen.
Kopieer de voorbeeld-URL
De optie Preview kopiëren kopieert de lokale netwerk-URL naar het klembord van uw apparaat. Als u deze URL invoert in een webbrowser op een apparaat dat is verbonden met hetzelfde netwerk, kunt u een preview van uw site bekijken en deze testen op het apparaat.
Stoppen/afsluiten
De knop met de stop ◼ symbool helemaal rechts op de werkbalk, wordt gebruikt om de voorbeeldmodus te verlaten.
Viewport hernoemen
Elke preview viewport heeft een label in de linkerbovenhoek. De inhoud van dit label kan eenvoudig worden bewerkt door erop te klikken en de tekst aan te passen.
Viewport-opties
In de rechterbovenhoek van elk venster op het voorbeeldcanvas bevindt zich een menuknop ☰Met dit menu krijgt u toegang tot functies die specifiek zijn voor de betreffende viewport.
Inspecteren
Deze optie opent de WebKit-ontwikkelaarsinspectietools voor de relevante viewport. De inspectietools zijn een geweldige manier om de code van uw site te inspecteren en eventuele problemen die u tegenkomt te debuggen. We hebben dit handige gids die u helpen uw website op fouten te controleren.
Focus wisselen
Deze optie schakelt de focusmodus in/uit. U kunt meer lezen over de focusmodus in het onderstaande gedeelte.
Reload
Met deze optie wordt het relevante venster opnieuw geladen.
Schermafbeelding delen
Met deze optie krijgt u toegang tot de verschillende opties voor het delen van schermafbeeldingen voor de betreffende viewport. Blocs heeft ondersteuning om een screenshot van de huidige viewport te delen lokale opslag, email, berichten en over AirDrop.
Verwijder
Met deze optie verwijdert u het relevante viewport.
Focus Mode
Als u dubbelklikt op een viewport op het voorbeeldcanvas, wordt dit ingeschakeld focusmodus. Wanneer de focusmodus is ingeschakeld, worden alle andere viewports verborgen en wordt het voorbeeldcanvas ingezoomd om de geselecteerde viewport in de beschikbare vensterruimte te laten passen. Dubbelklik nogmaals op de gefocuste weergave of druk op de ontsnappen toets, verlaat de focusmodus en toont alle andere viewports.
Tijdelijk formaat wijzigen
Wanneer een viewport in de focusmodus staat, wordt er een tijdelijke breedte-aanpassingsregeling weergegeven op de rechterzijde van de viewport. Wanneer de focusmodus wordt verlaten, keert de viewport terug naar de oorspronkelijke breedtewaarde.
Het is ook mogelijk om snel over te schakelen naar een vooraf gedefinieerde breekpuntbreedte door rechts klikken de optie voor het wijzigen van de grootte en het selecteren van een van de beschikbare opties in het contextmenu.
Breekpuntbesturing
Wanneer een viewport zich in de focusmodus bevindt, worden de breekpuntbedieningen weergegeven op de onderkant van het vensterMet deze besturingselementen kunt u tijdelijk de huidige breekpuntbreedte van het gefocuste viewport wijzigen.
U kunt ook naar een specifiek breekpunt overschakelen met behulp van de volgende sneltoetsen:
- LG Breekpunt – ⌘1
- MD-breekpunt – ⌘2
- SM-breekpunt – ⌘3
- XS-breekpunt – ⌘4
Pannendoek
Met een Apple Magic Mouse of Trackpad is het mogelijk om het hoofdvoorbeeldcanvas te pannen door uw vinger in elke richting te scrollen in de lege ruimte op het voorbeeldcanvas. Als alternatief kan het voorbeeldcanvas ook worden gepand door de spatiebalk op uw toetsenbord en sleep in de lege ruimte van het canvas, in welke richting dan ook.
Canvasopties
Er is ook een reeks opties die toegankelijk zijn via rechts klikken ergens in de lege ruimte op het voorbeeldcanvas.
Alle viewports opnieuw laden
Met deze optie worden alle viewports opnieuw geladen.
Werkruimte centreren
Met deze optie wordt de huidige werkruimte gecentreerd. De werkruimte is het gebied dat wordt bedekt door alle viewports op het ontwerpcanvas.
Fit-werkruimte
Met deze optie past u het zoomniveau van het voorvertoningsvenster aan, zodat alle viewports binnen het voorvertoningsvensterframe passen.
Voorvertoningscache wissen
Met deze optie wist u de cache van alle viewports op het voorbeeldcanvas en laadt u ze opnieuw.
Verwijder alle viewports
Met deze optie worden alle viewports op het voorvertoningscanvas verwijderd.
Voorbeeld in browser
Naast de 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.
Tijd- en datumsimulatie
Als uw website gebruikt Aangepaste interacties die vertrouwen op tijd or gegevens, kunt u de preview-modus gebruiken tijd- en datumsimulatie functie om ze te testen. Hiermee kunt u uw website op een specifieke tijd of datum bekijken om te zien hoe uw interacties zich gedragen.
Om toegang te krijgen tot de tijd- en datumsimulatiefuncties, klikt u op klok icoon onderaan linkerhoek van het belangrijkste voorbeeldcanvas.
Als u problemen heeft met de voorbeeldmodus, of het werkt gewoon niet, dan raden we u aan dit te lezen gids voor probleemoplossing.