使用开发人员工具查看 Firefox 中元素上以编程方式分配的"数据"值？

Question

在内置开发工具的Firefox(79版(中，是否有一种方法可以检查元素并查看程序应用的数据属性的值(例如使用JQuery的$element.data('name', 'value')构造(？

用示例更新；

例如，如果我的HTML像

<span id="myElement">This is my element</span>

在我的JavaScript中，我已经完成了

$("#myElement").data("foo", "bar");

使得HTML中没有data-foo属性，但它以编程方式存在，那么当在Firefox中查看时，如果我"；检查元件"；，我怎样才能看到它的价值？

Answer 1

您无法通过检查元素来查看存储的值。因为$.fn.data不直接在元素上存储信息(jQuery内部存储值(，并且您不能访问jQuery外部存储的值。

($('div.target').data('key', 'value');不像<div class='target' data-key='value'>...<div>那样将data-key添加到div中。所以你看不到值。你必须使用代码获得值。(

您有两个选项：

1. 不要使用$.fn.data，而是使用$.fn.attr
2. 使用$.fn.data(key)访问存储的值

有关更多信息，请参阅jQuery Data vs Attr？

p.S：不要使用$.fn.data来添加值，使用$.fn.attr来获取值，反之亦然，请使用其中一个