javascript - Safari debugging technique to get variable change(jQuery Plugin is reseted)

I have a problem, where only some visitors of a website I host, experience a bug. It depends on the user-agent, for example, on a iPhone 11 the bug appears. On my Macbook, in all browsers(also with screen size set to iPhone 11 Size), the bug does not appear. I connected the phone to the Macbook to debug the site in Safari: In the console, I see that$(".someClass").slick() is not a function(is undefined) and therefor a part of the javasript crashes. Which is not the case, if I open the developer console on a browser running on the Macbook.

I also used breakpoints in the Safari debugger to check, why the.slick() is not available on the iPhone. When the page loads, another js file gets loaded, which contains the http://kenwheeler.github.io/slick/ (http://kenwheeler.github.io/slick/) carousel jQuery plugin. After it is loaded, I can use the$("...").slick() function without a problem. But later, when the page finishes loading completely, the function is not available anymore.

Now to my main question: Is there a way to use the Safari debugger, to break, when a jQuery plugin is loaded/removed, so I can find the location, where the.slick() function becomes unavailable?

Sadly, it is a massive legacy codebase(a Shopify theme), so there is too much code, to look manually for it. Or slowly step through the whole page loading.

I would very much appreciate your help/tips. Thank you!

Didn't find the answer?

Our community is visited by hundreds of Shopify development professionals every day. Ask your question and get a quick answer for free.