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.

Improve this question

2 Answers 2

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.

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

6 Comments

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.
how to see what jquery function is being called when i place a mouse on a left side bar. see the site webspiders.com and place mouse on left side bar just top of the contact us side bar. please help.
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
@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?
I have downloaded the latest version..I asked the creator itself, he says that it can be edited in the script panel..
|
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.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.