Bug 247661 - Web Inspector: Elements Copy HTML with a prettified option
Summary: Web Inspector: Elements Copy HTML with a prettified option
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Web Inspector (show other bugs)
Version: Safari Technology Preview
Hardware: All All
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2022-11-08 22:11 PST by Karl Dubost
Modified: 2024-03-31 22:14 PDT (History)
2 users (show)

See Also:


Attachments
copy HTML feature (76.09 KB, image/png)
2022-11-08 22:11 PST, Karl Dubost
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Karl Dubost 2022-11-08 22:11:44 PST
Created attachment 463463 [details]
copy HTML feature

1. Go to apple.com
2. Open Web Inspector
3. Select a node in Elements Tab
4. Ctrl + Click on the chosen node
5. A contextual menu opens
6. Choose Copy HTML

Expected:
Have an option to Copy Prettified HTML

Actual:
The HTML is a big chunk of packed text

This for example:

```
<div class="cta-links">
													<a class="icon icon-after icon-chevronright" href="/ipad-10.9/" target="_self" rel="follow" data-analytics-region="learn more" data-analytics-title="Learn more about iPad" aria-label="Learn more about iPad">Learn more</a>
													<a class="icon icon-after icon-chevronright" href="/us/shop/goto/buy_ipad/ipad" target="_self" rel="follow" data-analytics-region="buy" data-analytics-title="Buy iPad" aria-label="Buy iPad">Buy</a>
										</div>
```


In some cases when sharing code, this form (or any form that the prettifier chooses) can be clearer to explain the code (here prettified through VSCode):

```
<div class="cta-links">
  <a
    class="icon icon-after icon-chevronright"
    href="/ipad-10.9/"
    target="_self"
    rel="follow"
    data-analytics-region="learn more"
    data-analytics-title="Learn more about iPad"
    aria-label="Learn more about iPad"
    >Learn more</a
  >
  <a
    class="icon icon-after icon-chevronright"
    href="/us/shop/goto/buy_ipad/ipad"
    target="_self"
    rel="follow"
    data-analytics-region="buy"
    data-analytics-title="Buy iPad"
    aria-label="Buy iPad"
    >Buy</a
  >
</div>
```
Comment 1 Radar WebKit Bug Importer 2022-11-08 22:12:53 PST
<rdar://problem/102125455>