Sebbene il Blocs fornisce una rappresentazione molto accurata del tuo sito finale mentre lo costruisci, ci sono momenti in cui potresti aver bisogno di visualizzare rapidamente in anteprima il tuo sito per controllare e testare altri aspetti di progettazione come interazioni, scorri FX e di animazioni. Blocs ha varie opzioni di anteprima integrate progettate per aiutarti a testare il tuo sito in modo più naturale e completo.
Modalità anteprima in Blocs non solo ti consente di visualizzare in anteprima HTML localmente, ma supporta anche l'anteprima di PHP. Finché una pagina ha l'estensione tipo di file impostato su PHP nel file impostazioni della pagina, l'anteprima renderà qualsiasi codice PHP aggiunto tramite Widget codice in tempo reale.
Nell'anteprima dell'app
L'anteprima in-app ti consente di visualizzare in anteprima il tuo sito Web su più dimensioni dello schermo all'interno di un singolo spazio di lavoro. Per entrare in modalità anteprima, basta clic sinistro il pulsante di riproduzione ⏵ situato a destra del controllo del punto di interruzione o in alternativa, utilizzare la scorciatoia da tastiera V.
Barra degli strumenti di anteprima
In modalità anteprima, la barra degli strumenti di anteprima si trova in cima alla finestra principale dell'applicazione. Questa barra degli strumenti contiene varie funzionalità che ti aiuteranno a testare e visualizzare in anteprima il tuo sito web.
Aggiungi Viewport
Il pulsante più + situato all'estrema sinistra della barra degli strumenti, consente di aggiungere in modo rapido e semplice ulteriori viewport in base alle dimensioni degli schermi più comuni di computer, monitor, tablet e telefoni.
finestre non si simulano le caratteristiche del sistema operativo del dispositivo in questione. Sono semplicemente finestre del browser ridimensionate per adattarsi alle dimensioni dello schermo del dispositivo.
Disegna la finestra di visualizzazione
Il pulsante con il matita l'icona si alternerà modalità di disegno, che consente di disegnare manualmente viewport di dimensioni personalizzate. Questa funzionalità può essere abilitata anche tenendo premuto il tasto D chiave.
Modalità Modifica
Il terzo pulsante da sinistra della barra degli strumenti attiva/disattiva modalità Modifica. Quando abilitata, la modalità di modifica consente di spostare e disporre le finestre di visualizzazione attorno alla tela di anteprima. Se una finestra di visualizzazione è sbloccato, allora è anche possibile ridimensionare le dimensioni di larghezza e altezza delle viste, durante la modalità di modifica. Questa funzione può essere abilitata anche tenendo premuto il tasto shift ⇧ chiave.
Selezione pagina
Il controllo situato al centro della barra degli strumenti consente di selezionare la pagina corrente che viene caricata in tutte le finestre di anteprima.
Ricaricare
Il pulsante con il ↻ icona è il pulsante di ricarica. Questo pulsante può essere utilizzato per ricaricare tutte le finestre di anteprima.
Controlli di trasmissione
Blocs È possibile accedere al server di anteprima da qualsiasi altro dispositivo sulla stessa rete; il secondo pulsante dall'estremità della barra degli strumenti consente di accedere alle opzioni di trasmissione della rete locale.
Anteprima AirDrop
Questa opzione ti consentirà di condividere in modo rapido e semplice l'URL di anteprima con altri dispositivi sulla stessa rete locale tramite AirDrop. Gli URL condivisi tramite AirDrop vengono automaticamente aperti nel browser Web del dispositivo ricevente, consentendoti di visualizzare in anteprima e testare il tuo sito sul dispositivo effettivo.
Se ritieni che le opzioni AirDrop non siano disponibili o che il tuo dispositivo non venga visualizzato come disponibile, abbiamo questa guida dedicata alla risoluzione dei problemi che potrebbe aiutarti a risolvere il problema.
Copia l'URL di anteprima
L'opzione di anteprima copia copierà l'URL della rete locale sul pasteboard dei tuoi dispositivi. Inserendo questo URL in un browser web su qualsiasi dispositivo connesso alla stessa rete, potrai visualizzare in anteprima e testare il tuo sito sul dispositivo.
Interrompi/Esci
Il pulsante con lo stop ◼ simbolo situato all'estrema destra della barra degli strumenti, serve per uscire dalla modalità anteprima.
Rinomina Viewport
Ogni viewport di anteprima ha un'etichetta posizionata nell'angolo in alto a sinistra. Il contenuto di questa etichetta può essere modificato semplicemente cliccandoci sopra e modificando il testo.
Opzioni di visualizzazione
Nell'angolo in alto a destra di ogni viewport sulla tela di anteprima c'è un pulsante del menu ☰, questo menu consente di accedere alle funzioni specifiche della finestra di visualizzazione interessata.
Ispezione
Questa opzione aprirà gli strumenti di ispezione dello sviluppatore WebKit per la viewport pertinente. Gli strumenti di ispezione sono un ottimo modo per ispezionare il codice del tuo sito e risolvere eventuali problemi potenziali che stai riscontrando. Abbiamo questo guida a portata di mano che ti aiuterà a controllare il tuo sito web per individuare eventuali errori.
Attiva/disattiva messa a fuoco
Questa opzione alternerà la modalità di messa a fuoco. Puoi leggere di più sulla modalità di messa a fuoco nella sezione sottostante.
Ricaricare
Questa opzione ricaricherà la viewport pertinente.
Condividi screenshot
Questa opzione ti consentirà di accedere alle varie opzioni di condivisione degli screenshot per la viewport interessata. Blocs supporta la condivisione di uno screenshot della finestra di visualizzazione corrente memoria locale, email, messaggi e oltre Airdrop.
Elimina
Questa opzione eliminerà la viewport interessata.
Modalità di messa a fuoco
Facendo doppio clic su qualsiasi viewport sulla tela di anteprima verrà abilitato modalità di messa a fuoco. Quando la modalità messa a fuoco è abilitata, tutte le altre finestre saranno nascoste e la tela di anteprima verrà ingrandita per adattare la finestra selezionata allo spazio disponibile della finestra. Facendo nuovamente doppio clic sulla vista messa a fuoco o premendo il pulsante fuga tasto uscirà dalla modalità di messa a fuoco, rivelando tutte le altre finestre di visualizzazione.
Ridimensionamento temporaneo
Quando una finestra è in modalità messa a fuoco, viene visualizzato un controllo di larghezza di ridimensionamento temporaneo lato destro della viewport. Quando si esce dalla modalità messa a fuoco, la viewport tornerà al suo valore di larghezza originale.
È anche possibile passare rapidamente a una larghezza di punto di interruzione predefinita clic destro il controllo di ridimensionamento e selezionando una delle opzioni disponibili dal menu contestuale.
Controlli del punto di interruzione
Quando una finestra è in modalità messa a fuoco, i controlli dei punti di interruzione vengono visualizzati nella parte inferiore della finestraQuesti controlli consentono di modificare temporaneamente la larghezza del punto di interruzione corrente della finestra di visualizzazione selezionata.
È anche possibile passare a un punto di interruzione specifico utilizzando le seguenti scorciatoie da tastiera:
- Punto di rottura LG – ⌘1
- Punto di interruzione MD – ⌘2
- Punto di interruzione SM – ⌘3
- Punto di interruzione XS – ⌘4
Tela di Pan
Utilizzando un Apple Magic Mouse o un Trackpad, è possibile effettuare una panoramica della tela di anteprima principale scorrendo il dito in qualsiasi direzione nello spazio vuoto sulla tela di anteprima. In alternativa, la tela di anteprima può essere spostata anche tenendo premuto il pulsante barra spaziatrice sulla tastiera e trascinando nello spazio vuoto della tela, in qualsiasi direzione.
Opzioni tela
Esiste anche una gamma di opzioni a cui è possibile accedere tramite clic destro in qualsiasi punto dello spazio vuoto dell'anteprima.
Ricarica tutte le finestre di visualizzazione
Questa opzione ricaricherà tutte le finestre.
Area di lavoro allineamento al centro
Questa opzione allineerà al centro l'area di lavoro corrente. L'area di lavoro è l'area coperta da tutte le viewport sulla tela di progettazione.
Adatta l'area di lavoro
Questa opzione regolerà il livello di zoom dell'anteprima in modo che tutte le finestre rientrino nella cornice della finestra di anteprima.
Cancella cache di anteprima
Questa opzione svuoterà la cache di tutte le finestre di visualizzazione nell'area di anteprima e le ricaricherà.
Rimuovi tutte le finestre
Questa opzione rimuoverà tutte le finestre di visualizzazione nell'anteprima.
Anteprima nel browser
Oltre all'anteprima in-app, Blocs ti consente anche di visualizzare rapidamente l'anteprima del tuo sito con uno qualsiasi dei browser che hai installato sul tuo Mac. Per visualizzare in anteprima il tuo sito in un browser semplicemente tasto destro del mouse il pulsante di anteprima e selezionare un browser dal menu a comparsa.
Puoi leggere di più sull'anteprima nei browser qui.
Simulazione di data e ora
Se il tuo sito web utilizza Interazioni personalizzate su cui fare affidamento tempo or quando, puoi utilizzare la modalità di anteprima simulazione di data e ora funzionalità per testarli. Questo ti consente di visualizzare in anteprima il tuo sito Web in un momento o una data specifici per vedere come si comportano le tue interazioni.
Per accedere alle funzionalità di simulazione di data e ora, fare clic su orologio icona in basso angolo sinistro della tela di anteprima principale.
Se hai problemi con la modalità di anteprima o semplicemente non funziona, ti consigliamo di leggere questo guida alla risoluzione dei problemi.