Débogage

La programmation déclarative et événementielle avec htmx (ou tout autre langage déclaratif) peut être une activité merveilleuse et hautement productive, mais un inconvénient par rapport aux approches impératives est qu’il peut être plus difficile de déboguer.

Comprendre pourquoi quelque chose ne se produit pas, par exemple, peut être difficile si vous ne connaissez pas les astuces.

Eh bien, voici les astuces :

Le premier outil de débogage que vous pouvez utiliser est la méthode htmx.logAll(). Cela enregistrera chaque événement que htmx déclenche et vous permettra de voir exactement ce que fait la bibliothèque.

htmx.logAll();

Bien sûr, cela ne vous dira pas pourquoi htmx ne fait pas quelque chose. Vous pourriez également ne pas savoir quels événements un élément DOM déclenche pour les utiliser comme déclencheur. Pour répondre à cela, vous pouvez utiliser la méthode monitorEvents() disponible dans la console du navigateur :

monitorEvents(htmx.find("#theElement"));

Cela affichera tous les événements qui se produisent sur l’élément avec l’ID theElement dans la console, et vous permettra de voir exactement ce qui se passe avec lui.

Notez que cela ne fonctionne que depuis la console, vous ne pouvez pas l’intégrer dans une balise script sur votre page.

Enfin, en dernier recours, vous pourriez vouloir simplement déboguer htmx.js en chargeant la version non minimisée. C’est environ 2500 lignes de JavaScript, donc une quantité de code gérable. Vous voudriez probablement définir un point d’arrêt dans les méthodes issueAjaxRequest() et handleAjaxResponse() pour voir ce qui se passe.

Et n’hésitez pas à rejoindre le [Discord](https://ht

mx.org/discord) si vous avez besoin d’aide.

Créer des Démos

Parfois, pour démontrer un bug ou clarifier une utilisation, il est agréable de pouvoir utiliser un site de snippets JavaScript comme jsfiddle. Pour faciliter la création de démos, htmx héberge un site de script de démonstration qui installera :

• htmx
• hyperscript
• une bibliothèque de simulation de requêtes

Il suffit d’ajouter la balise script suivante à votre démo/fiddle/whatever :

<script src="https://demo.htmx.org"></script>

Cette aide vous permet d’ajouter des réponses simulées en ajoutant des balises template avec un attribut url pour indiquer quelle URL. La réponse pour cette URL sera l’innerHTML du template, ce qui facilite la construction de réponses simulées. Vous pouvez ajouter un délai à la réponse avec un attribut delay, qui doit être un entier indiquant le nombre de millisecondes à retarder.

Vous pouvez intégrer des expressions simples dans le template avec la syntaxe ${}.

Notez que cela doit être utilisé uniquement pour des démos et n’est en aucun cas garanti de fonctionner sur de longues périodes, car il récupérera toujours les dernières versions de htmx et hyperscript !

Exemple de Démo

Voici un exemple du code en action :

<!-- charger l'environnement de démo -->
<script src="https://demo.htmx.org"></script>

<!-- post à /foo -->
<button hx-post="/foo" hx-target="#result">
    Count Up
</button>
<output id="result"></output>

<!-- répondre à /foo avec du contenu dynamique dans une balise template -->
<script>
    globalInt = 0;
</script>
<template url="/foo" delay="500">
    ${globalInt++}
</template>