CODEWITHSUNDEEP
jquerygoogle-chromegoogle-chrome-extensiongoogle-chrome-devtools
PeeHaa
PeeHaa

Reputation: 72672

Is it possible to view jQuery added data in Chrome

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?

Upvotes: 38

Views: 20329

Answers (5)

tobibeer
tobibeer

Reputation: 500

Chrome Query

Can be found in the Chrome Extensions Webstore and adds another tab to the properties panel in the developer tools.

Upvotes: 20

jdavid.net
jdavid.net

Reputation: 751

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.

Upvotes: 2

Kalinin
Kalinin

Reputation: 2519

Chrome Query

Upvotes: 3

namuol
namuol

Reputation: 9996

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.

Upvotes: 40

Naftali
Naftali

Reputation: 146302

Type into the chrome console:

console.log($('selector').data());

and it will list the data in that element

Upvotes: 6

Related Questions