Debugging jQuery with Chrome Dev Tools in Codepen [Solved]

Debugging jQuery with Chrome Dev Tools in Codepen [Solved]
0.0 0

#1

How do I debug jQuery-intensive code within Codepen’s debug shell using Chrome Dev Tools? I can’t get the Chrome debugger to crawl through the app code without diving into jQuery scripts.


#2

Nevermind. Got it working. Used blackboxing to prevent debugger from jumping into jQuery library.


#3

I’m glad you found a solution, but also note that when you’re in a function that you don’t need to debug, you can hit the “Step out” button in the debugger, which will run through the function you’re currently in and pop back out to its calling context. Even better, there’s a “skip over” button you can use to avoid stepping into the jQuery code in the first place. This is useful even for your own code.


#4

Thanks for the pointers! It seems that unless dependencies are blackboxed, the Chrome debugger will still crawl into these scripts. Hitting the “Step over next function call” button when inside jQuery just steps over to the next function within jQuery. Anyway, still testing. Thanks again.