StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<h2>Using <a href="http://getfirebug.com/" rel="nofollow noreferrer">Firebug</a>, <a href="http://firequery.binaryage.com/" rel="nofollow noreferrer">FireQuery</a> and <a href="http://jsfiddle.net/gnarf/qpJWp/" rel="nofollow noreferrer">this fiddle</a>:</h2> <p>Hitting Cmd+Shift+C (Inspect Element) and clicking on <em>the button</em> reveals this: <img src="https://i.stack.imgur.com/LAtHL.png" alt="Screenshot 1"></p> <p>Clicking on the events <code>Object {click= }</code> reveals this (after expanding some info)</p> <p><img src="https://i.stack.imgur.com/VX2gI.png" alt="Screenshot 2"></p> <p>And clicking on the <code>function()</code> reveals this:<br> <img src="https://i.stack.imgur.com/GBWQ4.png" alt="Screenshot 3"></p> <p>Which should be the code you are looking for, right?</p> <p>As a note, Firebug can't always find the exact line of code something came from. I've had this method fail completely! Another approach is to use named function expressions. Changing the code to:</p> <pre><code>$('#bigButton').click(function showMyLlama(){ $('img#theLlama').show(); }) </code></pre> <p>Now reveals this when inspecting the <code>events</code> object:</p> <p><img src="https://i.stack.imgur.com/rdO9R.png" alt="alt text"></p> <p>Which is way more useful than just <code>function()</code> as it is now obvious that this handler shows us a llama. You can also now search the code for the function name and find it!</p> <hr> <h2>Using <a href="http://www.google.com/chrome" rel="nofollow noreferrer">Chrome</a>, its built in web inspector and <a href="http://jsfiddle.net/gnarf/qpJWp/show" rel="nofollow noreferrer">this fiddle</a>:</h2> <p>Hitting Cmd+Shift+C (Inspect Element) and clicking on the button shows this:<br> <a href="https://i.stack.imgur.com/GJQEJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GJQEJ.png" alt="Screenshot"></a></p> <p>Clicking on the button in the elements inspector then pressing Escape to open the JS Console: <a href="https://i.stack.imgur.com/EAtDW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EAtDW.png" alt="Screenshot"></a></p> <p>In the Chrome Console, <code>$0</code> refers to the selected element in the elements panel.</p> <p>Typing in <code>$._data( $0 )</code> will give us the jQuery (internal) data object which includes events, just like in our Firebug example, sadly, Chrome wont let us click on the function, but it will let us see the source: </p> <p><code><Broken Screenshot link></code></p> <hr> <h2>A note about <a href="http://api.jquery.com/live" rel="nofollow noreferrer"><code>.live()</code></a> events:</h2> <p>Live Events are stored on <code>$._data( document, "events" )</code> and contain an <code>origHandler</code> that points at the function:</p> <p><code><Broken screenshot link></code></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload