Bien que Blocs fournit une représentation très précise de votre site final au fur et à mesure que vous le construisez, il peut arriver que vous ayez besoin de prévisualiser rapidement votre site pour vérifier et tester d'autres aspects de conception tels que interactions, faire défiler FX et du animations. Blocs dispose de diverses options de prévisualisation intégrées conçues pour vous aider à tester votre site de manière plus naturelle et plus complète.
Mode aperçu dans Blocs non seulement vous permet de prévisualiser localement le HTML, mais il prend également en charge la prévisualisation de PHP. Tant qu'une page a le type de fichier défini sur PHP dans le paramètres de la page, l'aperçu rendra tout code PHP ajouté via le Widget de code en temps réel.
Dans l'aperçu de l'application
L'aperçu intégré à l'application vous permet de prévisualiser votre site Web sur plusieurs tailles d'écran dans un seul espace de travail. Pour accéder au mode aperçu, il vous suffit clic gauche le bouton de lecture ⏵ situé à droite du contrôle du point d'arrêt ou bien, utilisez le raccourci clavier V.
Barre d'outils d'aperçu
En mode aperçu, la barre d'outils d'aperçu se trouve en haut de la fenêtre principale de l'application. Cette barre d'outils contient diverses fonctionnalités qui vous aideront à tester et à prévisualiser votre site Web.
Ajouter une fenêtre d'affichage
Le bouton plus + Situé à l'extrême gauche de la barre d'outils, il est rapide et facile d'ajouter des fenêtres d'affichage supplémentaires en fonction des dimensions des tailles d'écran courantes des ordinateurs, des moniteurs, des tablettes et des téléphones.
Fenêtres n' simulent les caractéristiques du système d'exploitation de l'appareil concerné. Il s'agit simplement de fenêtres de navigateur mises à l'échelle pour correspondre à la taille de l'écran de l'appareil.
Fenêtre de dessin
Le bouton avec le Un crayon l'icône basculera mode dessin, qui vous permet de dessiner manuellement des fenêtres d'affichage de taille personnalisée. Cette fonctionnalité peut également être activée en maintenant la touche D clé.
Mode d'édition
Le troisième bouton à partir de la gauche de la barre d'outils basculera Mode édition. Lorsqu'il est activé, le mode d'édition vous permet de déplacer et d'organiser les fenêtres d'affichage autour de la zone d'aperçu. Si une fenêtre d'affichage est déverrouillé, il est alors également possible de redimensionner les dimensions de largeur et de hauteur des vues, en mode édition. Cette fonctionnalité peut également être activée en maintenant la touche Maj enfoncée ⇧ clé.
Sélection de pages
Le contrôle situé au centre de la barre d'outils vous permet de sélectionner la page actuelle qui est chargée dans toutes les fenêtres d'aperçu.
Recharger
Le bouton avec le ↻ L'icône est le bouton de rechargement. Ce bouton peut être utilisé pour recharger toutes les fenêtres d'aperçu.
Contrôles de diffusion
Vue d'ensemble Blocs le serveur d'aperçu est accessible depuis n'importe quel autre appareil sur le même réseau, le deuxième bouton à partir de la fin de la barre d'outils vous donnera accès aux options de diffusion du réseau local.
Aperçu d'AirDrop
Cette option vous permettra de partager rapidement et facilement l'URL d'aperçu avec d'autres appareils sur le même réseau local via AirDrop. Les URL partagées à l'aide d'AirDrop sont automatiquement ouvertes dans le navigateur Web de l'appareil récepteur, vous permettant de prévisualiser et de tester votre site sur l'appareil réel.
Si vous constatez que les options AirDrop ne sont pas disponibles ou que votre appareil n'apparaît pas comme disponible, nous avons ce guide de dépannage dédié cela peut vous aider à résoudre le problème.
Copier l'URL d'aperçu
L'option de copie de l'aperçu copiera l'URL du réseau local dans le presse-papiers de votre appareil. En saisissant cette URL dans un navigateur Web sur n'importe quel appareil connecté au même réseau, vous pourrez prévisualiser et tester votre site sur l'appareil.
Arrêter / Quitter
Le bouton avec l'arrêt (I.e. symbole situé à l'extrême droite de la barre d'outils, permet de quitter le mode aperçu.
Renommer la fenêtre d'affichage
Chaque fenêtre d'aperçu possède une étiquette située dans le coin supérieur gauche. Le contenu de cette étiquette peut être modifié simplement en cliquant dessus et en modifiant le texte.
Options de la fenêtre d'affichage
Dans le coin supérieur droit de chaque fenêtre d'affichage de la zone d'aperçu se trouve un bouton de menu ☰, ce menu vous permet d'accéder à des fonctions spécifiques à la fenêtre concernée.
Inspecter
Cette option ouvrira les outils d'inspection du développeur WebKit pour la fenêtre d'affichage concernée. Les outils d'inspection sont un excellent moyen d'inspecter le code de votre site et de déboguer les problèmes potentiels que vous rencontrez. Nous avons ceci guide pratique Cela vous aidera à inspecter votre site Web pour détecter les erreurs.
Basculer la mise au point
Cette option permet de basculer entre les modes de mise au point. Vous pouvez en savoir plus sur le mode de mise au point dans la rubrique ci-dessous.
Recharger
Cette option rechargera la fenêtre d'affichage concernée.
Partager la capture d'écran
Cette option vous permettra d'accéder aux différentes options de partage de captures d'écran pour la fenêtre d'affichage concernée. Blocs prend en charge le partage d'une capture d'écran de la fenêtre d'affichage actuelle avec stockage local, email, messages et au cours parachutage.
Supprimer
Cette option supprimera la fenêtre d'affichage concernée.
Mode de mise au
Un double-clic sur n'importe quelle fenêtre d'affichage de la zone d'aperçu activera mode de mise au point. Lorsque le mode focus est activé, toutes les autres fenêtres d'affichage sont masquées et la zone d'aperçu est agrandie pour s'adapter à la fenêtre d'affichage sélectionnée dans l'espace de fenêtre disponible. Double-cliquez à nouveau sur la vue focalisée ou appuyez sur le bouton échapper touche, quittera le mode focus, révélant toutes les autres fenêtres d'affichage.
Redimensionnement temporaire
Lorsqu'une fenêtre d'affichage est en mode focus, un contrôle de largeur de redimensionnement temporaire s'affiche sur l'écran. côté droit de la fenêtre d'affichage. Lorsque le mode focus est quitté, la fenêtre d'affichage revient à sa valeur de largeur d'origine.
Il est également possible de passer rapidement à une largeur de point d'arrêt prédéfinie en clic droit le contrôle de redimensionnement et la sélection de l'une des options disponibles dans le menu contextuel.
Contrôles des points d'arrêt
Lorsqu'une fenêtre d'affichage est en mode focus, les contrôles de point d'arrêt sont affichés en haut bas de la fenêtre d'affichageCes contrôles vous permettent de modifier temporairement la largeur du point d'arrêt actuel de la fenêtre d'affichage focalisée.
Il est également possible de passer à un point d'arrêt particulier à l'aide des raccourcis clavier suivants :
- Point d'arrêt LG – ⌘1
- Point d'arrêt MD – ⌘2
- Point d'arrêt SM – ⌘3
- Point d'arrêt XS – ⌘4
Toile panoramique
À l'aide d'une souris Apple Magic Mouse ou d'un trackpad, il est possible de déplacer le canevas d'aperçu principal en faisant défiler votre doigt dans n'importe quelle direction dans l'espace vide du canevas d'aperçu. Alternativement, le canevas d'aperçu peut également être déplacé en appuyant sur le bouton et en le maintenant enfoncé. la barre d'espace sur votre clavier et en faisant glisser l'espace vide du canevas, dans n'importe quelle direction.
Options de toile
Il existe également une gamme d'options auxquelles on peut accéder par clic droit n'importe où dans l'espace vide sur la toile d'aperçu.
Recharger toutes les fenêtres d'affichage
Cette option rechargera toutes les fenêtres d'affichage.
Espace de travail d'alignement central
Cette option permet d'aligner au centre l'espace de travail actuel. L'espace de travail est la zone couverte par toutes les fenêtres d'affichage de la zone de travail.
Espace de travail adapté
Cette option ajustera le niveau de zoom de la zone d'aperçu afin que toutes les fenêtres d'affichage tiennent dans le cadre de la fenêtre d'aperçu.
Vider le cache d'aperçu
Cette option effacera le cache de toutes les fenêtres d'affichage sur le canevas d'aperçu et les rechargera.
Supprimer toutes les fenêtres d'affichage
Cette option supprimera toutes les fenêtres d'affichage sur la zone d'aperçu.
Aperçu dans le navigateur
En plus de l'aperçu intégré à l'application, Blocs vous permet également de prévisualiser rapidement votre site avec l'un des navigateurs que vous avez installés sur votre Mac. Pour prévisualiser votre site dans un navigateur simplement faites un clic droit le bouton Aperçu et sélectionnez un navigateur dans le menu contextuel.
Vous pouvez en savoir plus sur la prévisualisation dans les navigateurs ici.
Simulation de l'heure et de la date
Si votre site Web utilise Interactions personnalisées qui reposent sur fois or données, vous pouvez utiliser le mode aperçu simulation de l'heure et de la date Fonctionnalité permettant de les tester. Cela vous permet de prévisualiser votre site web à une heure ou une date précise pour observer le comportement de vos interactions.
Pour accéder aux fonctionnalités de simulation de l'heure et de la date, cliquez sur le bouton horloge icône en bas coin gauche de la toile d'aperçu principale.
Si vous rencontrez des problèmes avec le mode de prévisualisation, ou si cela ne fonctionne tout simplement pas, nous vous recommandons de lire ceci guide de dépannage.