Tracy can work with hotwire turbo

alnux

I jus making tests with turbo, but Tracy has problemas to work with turbo , becouse turbo make ajax's requests and load the page without browser load something like SPA is there any way to put Tracy script into body for turbo reloads Tracy on each page

Marek Bartoš

Tracy attaches itself automatically to the <body> element. But you should also be able to add it manually via {php if(\Tracy\Debugger::$productionMode === false){\Tracy\Debugger::renderLoader();}} (example is for latte)

alnux

Marek Bartoš wrote:

Tracy attaches itself automatically to the <body> element. But you should also be able to add it manually via {php if(\Tracy\Debugger::$productionMode === false){\Tracy\Debugger::renderLoader();}} (example is for latte)

This a answear to my question of tracy into body and it generate into body

<script src="/?_tracy_bar=content.d747f93f09&amp;XDEBUG_SESSION_STOP=1" data-id="d747f93f09" async></script>

but i dont know why tracy debug bar does not load, instea of this there apears next error

Uncaught TypeError: Cannot read properties of null (reading 'Tracy')
    at new Panel (?_tracy_bar=content.03b9631840&XDEBUG_SESSION_STOP=1:36:31)
    at ?_tracy_bar=content.03b9631840&XDEBUG_SESSION_STOP=1:455:30
    at NodeList.forEach (<anonymous>)
    at Debug.loadAjax (?_tracy_bar=content.03b9631840&XDEBUG_SESSION_STOP=1:453:48)
    at ?_tracy_bar=content-ajax.03b9631840_1&XDEBUG_SESSION_STOP=1&v=0.290149127817092:1:13
Panel @ ?_tracy_bar=content.03b9631840&XDEBUG_SESSION_STOP=1:36
(anonymous) @ ?_tracy_bar=content.03b9631840&XDEBUG_SESSION_STOP=1:455
loadAjax @ ?_tracy_bar=content.03b9631840&XDEBUG_SESSION_STOP=1:453
(anonymous) @ ?_tracy_bar=content-ajax.03b9631840_1&XDEBUG_SESSION_STOP=1&v=0.290149127817092:1

on Turbo docs installing-javascript-behavior tolds that the scripts need to be inside Turbo:load event

document.addEventListener("turbo:load", function() {
  // ...
})

but how to do this with tracy???

other way y dont know why inside of body show the above error, others custom scripts load without problem.. i was think that tracy maybe will work but i was wrong. again maybe tracy works inside turbo:load event

Last edited by alnux (2023-07-24 02:24)

Evilkyo

I'm having the same problem, does anyone have a solution?

alnux

Evilkyo wrote:

I'm having the same problem, does anyone have a solution?

hi evilkyo, i find a tool that maybe work but i didnt prube it util now, but you can… if works talks something about. the tool is https://github.com/…acy-reloader

mskocik

alnux wrote:

hi evilkyo, i find a tool that maybe work but i didnt prube it util now, but you can… if works talks something about. the tool is https://github.com/…acy-reloader

Tracy reloader is for something different than what you are trying to achieve. If you are willing to try alternative to turbo, try https://swup.js.org/

alnux

mskocik wrote:

alnux wrote:

hi evilkyo, i find a tool that maybe work but i didnt prube it util now, but you can… if works talks something about. the tool is https://github.com/…acy-reloader

Tracy reloader is for something different than what you are trying to achieve. If you are willing to try alternative to turbo, try https://swup.js.org/

hi @mskocik, thanks but do you know roughly the difference between these two technologies? turbo and swup, becouse about 3 days ago hear about swup and i know somthing about turbo

thanks

Last edited by alnux (2023-07-31 16:42)

mskocik

Okay, so the thing they have in common is that they both handle page navigation.

Main difference is that Turbo supports handling form submit out of the box. Swup doesn't have such thing. But it has Forms plugin, which could be used or at least used as a template for your solution.

There are also frames in Turbo. In Nette you have snippets (on the server side), which is an equivalent to frames (more or less). You just need the client JS handler. Nette docs mention Naja. If you would like to use Naja with swup, you would need to write your JS to glue it together.

Unique to Turbo seems to be stream support. I am assuming just from documentation, never had a change to use those.

Swup just released v4 which seems to be great update. Didn't have a chance to update yet.

I am typically doing it like this: swup for page navigation and additional custom JS for forms submits/snippet handling/other JS functionality

alnux

mskocik wrote:

Okay, so the thing they have in common is that they both handle page navigation.

Main difference is that Turbo supports handling form submit out of the box. Swup doesn't have such thing. But it has Forms plugin, which could be used or at least used as a template for your solution.

There are also frames in Turbo. In Nette you have snippets (on the server side), which is an equivalent to frames (more or less). You just need the client JS handler. Nette docs mention Naja. If you would like to use Naja with swup, you would need to write your JS to glue it together.

Unique to Turbo seems to be stream support. I am assuming just from documentation, never had a change to use those.

Swup just released v4 which seems to be great update. Didn't have a chance to update yet.

I am typically doing it like this: swup for page navigation and additional custom JS for forms submits/snippet handling/other JS functionality

I find your tracy-reload and i was thinking that if swope work somting similar to turbo maybe it can be works..that is the way i told that maybe can be work

mskocik

Tracy reloader extension was just dev-tool to automatically refresh page when some source files were changed. You wouldn't be able to get tracy info about Turbo ajax requests this way