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.
Find the answer in similar questions on our website.
Write quick answer
Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.