3

I just installed firebug and want to see and debug jquery and javascript methods when fired.

Suppose that a jquery function will be called when button is clicked. When the site is huge and the page includes many js files then it is very difficult to point out which function will be called and where it is defined, because people attach button events in a different way. I mean the event is attached sometime based on css. So sometimes I just cannot find out which method is going to be invoked.

So please give me some tips so that I can see those functions invoke and the function body at run time wherever it is defined. Thanks.

Brock Adams
  • 90,639
  • 22
  • 233
  • 295
Thomas
  • 33,544
  • 126
  • 357
  • 626

2 Answers2

4

You can try using FireQuery. From the site:

  • jQuery expressions are intelligently presented in Firebug Console and DOM inspector
  • attached jQuery data are first class citizens
  • elements in jQuery collections are highlighted on hover
  • jQuerify: enables you to inject jQuery into any web page
  • jQuery Lint: enables you to automatically inject jQuery Lint into the page as it is loaded (great for ad-hoc code validation)

I've used it a few times and it makes debugging (when using jQuery) much easier.

EDIT

Using the plugin, you can look at the element and see the events bound to it. Your other option is to search your codebase for anything that identifies the element (id or css class perhaps). Then you should also be able to see what gets bound.

Vivin Paliath
  • 94,126
  • 40
  • 223
  • 295
  • thanks for you answer. i will sure install FireQuery but no one give me the instruction how to see the jquery fuction call. what i need to do. where to click. please tell me in detail. thanks a lot. – Thomas Apr 22 '11 at 15:59
  • how to see what jquery function is being called when i place a mouse on a left side bar. see the site http://www.webspiders.com/ and place mouse on left side bar just top of the contact us side bar. please help. – Thomas Apr 22 '11 at 16:40
  • Hey Vivin, can you tell me whether it is possible anyhow to edit the data attribute through Firequery, like we can do by double clicking on normal element attributes in Firebug and edit them in-place? In Firequery, double clicking on the data parts takes me to a blank screen in Firebug – SexyBeast Mar 16 '13 at 22:08
  • @Cupidvogel Unfortunately I haven't used Firequery to take a look at the `data` attribute. It's also been a while since I've used it. Perhaps the newer version has this option? – Vivin Paliath Mar 17 '13 at 23:06
  • I have downloaded the latest version..I asked the creator itself, he says that it can be edited in the script panel.. – SexyBeast Mar 18 '13 at 07:47
  • @Cupidvogel Perhaps you might need to file an issue with them? I think the creator might be able to better answer this question than I :) – Vivin Paliath Mar 18 '13 at 15:15
3

Take a look at http://firequery.binaryage.com/ (FireQuery). It's an extension to FireBug that allows you to see jQuery calls. I haven't used it that much, but it might be what you're looking for.

Bojangles
  • 99,427
  • 50
  • 170
  • 208