DOM Explorer (in Developer Tool) displays an enabled boolean attribute as empty attribute

By design Issue #9779321

Details

Author
享 長.
Created
Nov 13, 2016
Privacy
This issue is public.
Reports
Reported by 1 person

Sign in to watch or report this issue.

Steps to reproduce

If HTML has <script async src="foo.js">, DOM Explorer displays this element as <script src="foo.js" async="">. It should be <script src="foo.js" async="async">.

This occurs every boolean attribute.

Attachments

Comments and activity

  • Microsoft Edge Team

    Changed Assigned To to “Ibrahim O.”

  • Thank you for your feedback. I see that all browsers display the async attribute same in DOM which is important in perspective of interoperability across browsers unless if you can provide us the specs that purpose differ. We will be happy to assist you.

    All the best,
    The MS Edge Team  

  • Chrome 54 displays this as `

  • Oh, tag is stripped… 1st line is:

    Chrome 54 displays this as <script src="foo.js async>. I don’t think all browsers display this same.

  • You can right click and select “Edit as HTML” in Chrome DOM explorer section you will see it is <script src="foo.js" async=""> as it is in Edge and Firefox.

    Best regards,
    The MS Edge Team

  • Microsoft Edge Team

    Changed Assigned To from “Ibrahim O.” to “Jacob R.”

    Changed Status to “Confirmed”

    Changed Title from “DOM Explorer (in Developer Tool) displaya enabled boolean attribute as empty attribute” to “DOM Explorer (in Developer Tool) displays an enabled boolean attribute as empty attribute”

    Changed Status from “Confirmed”

  • Valid feedback. It’s odd to see this not presented either as <script async> or <script async="async">.

  • Microsoft Edge Team

    Changed Assigned To to “Leo L.”

    Changed Status to “Confirmed”

    Changed Assigned To from “Leo L.” to “Vidal G.”

    Changed Assigned To from “Vidal G.” to “Rob P.”

    Changed Status from “Confirmed” to “By design”

  •  Hello, and thank you for your feedback!  I’m Rob, a developer on the Microsoft Edge DevTools team.

    The DOM does not distinguish between an empty attribute value and an enabled Boolean attribute.  In other words, there is not a programmatic way to distinguish between the following two tags:

    <script async></script>
    <script async=""></script>

    In other words if the first tag is $0 and the second tag is $1, $0.getAttribute(‘async’) === $1.getAttribute(‘async’) is true.  However, $0.getAttribute(‘async’) === $0.getAttribute(‘foo’) is not true – the getAttribute of the foo attribute returns null.  When investigating the DOM for presentation in the DevTools, we use the same JavaScript APIs.

    It so happens that addressing this issue in our existing tool is particularly challenging because our templating language isn’t quite expressive enough to second part (where the punctuation itself is presented via CSS).  However, we have been working on new functionality centered around the Edge DevTools Protocol - https://docs.microsoft.com/en-us/microsoft-edge/devtools-protocol/ - and we have forthcoming work in which this will be addressed.  So, keep an eye out, particularly on our app in the Windows Store at https://www.microsoft.com/en-us/p/microsoft-edge-devtools-preview/9mzbfrmz0mnj?cm_mmc=store&activetab=pivot%3aoverviewtab - and thanks again for using Edge DevTools.

    -Rob

You need to sign in to your Microsoft account to add a comment.

Sign in