Obwohl Blocs liefert eine sehr genaue Darstellung Ihrer endgültigen Website, während Sie sie erstellen. Es kann jedoch vorkommen, dass Sie eine schnelle Vorschau Ihrer Website benötigen, um andere Designaspekte zu überprüfen und zu testen, wie z. B. Wechselwirkungen, FX scrollen und Animationen. Blocs Es sind verschiedene Vorschauoptionen integriert, mit denen Sie Ihre Website auf natürlichere und umfassendere Weise testen können.
Vorschaumodus in Blocs Sie können nicht nur eine lokale Vorschau von HTML anzeigen, sondern auch die Vorschau von PHP unterstützen. Solange eine Seite die hat Dateityp Stellen Sie PHP in der SeiteneinstellungenIn der Vorschau wird der über das hinzugefügte PHP-Code gerendert Code-Widget in Echtzeit.
In der App-Vorschau
Mit der In-App-Vorschau können Sie Ihre Website in mehreren Bildschirmgrößen in einem einzigen Arbeitsbereich anzeigen. Um in den Vorschaumodus zu wechseln, einfach links Klick die Play-Taste ⏵ befindet sich rechts neben dem Haltepunkt-Steuerelement oder verwenden Sie alternativ die Tastenkombination V.
Vorschau-Symbolleiste
Im Vorschaumodus finden Sie die Vorschau-Symbolleiste oben im Hauptanwendungsfenster. Diese Symbolleiste enthält verschiedene Funktionen, die Sie beim Testen und Anzeigen einer Vorschau Ihrer Website unterstützen.
Ansichtsfenster hinzufügen
Der Plus-Button + Ganz links in der Symbolleiste können Sie schnell und einfach zusätzliche Ansichtsfenster basierend auf den Abmessungen gängiger Computer-, Monitor-, Tablet- und Telefonbildschirmgrößen hinzufügen.
Ansichtsfenster unterlasse simulieren die Eigenschaften des jeweiligen Geräte-Betriebssystems. Es handelt sich lediglich um Browserfenster, die auf die Bildschirmgröße des Geräts skaliert sind.
Ansichtsfenster zeichnen
Der Knopf mit dem Bleistift Symbol wird umgeschaltet Zeichenmodus, mit dem Sie Ansichtsfenster in benutzerdefinierter Größe manuell zeichnen können. Diese Funktion kann auch aktiviert werden, indem Sie die D Taste halten.
Bearbeitungsmodus
Der dritte Knopf von links in der Symbolleiste schaltet Bearbeitungsmodus. Wenn der Bearbeitungsmodus aktiviert ist, können Sie die Ansichtsfenster auf der Vorschaufläche verschieben und anordnen. Wenn ein Ansichtsfenster entriegelt, dann ist es auch möglich, die Breite und Höhe der Ansichten im Bearbeitungsmodus zu ändern. Diese Funktion kann auch aktiviert werden, indem Sie die Umschalttaste gedrückt halten ⇧ Taste halten.
Seitenauswahl
Mit dem Steuerelement in der Mitte der Symbolleiste können Sie die aktuelle Seite auswählen, die in alle Vorschau-Ansichtsfenster geladen wird.
Neu laden
Der Knopf mit dem ↻ Symbol ist die Schaltfläche „Neu laden“. Mit dieser Schaltfläche können alle Vorschaufenster neu geladen werden.
Broadcast-Steuerung
Das Blocs Auf den Vorschauserver kann von jedem anderen Gerät im selben Netzwerk aus zugegriffen werden. Über die zweite Schaltfläche am Ende der Symbolleiste haben Sie Zugriff auf die Übertragungsoptionen des lokalen Netzwerks.
AirDrop-Vorschau
Mit dieser Option können Sie die Vorschau-URL schnell und einfach über AirDrop mit anderen Geräten im selben lokalen Netzwerk teilen. Über AirDrop geteilte URLs werden automatisch im Webbrowser des empfangenden Geräts geöffnet, sodass Sie Ihre Site auf dem tatsächlichen Gerät in der Vorschau anzeigen und testen können.
Wenn Sie feststellen, dass die AirDrop-Optionen nicht verfügbar sind oder Ihr Gerät nicht als verfügbar angezeigt wird, haben wir diese spezielle Anleitung zur Fehlerbehebung Das kann Ihnen bei der Lösung des Problems helfen.
Vorschau-URL kopieren
Mit der Option „Vorschau kopieren“ wird die lokale Netzwerk-URL in die Zwischenablage Ihres Geräts kopiert. Wenn Sie diese URL in einen Webbrowser auf einem beliebigen Gerät eingeben, das mit demselben Netzwerk verbunden ist, können Sie eine Vorschau Ihrer Site auf dem Gerät anzeigen und sie testen.
Stopp / Beenden
Der Knopf mit dem Stopp ◼ Symbol ganz rechts in der Symbolleiste, dient zum Verlassen des Vorschaumodus.
Ansichtsfenster umbenennen
Jedes Vorschaufenster verfügt in der oberen linken Ecke über eine Beschriftung. Der Inhalt dieser Beschriftung kann bearbeitet werden, indem Sie einfach darauf klicken und den Text ändern.
Ansichtsfenster-Optionen
In der oberen rechten Ecke jedes Ansichtsfensters auf der Vorschau-Leinwand befindet sich eine Menüschaltfläche ☰ermöglicht Ihnen dieses Menü den Zugriff auf Funktionen, die für das jeweilige Ansichtsfenster spezifisch sind.
Kontrolliere
Diese Option öffnet die WebKit-Entwicklerinspektionstools für den entsprechenden Ansichtsbereich. Die Inspektionstools sind eine großartige Möglichkeit, den Code Ihrer Site zu überprüfen und alle potenziellen Probleme zu beheben, auf die Sie stoßen. Wir haben dies praktische Anleitung das Ihnen hilft, Ihre Website auf Fehler zu überprüfen.
Fokus umschalten
Mit dieser Option können Sie den Fokusmodus umschalten. Weitere Informationen zum Fokusmodus finden Sie hier. im Abschnitt unten.
Neu laden
Diese Option lädt das entsprechende Ansichtsfenster neu.
Screenshot teilen
Mit dieser Option können Sie auf die verschiedenen Optionen zum Teilen von Screenshots für das entsprechende Ansichtsfenster zugreifen. Blocs unterstützt das Teilen eines Screenshots des aktuellen Ansichtsfensters mit lokaler Speicher, E-Mail, Nachrichten und über AirDrop.
Löschen
Diese Option löscht das entsprechende Ansichtsfenster.
Fokus-Modus
Doppelklicken Sie auf ein beliebiges Ansichtsfenster auf der Vorschau-Leinwand, um Fokusmodus. Wenn der Fokusmodus aktiviert ist, werden alle anderen Ansichtsfenster ausgeblendet und die Vorschau wird so gezoomt, dass das ausgewählte Ansichtsfenster in den verfügbaren Fensterbereich passt. Doppelklicken Sie erneut auf die fokussierte Ansicht oder drücken Sie die Flucht Taste, wird der Fokusmodus beendet und alle anderen Ansichtsfenster werden angezeigt.
Temporäre Größenänderung
Wenn sich ein Ansichtsfenster im Fokusmodus befindet, wird eine temporäre Steuerung zur Größenänderung auf dem rechte Seite des Ansichtsfensters. Wenn der Fokusmodus beendet wird, wird das Ansichtsfenster auf seinen ursprünglichen Breitenwert zurückgesetzt.
Es ist auch möglich, schnell zu einer vordefinierten Haltepunktbreite zu wechseln, indem Rechtsklick das Steuerelement zur Größenänderung und Auswählen einer der verfügbaren Optionen aus dem Kontextmenü.
Haltepunktsteuerungen
Wenn sich ein Ansichtsfenster im Fokusmodus befindet, werden Haltepunktkontrollen am Unterseite des AnsichtsfenstersMit diesen Steuerelementen können Sie die aktuelle Haltepunktbreite des fokussierten Ansichtsfensters vorübergehend ändern.
Es ist auch möglich, mit den folgenden Tastaturkürzeln zu einem bestimmten Haltepunkt zu wechseln:
- LG Haltepunkt – ⌘1
- MD-Haltepunkt – ⌘2
- SM-Haltepunkt – ⌘3
- XS Haltepunkt – ⌘4
Leinwand schwenken
Mit einer Apple Magic Mouse oder einem Trackpad können Sie die Hauptvorschaufläche verschieben, indem Sie mit dem Finger in eine beliebige Richtung im leeren Bereich der Vorschaufläche scrollen. Alternativ können Sie die Vorschaufläche auch verschieben, indem Sie die Leertaste auf Ihrer Tastatur und ziehen Sie im leeren Leinwandbereich in eine beliebige Richtung.
Canvas-Optionen
Es gibt auch eine Reihe von Optionen, auf die zugegriffen werden kann durch Rechtsklick irgendwo im leeren Bereich der Vorschau-Leinwand.
Alle Ansichtsfenster neu laden
Diese Option lädt alle Ansichtsfenster neu.
Arbeitsbereich zentriert ausrichten
Mit dieser Option wird der aktuelle Arbeitsbereich zentriert. Der Arbeitsbereich ist der Bereich, der von allen Ansichtsfenstern auf der Entwurfsfläche abgedeckt wird.
Arbeitsbereich anpassen
Mit dieser Option können Sie die Zoomstufe der Vorschauleinwand so anpassen, dass alle Ansichtsfenster in den Rahmen des Vorschaufensters passen.
Vorschau-Cache leeren
Diese Option löscht den Cache aller Ansichtsfenster auf der Vorschau-Leinwand und lädt sie neu.
Alle Ansichtsfenster entfernen
Diese Option entfernt alle Ansichtsfenster auf der Vorschauleinwand.
Vorschau im Browser
Neben der In-App-Vorschau, Blocs ermöglicht Ihnen auch eine schnelle Vorschau Ihrer Site mit jedem der Browser, die Sie auf Ihrem Mac installiert haben. Um eine Vorschau Ihrer Website in einem Browser anzuzeigen, einfach der rechten Maustaste auf die Vorschau-Schaltfläche und wählen Sie einen Browser aus dem Popup-Menü.
Sie können mehr über die Vorschau in Browsern lesen HIER.
Zeit- und Datumssimulation
Wenn Ihre Website verwendet Benutzerdefinierte Interaktionen die sich darauf verlassen Zeit or Datumkönnen Sie den Vorschaumodus verwenden Zeit- und Datumssimulation Funktion zum Testen. Auf diese Weise können Sie zu einem bestimmten Zeitpunkt oder Datum eine Vorschau Ihrer Website anzeigen, um zu sehen, wie sich Ihre Interaktionen verhalten.
Um auf die Zeit- und Datumssimulationsfunktionen zuzugreifen, klicken Sie auf das Uhr Symbol unten linke Ecke der Hauptvorschauleinwand.
Wenn Sie Probleme mit dem Vorschaumodus haben oder dieser einfach nicht funktioniert, empfehlen wir, ihn zu lesen Anleitung zur Fehlerbehebung.