How to debug a specific JavaScript click event?

Question

On yahoo weather page, there is link labelled as C that changes temperature unit from Fahrenheit to Celsius.

Wheater yahoo

I am looking debug this action and understand what JavaScript gets executed behind the scenes which convert F into C. What is the way of debug such things?

Link: http://weather.yahoo.com/?w=2295401

Let your JS debugger step through the javascript code as it gets executed. — PeeHaa
– PeeHaa, Commented Nov 11, 2012 at 19:42
@GaurishSharma: Most browsers these days have debugging tools. Firefox has Firebug, for example. Chrome has developer tools, etc. These are what you'd use to step through JavaScript. — David
– David, Commented Nov 11, 2012 at 19:45
@David - If you can show me how its done by taking this example, It would be great — CuriousMind
– CuriousMind, Commented Nov 11, 2012 at 19:48

lostsource · Accepted Answer · 2012-11-15 14:44:33Z

41

Using Google Chrome,

Right Click on an item which is changing 'visually' when the action you want to debug takes place, and click 'Inspect Element'. In this case we can inspect the temperature value
Right Click again on the element from the DOM view and select Break on -> Attributes modifications
Now perform the action you want to debug (in this case click the °C item)

Inspect Element

You will notice that the code will 'Pause' and you can debug code in the debugger

Debugger

In this case however, the code is compressed/minified so it will be very tough to understand what is actually going on, but the same approach could be used for other similar situations

Update:

Watch this Chrome Dev Tools video for lots of useful debugging tips: http://www.youtube.com/watch?v=BaneWEqNcpE

edited Nov 15, 2012 at 14:44

answered Nov 11, 2012 at 20:24

lostsource

22k9 gold badges71 silver badges90 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

CuriousMind Over a year ago

While this still doesn't answer my question but it provide a starting point which is helpful. Thank you

Collectives™ on Stack Overflow

How to debug a specific JavaScript click event?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related