mirror of
https://github.com/bigskysoftware/htmx.git
synced 2025-10-02 15:25:26 +00:00
doc fix
This commit is contained in:
parent
eeaf856224
commit
beee4b2df9
32
www/docs.md
32
www/docs.md
@ -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)
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user