Debug always drops into TweenLite.js, even when idle

[Cronk]

Hello all,

   My first time posting here; I'm just starting to learn about TweenLite.js, and am fairly inexperienced with javascript in general.  With that said...

 

I have a system that I am trying to debug the function of a button on.  The system is a video + audio player in a web browser.  There's a large-ish video pane at the top, underneath that is a scrubber/progress bar showing position in the video.  To the left of the scrubber bar is a transport button (bar-left-arrow).  This transport button is supposed to reset the position of the scrubber (and the video being shown as well) to the start.  But sometimes this button doesn't work; I can repeatably make it stop and start working, so I'm trying to debug the scripts to see what is (or isn't) being set in a couple of states.

 

So, with the video paused and nothing going on (i.e. movie is not playing), I hit the 'Pause Script...' button in the Safari debugger; my intention is to then press the transport button and see what code it's running.  But I can't...as soon as I hit the 'Pause' button it always stops at a function in the TweenLite.min.js file (line 137 as reported by Safari after it pretty-prints it.  I think I have the hierarchy of the functions here correct...I took out snippets so might have missed something.  The "function(t)" is the first function in the file, immediately following the header.

(function(t) {
    "use strict";
    var e = t.GreenSockGlobals || t;
    if (!e.TweenLite) {
        ...
        d("Ticker", function(t, e) {
            var i,
                s,
                r,
                o,
                l,
                h = this,
                _ = A(),
                m = e !== !1 && b,
                f = function(t) {
                    S = A(), h.time = (S - _) / 1e3;
                    var e,
                        n = h.time - l;
                    (!i || n > 0 || t === !0) && (h.frame++, l += n + (n >= o ? .004 : o - n), e = !0), t !== !0 && (r = s(f)), e && h.dispatchEvent("tick")
                };

So it appears to be some timer or listener code that is constantly running.  But it prevents me from activating the button I'm interested in while in debug mode.  Even if I press the button with the code stopped, it doesn't get added to the call stack, so I can't step into it.

 

I did some digging in the HTML to try and figure out what the element was; I think I did, but when I put break points on the code that appeared to be tied to that element, it never broke.  So I must have tagged the wrong code.

 

Does anyone have some pointers to assist me?

 

Thanks,

Justin

 

[GreenSock]

Hm, I'm not quite sure what to tell you here. I'm not surprised that "pausing" the script resulted in something having to do with GSAP's ticker because that is just a simple requestAnimationFrame loop that keeps time and pulses down through the engine to make updates when necessary. Totally normal. It'll power down by itself, by the way, after a few seconds with no animations happening. 

 

I'm not a DevTools guru, so I don't know what to tell you about its behavior or how to get precisely what you're after here. I apologize - I really wish I had some sage wisdom for you. Maybe reach out to the Dev Tools team or Stack Overflow. 

[Cronk]

OK, well thanks for the response and looking over the request.  The suggestion to look into the Dev Tools team is a good one.

 

About the ticker, though...you mentioned that it 'powers down'.  Can you elaborate on that?  I have let the movie player sit idle for many minutes before (while researching one thing or another) and then come back to it, pause the debugger, and it still drops into this ticker routine.

 

Hmmm...was just testing that.  I have the movie player loaded up in Safari and haven't touched it for a few days, really.  I tried stopping the code and it dropped into the same parent routine, but a different sub-function.  It seemed to alternate between line 137 (which I mentioned above) and line 167:

 var C = function() {
            A() - S > 2e3 && n.wake(), setTimeout(C, 2e3)
        };

So it seems as if it is re-initializing all the time.  Maybe that's being caused some of the rest of the code that was written for us, and not so much the TweenLite/GSAP code itself.

 

 

--  J

[GreenSock]

Elaboration on the ticker's "power down": After several seconds of no tweens/timelines being around (like if they were all made eligible for garbage-collection or none were created), the ticker stops its requestAnimationFrame (or setTimeout fallback) loop. But if you have any "tick" listeners on it, that'll keep it alive (for obvious reasons). It sounds like you've still got tweens that haven't finished when you're doing your debugging. 

 

Again, very tough to troubleshoot blind, but this doesn't really sound like a GSAP issue. I guess you could try simplifying things and just run one tween on the page (don't create anything else) and just see if you still notice that behavior. I'd suggest stripping everything away and build it back up very slowly until you hit the problem - that usually helps me a lot in terms of isolating a problem. 

 

Good luck!