Search code examples
javascriptjquerydeveloper-tools

Is there a way to view jQuery DOM.data() in the developer tools?

Lets say I have a jQuery object to which I have attached a js object as data, like so:

var myObj = {
    fname: 'Tom',
    lname: 'Sawyer',
    age:   12
};
$('#myelement').data('myObj',myObj);

Is there a convenient way to view myObj in the debug tools provided with Chrome or Firefox? One way I could do it would be to write it to the console within the javascript:

console.debug({myObj:$('#myelement').data('myObj')})

But maybe there is already a mechanism inside these already rich tools that let's me see this data without having to insert extra code?

It's somehow associated with the DOM element, but where exactly is it stored? I've hunted around inside the tool in Chrome including looking under the 'Resources' tab where it has 'Local Storage' etc.

Solution

  • These objects are stored inside the jQuery.cache object.

    What you can do is find the cache entry id by selecting the DOM Element and then browsing in the Properties tab for the property 'jQuery{some-random-id}'.

    Then you can use the value of that id to query the jQuery.cache in question. Type into the console:

    jQuery.cache[id]

    The image demonstrates with a screenshot.

    enter image description here