I'm learning how to use breakpoints with Chrome Dev Tools sources and code written almost entirely in jQuery. When I add a breakpoint to click events a click should (I think) highlight the line of jQuery code which listens for the click on the clicked element. Instead, the display in the sources Code Panel switches from displaying main.js (which contains all my jQuery code) to displaying jquery.min.js. I think this is minified jQuery. This is of no use to me. I want, if possible, to see the breakpoint highlight the event listener in the original jQuery code. I'm running Chrome in incognito mode.
When you use jQuery to set an event handler, it creates a JavaScript event listener that calls an internal wrapper function of its own, which then calls your callback function, because jQuery event handlers are called a little differently from the way addEventListener() works. So if you set an event breakpoint in DevTools, it points to this internal wrapper, not your code, and there's no easy way to get from there to your code. Breakpoints inside the jQuery code are not really very useful unless you're trying to debug jQuery itself.
Instead, just set a normal code breakpoint in your code. For instance, if you have code like
$(".classname").click(function() {
console.log("clicked");
});
click on the console.log line in the Sources tab to set a breakpoint there.