Просмотреть программно присвоенное значение 'data' элементу в Firefox с помощью инструментов разработчика?

Question

В Firefox (версия 79) со встроенными инструментами разработчика, есть ли способ проверить элемент и увидеть значение атрибута данных, примененного программно (например, с помощью конструкции JQuery s $element.data('name', 'value')) ?

Обновить с примером;

Например, если My HTML похож на

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

, а в моем JavaScript, I сделали

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

так, что в HTML нет атрибута data-foo, но он есть программно, тогда при просмотре в Firefox, если я "Осматриваю элемент", как я могу увидеть его ценность?

Answer 1

Вы не можете увидеть сохраненное значение, проверив элемент. потому что $.fn.data не хранит информацию непосредственно в элементе (jQuery соответствует внутреннему значению ), и вы не можете получить доступ к сохраненному значению за пределами jQuery.

($('div.target').data('key', 'value'); не добавляйте data-key к div, например <div class='target' data-key='value'>...<div>. Чтобы вы не могли видеть значение. Вы должны получить значение с помощью кода.)

У вас есть 2 варианта:

1. Не используйте $.fn.data, используйте вместо него $.fn.attr.
2. Используйте $.fn.data(key) для доступа к сохраненному значению.

Для получения дополнительной информации см. jQuery Data vs Attr?

PS: Не используйте $.fn.data для добавления значения и $.fn.attr для получения значения или наоборот, используйте одно из них.