improve HTMX error messages

[elieobeid7]

For example, I see this error

But I have too many htmx elements, it would be great if htmx would indicate which element caused the error, like maybe

You have an error on this line

   <nav
      class="navbar navbar-expand-lg"
      hx-get="/navigation"
      hx-trigger="load"
      hx-target="this"
      hx-swap="innerHTML"
    ></nav>

and maybe a bit more verbose, so we know what to fix easily, like div doesn't exist or anything really.

Currently all I see is some generic javascript error on htmx line 1

[MichaelWest22]

I recommend using the non minified version of htmx when trying to develop and debug an application as it is often hard to identify the cause of your issues when using the production ready minified version. Simply update the script tag or script used for htmx to one of the non minified ones from the docs like:

<script src="https://unpkg.com/[email protected]/dist/htmx.js" integrity="sha384-oeUn82QNXPuVkGCkcrInrS1twIxKhkZiFfr2TdiuObZ3n3yIeMiqcRzkIcguaof1" crossorigin="anonymous"></script>

Using this makes reading the htmx source and reporting on line number where it is having issues way easier. You can then easily read the htmx source in your browsers dev tools and set breakpoints as required much easier.

When you get an error like you had you can just click on link on the right with the line number and developer tools will take you to the exact line in htmx and you can then set a breakpoint here (by clicking on the left side of the line you want) and refresh your page and then it will then pause execution at that failing point and this allows you to see the live variables like the div details in developer tools by hovering over the source variables to find the problem element.