Where's the JS coming from?

Sometimes you work on site where you didn't build any of it. The person who did isn't available but you need to do some updates. I had a recent project where jQuery had been used and I needed to change the JavaScript but I had no idea where it was coming from. With concatenated and minified files this can be even more of a headache.

Chrome's Dev Tools are excellent, and list the Event Listeners bound to a DOM element.

Chrome Dev Tools - Event Listeners

In this example I could see a click event had been bound to a link (OK, not that hard to know as I wanted to change it's click behaviour). The problem is jQuery is handling this click event so Chrome just lists jQuery as the source.

So jQuery is handling the click event? Gee, thanks!

Right clicking on the handler 'function' to 'Show Function Definition' doesn't get us anywhere either. It should go directly to the code, which it does; it shows a line of code in jQuery… not too helpful.

Show Function Definition, not that one!

At least give me a clue

With a bit of Googling I found the answer but it's tricky to know what to search on (I tried naming this post multiple times). Unsurprisingly it's in a Google forum, and Paul Irish is involved.

The full thread here. https://groups.google.com/d/msg/google-chrome-developer-tools/NTcIS15uigA/BU0nB78hK9AJ

So Dev Tools can't help us directly as it's not keeping track of what jQuery is doing. But jQuery can with _data(). It's a function for internal use only, but we can still access it, and it expects a vanilla JavaScript element:

jQuery._data

A feature of Dev Tools Console is $0. It's a reference to the last element clicked on in the Elements DOM view. $1, is the 2nd last element clicked on etc. A history of clicks. With 3 bits of the puzzle; element, _data and 'Show Function Definition' we can view the source.

$._data($0)

Output this to the console, fold open 'events', then 'click' and the raw code can be seen against 'handler'. It's short and simple in this case, but where's the code loaded from? Right-click and 'Show Function Definition'.

Show me the _data()

There it is in file, 'index.php', line 219.

Found it!

This code might have been pieced together via template partials in a CMS but it's a simple site-wide search to find it.

comments powered by Disqus

Slider / Carousels List

Setting a side the obvious question, should I use a carousel? Every 6 months or so the same old question pops-up on Twitter, what's the best…… Continue reading