CODEWITHSUNDEEP
google-chromegoogle-chrome-devtools
aurel
aurel

Reputation: 3122

how to inspect jquery code on chrome developer tools?

I use web developer tools to inspect html and subsequently see the css that is attached to the html element. This is proving to be a great process for learning from other websites (and the debugging my own)

Is there a way to inspect the javascript as well? So when I select the element, to be able to see the javascript related to the element?

Upvotes: 1

Views: 9749

Answers (3)

Faisa Klinsmann
Faisa Klinsmann

Reputation: 1

I had the same problem and have been wandering a bit until I found how to do it on Chrome:

1. Open the Inspector Ctrl + Shift + i

2. Select the element that you would like to inspect

3. Click on the Event Listeners tab

4. Click on the link next to the event listener you would like to check

5. Click on Pretty Print (Symbolized as {} at the bottom of the window)

Upvotes: 0

Mouna Cheikhna
Mouna Cheikhna

Reputation: 39638

In the element panel you can find all information related to an element including events attached to it.

You can use console in the element panel to inspect an element using dir(elementId)which dumps the object with the given id, as a JavaScript object with its properties.

Upvotes: 3

Frodik
Frodik

Reputation: 15455

You can see javascript code that is attached as event to any element on the page. In Developer tools its in the Elements tab and each element has "Event Listeners" - there you see what events and what javascript will be catched and executed.

Upvotes: 1

Related Questions