Search code examples
javascriptjquerylightboxjquery-eventspageload

Page load event debugging

I'm working on a big application. In my application a lightbox opens up on page load and refresh. There are many JavaScript files included in the application, and many developers have worked on it. I'm trying to debug and identify the JS code that is causing that lightbox to open up so that I could edit it.

I tried adding breakpoint in Chrome developer's tool on Load (see image below), but when it stops on first breakpoint, the lightbox is already on the screen. Which means the code for lightbox was rendered before first load event listener fired up.

Chrome Developers tools Breakpoint on load

Is there any way I can find out from where that lightbox code is opening up?

P.S: I'm also unsure what is the exact code syntax used to open up the lightbox, otherwise I would have searched the source files for that syntax.

UPDATE: On further inspection, I've found out when these lines in the jQuery library file are executed, the lightbox shows up.

enter image description here

These lines appear to be event loop triggering. I'm not sure if this information is any useful for solving this problem.

Solution

  • You can use

    console.trace();

    To see what functions where invoced to get to the line in code you put the .trace in.

    Since you found a function inside the jQuery library that is somehow involved in the opening you should put it there.

    Aditiinally you can put a code-sided breakpoint underneath it by calling

    debugger;

    If not already. consider using a local, uncompressed version of jq for easier debugging.