Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

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?

like image 701
user952677 Avatar asked Apr 24 '12 09:04

user952677


People also ask

How do I see variable values in Chrome console?

We can then check what values are stored in any variable at that point of time. Click F12 to open Developer Tools in Chrome. Or we can right-click and select Inspect (Ctrl+Shift+I). Go to Sources tab and expand Event Listener Breakpoints section.

How do I view variables in dev tools?

Go to DevTools settings (the cog wheel). Check General > Sources > Display variable values inline while debugging.

How do I find data attributes?

To get a data attribute through the dataset object, get the property by the part of the attribute name after data- (note that dashes are converted to camelCase). Each property is a string and can be read and written.


1 Answers

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

like image 185
callumacrae Avatar answered Sep 23 '22 05:09

callumacrae