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 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 Nous ne 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é.
Champ d'adresse
Le champ de texte au centre de la barre d'outils affiche le titre de la page web actuellement chargée. Vous pouvez également l'utiliser pour saisir une URL qui sera chargée dans les fenêtres d'aperçu.
Sélection de pages
À droite du champ d'adresse, vous trouverez un menu déroulant qui vous permet de sélectionner la page actuellement 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
L'espace 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, ou a nous envoyer un courriel, 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 d'aperçu
Vous pouvez désactiver différentes options de prévisualisation automatique telles que : aperçu des liens, défilement synchronisé, en cliquant sur et contribution en utilisant les options d'aperçu situées dans le coin inférieur droit de la zone d'aperçu.
Afficher l'aperçu du lien
Cette option active ou désactive l'affichage de la petite vignette d'aperçu située dans le coin inférieur droit de la zone d'aperçu lorsque le curseur est placé sur un lien dans la fenêtre d'affichage.
Défilement synchronisé
Cette option active ou désactive le défilement synchronisé sur toutes les fenêtres d'affichage.
Clics synchronisés
Cette option permet d'activer ou de désactiver la synchronisation des clics sur toutes les fenêtres d'affichage.
Entrée synchronisée
Cette option permet d'activer ou de désactiver la synchronisation des entrées sur toutes les fenêtres d'affichage.
Options d'espace de travail Canvas
Il existe également toute une gamme d'options d'espace de travail accessibles 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.
Calculateur de poids de page
Le poids estimé de la page Web actuelle est affiché dans le en haut à droite coin de la toile d'aperçu.
Cette estimation ne collecte tenir compte des optimisations d'exportation uniquement, comme le remplacement d'images WebP ou la minimisation des ressources.
Le calculateur de poids de page nécessite macOS Sonoma le minimum.
Le poids des pages peut avoir un impact sur la vitesse de chargement et le référencement. Nous vous recommandons de le conserver. 1MB pour des performances optimales. Si une page dépasse 2.5MB, l'étiquette devient orange pour indiquer qu'elle est plus lourde que celle recommandée. Pages sur 5MB déclenchera une étiquette rouge, avertissant que la page est trop lourde et risque de se charger lentement.
Réduire le poids de la page
Si votre site Web contient des pages avec un poids de page élevé, reportez-vous à pour obtenir des conseils sur la façon de le réduire.
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 Paisible 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.