When creating websites I often use jQuery's .data() function to add data to elements.
Is it possible to view all data which is stored with an element in Chrome?
So when I inspect an element it shows the data in Chrome itself.
If not would it be possible to write a plugin to 'extend' to Chrome element inspector to also show to data?
Open the inspector, and into the console, type
$('<some selector>').data()
and then hit return to evaluate the data() method and show its return value directly.
There's no need to use console.log unless you're calling it within non-interactive code.
Chrome Query
Can be found in the Chrome Extensions Webstore and adds another tab to the properties panel in the developer tools.
Type into the chrome console:
console.log($('selector').data());
and it will list the data in that element
For this reason, I don't use the $(selector).data() pattern, and, instead I use a more HTML natural $(selector).attr('data-name','value') which adds the values to the actual HTML.
$(selector).attr('data-name','value') does not work in IE8+ browsers. .data() is preferred. Also, a user defined var such as say: data-name is not an attribute in HTML.
来源：https://stackoverflow.com/questions/5941725/is-it-possible-to-view-jquery-added-data-in-chrome