Bug 271958 – Web Inspector: attributes prettification of the HTML code

• Status: NEW
• Component: Web Inspector

[Karl Dubost]

Created attachment 470693 [details]
prettified code + Web Inspector: Elements

1. Go to a site with HTML with a number of attributes.
2. Look at the layout in Web Inspector: Elements.

Result:
Elements are presented as a tree, but attributes are not prettified/beautified.



It would be great to have this kind of layout:

<div class="vp-video-wrapper content-area-sibling-enabled"
     data-content-area-sibling-eligible="">
    <div class="vp-video">
        <div class="vp-telecine">
            <video preload=""
                   tabindex="-1"
                   autopictureinpicture=""
                   src="blob:https://vimeo.com/0d0c2d74-88de-484b-8370-c3bcff93fc89"
                   style=""></video>
        </div>
    </div>
    <div class="vp-preview vp-preview-invisible"
         id="vp-preview"
         data-thumb="https://i.vimeocdn.com/video/1778321883-34ccc6ed64431a7c83e1063516881c26afa69b0066b99778877355f086a1a02d-d?mw=960&amp;mh=540"
         data-thumb-width="960"></div>
</div>


A potential side benefit would be to be able to specify a breakpoint on modification of the value of a specific attribute.

[Radar WebKit Bug Importer]

<rdar://problem/125701221>

[Karl Dubost]

Created attachment 470694 [details]
Copy HTML

To note that the feature: Copy HTML from the contextual menu creates a non-prettified version of the code too. (There is another bug: bug 247661 for giving the option to copy/paste a prettified version of the code.)


<div class="vp-video-wrapper content-area-sibling-enabled" data-content-area-sibling-eligible=""><div class="vp-video"><div class="vp-telecine"><video preload="" tabindex="-1" autopictureinpicture="" src="blob:https://vimeo.com/0d0c2d74-88de-484b-8370-c3bcff93fc89" style=""></video></div></div><div class="vp-preview vp-preview-invisible" id="vp-preview" data-thumb="https://i.vimeocdn.com/video/1778321883-34ccc6ed64431a7c83e1063516881c26afa69b0066b99778877355f086a1a02d-d?mw=960&amp;mh=540" data-thumb-width="960"></div></div>