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.

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.

• javascript
• jquery
• firebug
• jquery-lint

Share Improve this question Follow edited Jul 21, 2011 at 0:57 Brock Adams 93.7k2323 gold badges241241 silver badges305305 bronze badges asked Apr 22, 2011 at 15:38 ThomasThomas 34.2k129129 gold badges372372 silver badges644644 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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.

Take a look at http://firequery.binaryage./ (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.