Jump to content

Problem debugging htmx library


Ivan Gretsky
 Share

Recommended Posts

Good day, @adrian!

Let me first of all once again thank you for Tracy Debugger. It made the development with PW a whole new thing. Even more pleasant and powerful. You get so used to it that if it doesn't work somewhere you feel lost. That's what happened to me.

I am using htmx js library. It makes xhr requests to the server, receives html and swapes some part of the page with the part of the received document making it feel dynamic. I am using it to make Form Builder forms embedded with method C submit without page reload. I got hooks on several methods of Form Builder. And I put bd's there. But when htmx runs, Tracy doesn't show those dumps. Why could this be happening and how to fix it? I really need Tracy's magic to debug it))

P.S. Hooks on Page::render for the pages loaded with htmx work, so it is not like nothing is working.

Link to comment
Share on other sites

Thanks both of you!

That was my thought too. I did it (adding ajax-header) last nigh with no success. Checked it today - I am pretty sure it doesn't help. X-Requested-With: XMLHttpRequest header is being sent, but bd() in the FormBuilder hook defined in ready.php still doesn't show.

Link to comment
Share on other sites

Ok, I am getting deeper) I figured out I need to turn off No debug bar in... -> Form Builder Iframe in Tracy's config. That fixed it! And it seems that we do not even need the X-Requested-With: XMLHttpRequest header for that.

But I am actually having another issue with my implementation. Which I am not sure sure is Tracy related, but maybe you could help me anyway) I am Initiating a page reload with js (document.location.reload();) after certain data was returned (on successful form submission). Is there a way to pass Tracy debug data  in this case to the final page? I already coped temporarily turning the redirect off, but would like to know if I could do it in case that was impossible.

  • Like 1
Link to comment
Share on other sites

On 9/30/2021 at 6:15 PM, Ivan Gretsky said:

I am using htmx js library. It makes xhr requests to the server, receives html and swapes some part of the page with the part of the received document making it feel dynamic. I am using it to make Form Builder forms embedded with method C submit without page reload. I got hooks on several methods of Form Builder.

@Ivan Gretsky I had thought of doing this too! How's it working?? 

Link to comment
Share on other sites

  • 1 year later...
  • 4 months later...
On 2/15/2023 at 11:42 AM, Jonathan Lahijani said:

Tracy's interface in the frontend seems to fall apart when using HTMX boosted links:
https://htmx.org/docs/#boosting

Has anyone had experience with this and know how to fix it?

An update on this as I now know what the problem is... 

If using TracyDebugger with HTMX's head-support extension, TracyDebugger's bar will become "unstyled" when doing an htmx-style request.  This happens because the CSS that TracyDebugger uses to style the bar gets stripped-out with that extension (since it's in the <head> and the two don't play nicely with each other).  I will follow up with a solution if I'm able to find one.

  • Like 2
Link to comment
Share on other sites

The problem I had was with the way I was using the head-support extension.  I was using the "merge" behavior instead of the "append" behavior.  Merging would destroy all Tracy injected code that it placed in <head>, but appending preserves it.  Appending leaves a bit of extra HTML behind after HTMX does its merge, but it doesn't affect how a page gets rendered or lead to incorrect results.

 

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...