是否可以在Chrome中查看jQuery添加的数据

Question

在创建网站时，我经常使用jQuery的.data()函数向元素添加数据。

是否可以查看与Chrome中的元素一起存储的所有数据？

因此，当我检查一个元素时，它会在Chrome中显示数据。

如果没有，是否可以编写一个插件来“扩展”到Chrome element inspector以显示数据？

Answer 1

打开检查器，然后在控制台中输入

$('<some selector>').data()

然后点击return以评估data()方法并直接显示其返回值。

除非您在非交互式代码中调用它，否则无需使用console.log。

Answer 2

Chrome Query

可以在Chrome Extensions Webstore中找到，并在开发人员工具的属性面板中添加另一个标签。

Answer 3

输入chrome控制台：

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

，它将列出该元素中的data

Answer 4

Chrome Query

Answer 5

出于这个原因，我不使用$(selector).data()模式，而是使用更自然的$(selector).attr('data-name','value') HTML，它将值添加到实际的HTML中。

$(selector).attr('data-name','value')在IE8 +浏览器中不起作用。 .data()是首选。此外，用户定义的var（例如：data-name）不是HTML中的属性。