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 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 dans l'application vous permet de prévisualiser votre site comme vous le feriez dans un navigateur Web, sans avoir à quitter le menu principal Blocs application. Pour entrer en mode aperçu, il suffit de clic gauche le bouton de lecture dans le coin supérieur droit de la barre d'outils principale de l'application, ou alternativement 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
Dans l'aperçu de l'application, vous avez également accès aux puissants outils d'inspecteur de développement WebKit. 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. Ils sont accessibles à l'aide de l'icône des petits engrenages en haut à gauche du cadre d'aperçu.
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.
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
Blocs prend également en charge la prévisualisation du réseau local, qui vous permet de prévisualiser votre site sur n'importe quel appareil connecté au même réseau que votre Mac. Si la page actuellement prévisualisée a son type de fichier défini sur .html, puis une URL de prévisualisation spéciale sera imprimée dans le coin supérieur droit de la fenêtre principale de l'application, en mode prévisualisation. La saisie de cette URL dans un navigateur Web sur un 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.
Solis - Aperçu avancé
Nous avons créé un Blocs outil compagnon (Solis) qui est conçu pour rationaliser le processus de prévisualisation avec Blocs. Solis permet la prévisualisation d'un Blocs site sur plusieurs tailles d'écran à la fois, alors qu'il est en cours de conception. Vous pouvez en savoir plus sur Solis ici.