1. Accueil
  2. Pour commencer
  3. Mode de prévisualisation
  1. Accueil
  2. Utiliser Blocs
  3. Interfaces
  4. Mode de prévisualisation

Mode de prévisualisation

Bien que Blocs fournit une représentation très précise de votre site final tel que vous le concevez, il y a des moments où vous devrez peut-être rapidement prévisualiser votre site pour vérifier et tester d'autres aspects de conception tels que interactions, faire défiler FX et de 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.

Astuce pour les débutants

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 comme vous le feriez dans un navigateur Web, sans avoir à quitter l'écran principal Blocs application. Pour entrer en mode aperçu, il suffit de clic gauche le bouton de lecture situé à droite du contrôle du point d'arrêt, ou bien avec le raccourci clavier V.

Changement de points d'arrêt

En plus du mode de conception, le mode de prévisualisation a également accès au contrôles de point d'arrêt. Ces contrôles peuvent être utilisés pour basculer rapidement et facilement entre différentes tailles d'écran, afin de vérifier les caractéristiques de réactivité de votre site.

Outils de développement

L'aperçu de l'application vous donne également accès aux puissants outils d'inspection des développeurs WebKit. Les outils d'inspection sont un excellent moyen d'inspecter le code de votre site et de déboguer tout problème potentiel que vous rencontrez. Ils sont accessibles à l'aide du bouton de menu en haut à gauche du cadre de prévisualisation.

Ou bien simplement clic droit n'importe quel élément d'une page (en mode aperçu) et en sélectionnant Inspecter.

Aperçu dans le navigateur

Ainsi que dans l'aperçu de 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.

Encore des problèmes?

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.

Aperçu du réseau local

La Blocs Le serveur de prévisualisation est également accessible depuis n’importe quel appareil sur le même réseau que votre Mac. En mode aperçu, il y a un bouton avec un antenne symbole situé en haut à gauche du cadre principal de l’application. Cliquer sur ce bouton ouvrira un menu contextuel avec deux options.

Aperçu du largage aérien

La première 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 Air Drop. Les URL partagées à l’aide d’Air Drop sont automatiquement ouvertes dans le navigateur Web de l’appareil récepteur.

Encore des problèmes?

Si vous constatez que les options Air Drop 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

Le deuxième bouton copiera l'URL du réseau local dans le presse-papier de votre Mac. La saisie de cette URL dans un navigateur Web sur n'importe quel appareil connecté au même réseau que votre Mac vous permettra de prévisualiser et de tester votre site sur l'appareil réel.

Mis à jour le 12 mars 2023

Cet article a-t-il été utile?

Articles Relatifs