5

Learning client side code of an existing site, would like to understand some activity that takes place totally at the client side.

Want to know what JS handlers are being called when I click on a specific element. Is there a way to see this information in some kind of debugger?

I'm using Firefox with Firebug, or Chrome

shealtiel
  • 8,020
  • 18
  • 50
  • 82

2 Answers2

1

You can use the Chrome Developer tools to do what you are looking for if I'm reading your question correctly (apologies if I did not). In Chrome, right-click on the element in the rendered page and choose "Inspect Element". On the right side of the tool window that opens there's a section called "Properties" that will pop down a list when clicked on. Investigating the sub-categories should show you what functions are hooked up to what events. You can then use the "Scripts" area (tab at the top of the Development Tools window) to set breakpoints and observe the behavior in script files. Hope that helps.

Andrew Mount
  • 391
  • 2
  • 6
0

Most sites will use some sort of Javascript framework which uses their own event management system, rendering firebug's or chrome dev tool's DOM inspection tools rather useless.

Luckily it isn't too difficult to tap into the event systems of these frameworks. There's FireQuery, which is an extension for Firebug that integrates very nicely with Firebug's DOM inspector, but it works only for jQuery. For other frameworks, there's also Visual Event

David Tang
  • 92,262
  • 30
  • 167
  • 149