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 , 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.
Adressfeld
Das Textfeld in der Mitte der Symbolleiste zeigt den Titel der aktuell geladenen Webseite an. Sie können hier auch eine URL eingeben, die in die Ansichtsfenster auf der Vorschau-Leinwand geladen wird.
Seitenauswahl
Rechts neben dem Adressfeld finden Sie ein Dropdown-Menü, mit dem Sie die aktuell in allen Vorschau-Ansichtsfenstern geladene Seite auswählen können.
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.
Vorschauoptionen
Sie können verschiedene automatische Vorschauoptionen deaktivieren, wie zum Beispiel Link-Vorschau, synchronisiertes Scrollen, Klick , Varianten des Eingangssignals: mithilfe der Vorschauoptionen, die sich unten rechts im Vorschaufenster befinden.
Link-Vorschau anzeigen
Diese Option schaltet die kleine Vorschaubild-Miniaturansicht um, die in der unteren rechten Ecke der Vorschaufläche angezeigt wird, wenn der Cursor über einen Link innerhalb eines Ansichtsfensters bewegt wird.
Synchronisiertes Scrollen
Diese Option schaltet das synchronisierte Scrollen über alle Ansichtsfenster hinweg um.
Synchronisierte Klicks
Diese Option schaltet synchronisierte Klicks über alle Ansichtsfenster hinweg um.
Synchronisierter Eingang
Diese Option schaltet die synchronisierte Eingabe über alle Ansichtsfenster hinweg um.
Canvas-Arbeitsbereichsoptionen
Es gibt außerdem eine Reihe von Arbeitsbereichsoptionen, 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.
Seitengewichtsrechner
Das geschätzte Gewicht der aktuellen Webseite wird in der oben rechts Ecke der Vorschau-Leinwand.
Diese Schätzung nicht Berücksichtigen Sie reine Exportoptimierungen wie den Austausch von WebP-Bildern oder die Minimierung von Ressourcen.
Der Seitengewichtsrechner erfordert MacOS Sonoma Minimum.
Das Seitengewicht kann sowohl die Ladegeschwindigkeit als auch die SEO beeinflussen. Wir empfehlen, es bei 1MB für optimale Leistung. Wenn eine Seite überschreitet 2.5MB, das Etikett wird gelb, um anzuzeigen, dass es schwerer ist als empfohlen. Seiten über 5MB löst ein rotes Etikett aus, das warnt, dass die Seite zu groß ist und wahrscheinlich langsam geladen wird.
Reduzieren Sie das Seitengewicht
Wenn Ihre Website Seiten mit hohem Seitengewicht enthält, lesen Sie dem Leitfaden für Tipps zur Reduzierung.
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 werden auf dieser Seite erläutert.
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.