How to display dynamically created data attributes in the Mozilla inspector?

Question

JavaScript

When adding elements dynamically, data attributes are not displayed in the inspector (ctrl+shift+c).

var o = $('<option>1</option>');
o.attr('value', 2);
o.data('rate', 3);
$("#shipping_methods").append(o);

In the inspector we see:

<select id="shipping_methods" name="shipping_id">
  <option value="2">1</option>
</select>

The obvious solution is to replace data() with attr(), but the problem is that the code is third-party and cannot be edited.

Is there any solution for displaying data attributes?
By the way, there is a similar problem with displaying the attributes set by prop().

mozilla 57.0 / jquery 1.11.1 + jquery-migrate 1.2.1

Answer 1

In jQuery, .data is not a true data attribute. They are used only the first time they are used for padding and are ignored afterwards.
Either use Element.dataset or duplicate the attributes manually.
Well, the most important question - why do you need it?