使用开发人员工具查看以编程方式为 Firefox 中的元素分配 'data' 值?

View programatically assigned 'data' value on element in Firefox with Developer Tools?

在带有内置开发者工具的 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 中查看时,如果我“检查元素”,我如何才能看到值是吗?

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

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

您有 2 个选择:

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

有关详细信息,请参阅 jQuery Data vs Attr?

P.S:不要使用 $.fn.data 来添加值和 $.fn.attr 来获取值,反之亦然,坚持使用其中之一。