CODEWITHSUNDEEP
javascriptjquery
user952677
user952677

Reputation: 231

How can I view the data attributes value live in the chrome developers tool?

I want to see the values as I explore the DOM in the developers tool. And also if possible see what binded to the element javascript wise. Is this possible using some plug in or how would I go about doing this?

Upvotes: 23

Views: 12002

Answers (2)

oluckyman
oluckyman

Reputation: 3886

Sorry if you are limited to use only Chrome developer tools.

However for others who can use Firefox it may be useful to know that there is a great extension for Firebug: FireQuery, which is doing exactly what you ask plus other nice things.

firequery screenshot

Upvotes: 12

callumacrae
callumacrae

Reputation: 8433

Data attributes can be seen on the element: http://cl.ly/0w3V2H311E21241J2j45

If you're using jQuerys .data(), it doesn't change the data attributes of the element, so you have to call .data() to get it see it. I am not aware of any plugins that allow you to view it in the DOM explorer.

Event listeners can be found to the right by clicking on the element. Scroll down to the bottom of the CSS rules and you will see a section called "Event Listeners": http://cl.ly/2f3c3z312c3D2w43321s

Upvotes: 16

Related Questions