Tracy can work with hotwire turbo
- Marek Bartoš
- Nette Blogger | 1261
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
- Member | 139
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&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:1on 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)
- alnux
- Member | 139
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
- Member | 61
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
- Member | 139
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
- Member | 61
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
- Member | 139
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
- mira.kovar
- Member | 3
materix wrote:
For reference:
@MarekBartoš wrote the solution in the first reply, which is to preload Tracy:if(\Tracy\Debugger::$productionMode === false){\Tracy\Debugger::renderLoader();}
How does it help? I try it, but wount help. Did someone found out how to preserve tracy between page loads? I Love tracy and I use it all the time.
This helps a little. On php recive request
unset($_SERVER['HTTP_X_TRACY_AJAX']);
but it cut off any „ajax“ tracy panel.
- vit.peprnicek
- Member | 20
This also happened to me, Tracy ran up but it didn't work. The problem was that I had something like this in my javascript:
document.querySelector('body').innerHTML += "Next html code";
This left the html code but all js things like handlers, properties, … disappeared and the page was “dead”. Maybe hotwire does something similar.