调试

使用 htmx（或任何其他声明性语言）进行声明式和事件驱动编程可能是一项精彩且高效的活动，但与命令式方法相比，一个缺点是调试可能更棘手。

例如，如果你不了解其中的窍门，那么弄清楚为什么某些事情没有发生可能会很困难。

嗯，这里有一些技巧：

你可以使用的第一个调试工具是 htmx.logAll() 方法。它将记录 htmx 触发的每个事件，并允许你准确查看库正在执行的操作。

htmx.logAll();

当然，这不会告诉你为什么 htmx 没有做某事。你可能也不知道 DOM 元素触发了哪些 monitorEvents() 事件作为触发器。为了解决这个问题，你可以使用浏览器控制台中提供的方法：

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

这会将发生在具有 id 的元素上的所有事件输出 theElement 到控制台，并允许你准确地看到正在发生的事情。

请注意，这只能在控制台中使用，你不能将其嵌入到页面的脚本标签中。

最后，无论如何，你可能只想通过加载未最小化的版本进行调试。它大约有 2500 行 JavaScript 代码，因此代码量并不大。你很可能想在 htmx.js issueAjaxRequest() 和 handleAjaxResponse() 方法 中设置一个断点来查看发生了什么。

如果你需要帮助，请随时加入 htmx 官方讨论组。

创建演示

有时，为了演示错误或阐明用法，最好能够使用像 jsfiddle 这样的 JavaScript 代码片段。为了方便创建演示，htmx 托管了一个演示脚本站点：

• 页面
• 超脚本
• 请求模拟库

只需将以下脚本标签添加到你的 demo/fiddle/whatever 中：

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

此帮助程序允许您通过添加带有 url 属性的模板标签来添加模拟响应，以指示哪个 URL。该 url 的响应将是模板的 innerHTML，从而可以轻松构建模拟响应。您可以使用 delay 属性向响应添加延迟，该属性应为整数，指示延迟的毫秒数。

你可以使用 ${} 语法在模板中嵌入简单的表达式。

请注意，这只应用于演示，并且不能保证长时间工作，因为它将始终抓取最新版本的 htmx 和 hyperscript！

演示示例

以下是代码运行的示例：

<!-- load demo environment -->
<script src="https://demo.htmx.org"></script>

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

<!-- respond to /foo with some dynamic content in a template tag -->
<script>
    globalInt = 0;
</script>
<template url="/foo" delay="500"> <!-- note the url and delay attributes -->
    ${globalInt++}
</template>