google chrome devtools - locating the corresponding jQuery code upon clicking on HTML -
when jquery code separated html completely, code becomes lot leaner , easier maintain. but, makes debugging , exploring underlying code more difficult crack down.
my question if there easy way ( using chrome devtools ) locate corresponding jquery code given html.
let's break down example. we've got html this;
<i class="icon-chevron-right navigation-arrow"></i>
this html displays right arrow. though html not suggest arrow clickable, user point , click on arrow , things happen. let's click brings next testimonial div. , each click on arrow keeps bringing next testimonial , that's there it.
now... when want debug this, naturally, turn on dev tools panel , spot arrow what... there no function name or that'll script.
we know there click event tied icon code?
perhaps, there easy way figure out. hence question.. .
i add console.debug('arrow click handler called', this, arguments);
on handler , have appearance on web developer console link source line made call. should work on other browsers.
Comments
Post a Comment