Отладка

Декларативное и событийно-ориентированное программирование с использованием htmx (или других декларативных языков) открывает замечательные возможности и обеспечивает высокую продуктивность. Однако по сравнению с императивным подходом у него есть недостаток: отладка может оказаться более сложной задачей.

Определить, почему что-то не происходит, порой непросто, особенно если вы не знакомы с определёнными приёмами.

Вот эти приёмы:

Первый инструмент для отладки — метод htmx.logAll(). Он фиксирует все события, инициируемые htmx, позволяя вам детально разобраться в том, как работает библиотека.

htmx.logAll();

Конечно, это не объяснит, почему htmx не делает что-то. Также вы можете не знать, какие события DOM-элемент инициирует для использования в качестве триггера. Чтобы решить эту проблему, вы можете использовать метод monitorEvents(), доступный в консоли браузера:

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

Это выведет в консоль все события, происходящие с элементом, у которого есть идентификатор theElement, и позволит вам точно увидеть, что с ним происходит.

Обратите внимание, что это работает только из консоли, вы не можете встроить это в тег скрипта на вашей странице.

Наконец, если дело доходит до крайности, вы можете захотеть отладить сам htmx.js, загрузив несжатую версию. Это около 2500 строк JavaScript, так что не слишком большой объем кода. Скорее всего, вы захотите установить точку останова в методах issueAjaxRequest() и handleAjaxResponse(), чтобы увидеть, что происходит.

И не стесняйтесь присоединиться к Discord, если вам нужна помощь.

Создание демонстраций

Иногда, чтобы показать ошибку или разъяснить применение, удобно задействовать сайты для JavaScript-сниппетов, такие как jsfiddle. Чтобы облегчить создание демонстраций, htmx предоставляет сайт с демонстрационным скриптом, который установит:

• htmx
• hyperscript
• библиотеку для имитации запросов

Просто добавьте следующий тег скрипта в вашу демонстрацию/фиддл/или что угодно:

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

Этот инструмент позволяет создавать имитационные ответы с помощью тегов template, в которых атрибут url определяет соответствующий URL. Содержимое шаблона (его innerHTML) становится ответом для этого URL, что делает процесс создания таких ответов простым и удобным. Для имитации задержки ответа можно использовать атрибут delay, указав в нём целое число — количество миллисекунд задержки.

В шаблонах поддерживаются простые выражения с использованием синтаксиса ${}.

Важно помнить, что этот подход предназначен исключительно для демонстрационных целей. Нет гарантии его долгосрочной работы, так как он всегда использует последние версии htmx и hyperscript!

Пример демонстрации

Вот пример работы кода:

<!-- загружаем демонстрационную среду -->
<script src="https://demo.htmx.org"></script>

<!-- post-запрос к /foo -->
<button hx-post="/foo" hx-target="#result">
  Увеличить
</button>
<output id="result"></output>

<!-- ответ на запросы к /foo с динамическим содержимым в теге template -->
<script>
  globalInt = 0;
</script>
<template url="/foo" delay="500"> <!-- обратите внимание на атрибуты url и delay -->
  ${globalInt++}
</template>