This commit is contained in:
carson 2021-03-11 04:37:42 -07:00
parent eeaf856224
commit beee4b2df9

View File

@ -725,13 +725,41 @@ If you set a logger at `htmx.logger`, every event will be logged. This can be v
}
```
Htmx includes a helper method:
## <a name="debugging"></a> [Debugging](#debugging)
Declarative and event driven programming with htmx (or any other declartive language) can be a wonderful and highly productive
activity, but one disadvantage when compared with imperative approaches is that it can be tricker to debug.
Figuring out why something *isn't* happening, for example, can be difficult if you don't know the tricks.
Well, here are the tricks:
The first debugging tool you can use is the `htmx.logAll()` method. This will log every event that htmx triggers and
will allow you to see exactly what the library is doing.
```javascript
htmx.logAll();
```
if you want to log everything while developing.
Of course, that won't tell you why htmx *isn't* doing something. You might also not know *what* events a DOM
element is firing to use as a trigger. To address this, you can use the
[`monitorEvents()`](https://developers.google.com/web/updates/2015/05/quickly-monitor-events-from-the-console-panel) method available in the
browser console:
```javascript
monitorEvents(htmx.find("#theElement"));
```
This will spit out all events that are occuring on the element with the id `theElement` to the console, and allow you
to see exactly what is going on with it.
Note that this *only* works from the console, you cannot embed it in a script tag on your page.
Finally, push come shove, you might want to just debug `htmx.js` by loading up the unminimized version. It's
about 2500 lines of javascript, so not an insurmountable amount of code. You would most likely want to set a break
point in the `issueAjaxRequest()` and `handleAjaxResponse()` methods to see what's going on.
And always feel free to jump on the [Discord](https://htmx.org/discord) if you need help.
## <a name="hyperscript"></a>[hyperscript](#hyperscript)