Débogage et erreurs

Déboguer le code et comprendre où et comment afficher les erreurs est une partie essentielle au développement sur HubSpot CMS. Il existe un certain nombre d'outils que vous pouvez utiliser pour gagner en efficacité lors de l'élaboration et du débogage et pour vous assurer que votre site Web est optimisé au fur et à mesure que vous le développez. 

Le système de fichiers développeur HubSpot CMS comporte de nombreuses formes de validation pour garantir que vos modèles et modules s'affichent correctement sur les pages. 

Les erreurs fatales sont des erreurs qui empêcheraient une page de s'afficher correctement. Pour garantir un rendu correct du contenu en direct, HubSpot CMS empêche la publication des modèles qui présentent des erreurs fatales. Un exemple d'erreur fatale serait l'absence de variables HubL requises, telles que standard_header_includes. Cela entraînera des erreurs lors du développement dans le gestionnaire de conception ou lors du chargement de fichiers via le CMS CLI. L'extension VS Code prend en charge le linting HubL et peut afficher les erreurs fatales dans le contexte avant de charger le fichier.

Les erreurs fatales doivent être résolues afin de pouvoir publier les fichiers. 

Les avertissements sont des erreurs ou des problèmes qui n'empêchent pas la publication des fichiers. Les avertissements sont souvent des suggestions de syntaxe ou des problèmes potentiels qu'un développeur pourrait manquer. L'extension VS Code prend en charge le linting HubL et peut afficher les avertissements en contexte avant de charger le fichier. Par exemple, si vous essayez d'inclure un fichier qui n'existe pas, un avertissement est émis pour avertir le développeur.

Les avertissements n'empêcheront jamais la publication des fichiers, mais il est recommandé d'examiner les avertissements. 

Vous pouvez activer le mode débogage sur une page en ligne en chargeant la page avec une chaîne de demande ?hsDebug=true dans l'URL.

Lors du chargement d'une page en ligne avec cette chaîne de requête, la page sera rendue :

• avec des fichiers non minifiés ;
• avec des fichiers CSS non combinés (fichiers CSS individuels proposés) ;
• sans servir les fichiers en cache.

Par ailleurs, si vous chargez une page avec ?hsDebug=true, les informations de débogage seront ajoutées en bas du code source de la page, y compris :

• si la page peut être pré-rendue et les raisons pour lesquelles elle ne peut pas être pré-rendue ;
• une répartition du délai de demande de rendu, qui peut être utile pour identifier les composants de la page qui prennent le plus de temps à être rendus. Cette répartition sera également ajoutée à l'onglet Délai de la console de développement de votre navigateur sous Demandes de documents.

• Des erreurs et des avertissements, tels que les limites de fonction HubL ou les fichiers manquants.

• Dans l'éditeur de page, ajoutez le paramètre suivant à l'URL, puis appuyez sur Entrée : ?developerMode=true
• Avec la page rechargée, vous serez maintenant en mode développeur. Vous pouvez quitter le mode développeur à tout moment en cliquant sur Quitter le mode développeur dans l'angle supérieur droit.

Lorsque vous êtes en mode développeur, vous pouvez accéder au code d'un module spécifique en cliquant sur le module associé, puis en cliquant sur Ouvrir dans le gestionnaire de conception dans l'éditeur de barre latérale.

Vous pouvez également réinitialiser toute modification non publiée avec le contenu par défaut du modèle :

• Cliquez sur l'onglet Contenu.
• À droite du nom du modèle, cliquez sur Réinitialiser le contenu.

• Dans la boîte de dialogue, cliquez sur Oui, réinitialiser.

Dans le Gestionnaire de conception, les fichiers codés disposent d'un bouton « Afficher la sortie » qui ouvre un deuxième panneau d'édition de code, avec un code transposé du fichier que vous regardez. Ceci est utile pour voir comment votre code HubL sera transposé en CSS, HTML ou JavaScript, plutôt que de recharger les pages publiées sur lesquelles le fichier est inclus. C'est également un outil utile pour explorer les nouvelles fonctionnalités de HubL, ou pour apprendre les bases de HubL, car vous pouvez facilement voir ce que votre entrée HubL donnera en sortie. 

Le filtre HubL |pprint peut être utilisé sur les variables HubL pour imprimer de précieuses informations de débogage. Il imprimera le type de variable HubL, ce qui peut être utile pour comprendre avec quels expressions, filtres, opérateurs ou fonctions il peut être utilisé.

Par exemple {{ local_dt }} imprimera 2020-02-21 12:52:20. Si nous imprimons cette variable, nous pouvons voir que la valeur est une date (PyishDate: 2020-02-21 12:52:20). Cela signifie que nous pouvons utiliser les filtres HubL qui exploitent ou formatent les objets de type date, comme le filtre HubL |datetimeformat.

Les infos développeur d'une page établissent le contexte de toutes les données disponibles lors du rendu de la page. Ce contexte de rendu est entièrement accessible via HubL. Pour accéder aux infos développeur d'une page, sélectionnez le logo HubSpot dans le coin supérieur droit des pages publiées > Infos développeur. 

Cela ouvrira un nouvel onglet qui renvoie le contexte de rendu pour une page donnée au format JSON. Il est recommandé d'installer un formateur JSON dans votre navigateur pour faciliter la lecture des infos développeurs, comme cette extension Chrome JSON formatter. Bien que la plupart des informations contenues dans le contexte de la page soient destinées à des fins internes, cet outil peut être précieux pour voir quelles données sont disponibles via HubL lors de la création des modèles.

Par exemple, l'image suivante représente les infos développeur sur : https://desigers.hubspot.com/docs/developer-reference/cdn.

Les valeurs de ces données sont définies dans l'onglet Paramètres de l'éditeur de contenu :

Les valeurs sont ensuite accessibles pour être rendues sur les pages via HubL. Pour imprimer le titre et la métadescription dans un modèle de base, vous utiliseriez le HubL suivant.

Les données du contexte de rendu sont disponibles via HubL, et l'arborescence JSON peut être parcourue en utilisant la notation par points. Les données contenues dans les infos développeur que les développeurs impriment fréquemment comprennent les valeurs des champs de module et les balises qui ont été exportées vers le contexte du modèle.

Il est important de vérifier que les visiteurs de votre site ne vont pas vers des liens cassés. Il existe deux outils pour vous assurer que les visiteurs de votre site arrivent au bon endroit. Vous pouvez utiliser l'API de performance des sites Web pour obtenir des statuts HTTP comme les 404 et voir le temps de fonctionnement de vos sites.

Si vous constatez des erreurs 404, il convient de rediriger le visiteur vers une URL valide.

Vous pouvez également utiliser l'outil Recommandations SEO pour identifier les liens cassés dans le contenu de vos pages et les corriger rapidement.

De nombreux facteurs sont à prendre en compte pour optimiser et tester la vitesse d'un site Web. Pour des outils et des conseils pour optimiser la vitesse de votre site, consultez notre guide.