有没有办法在开发者工具中查看 jQuery DOM.data() ？

Question

假设我有一个 jQuery 对象，我将一个 js 对象作为数据附加到该对象，如下所示：

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

在 Chrome 或 Firefox 提供的调试工具中有没有方便的查看 myObj 的方法？我可以做到的一种方法是将它写入 javascript:

内的控制台

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

但也许在这些已经很丰富的工具中已经有了一种机制，让我无需插入额外的代码就可以看到这些数据？

它以某种方式与 DOM 元素相关联，但它究竟存储在哪里？我在 Chrome 中的工具内部四处搜寻，包括查看 'Resources' 选项卡下的 'Local Storage' 等等

Answer 1

这些对象存储在 jQuery.cache 对象中。

您可以通过选择 DOM 元素找到缓存条目 ID，然后在“属性”选项卡中浏览属性 'jQuery{some-random-id}'。

然后您可以使用该 id 的值来查询有问题的 jQuery.cache。在控制台中输入：

jQuery.cache[id]

图片以截图演示。

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