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?
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.
Go to DevTools settings (the cog wheel). Check General > Sources > Display variable values inline while debugging.
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.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With