Beautify HTML when copying inner/outer HTML from the inspector

RESOLVED FIXED in Firefox 67

Status

enhancement
P3
normal
RESOLVED FIXED
2 years ago
5 months ago

People

(Reporter: pbro, Assigned: pbro)

Tracking

(Blocks 1 bug)

unspecified
Firefox 67
Points:
---
Dependency tree / graph

Firefox Tracking Flags

(firefox67 fixed)

Details

Attachments

(1 attachment)

1. Go to google home page
2. Go to html body#gsr.hp.vasq div#viewport.ctr-p div#searchform.jhp form#tsf.tsf div.tsf-p div.jsb
   in the Inspector
3. Copy Outer HTML

This is what you get:

<div class="jsb" style="padding-top:18px"><center><input value="Google Search" aria-label="Google Search" name="btnK" jsaction="sf.chk" type="submit"><input value="I'm Feeling Lucky" aria-label="I'm Feeling Lucky" name="btnI" jsaction="sf.lck" type="submit"></center></div>

This is the actual outer HTML because the site minified it.
However, it's not very useful when you want to share the code or use it in a text editor.

It would be great if there was an option to beautify this HTML automatically.

Note that keeping the default formatting might also be needed in some situations, to check various things like if there's a space character somewhere, etc.

So this has to be an option. Either a new set of context menu entries, or a pref, or a checkbox in the settings panel.
Product: Firefox → DevTools

I will go ahead with the plan outlined above: there will be a new pref (not surfaced outside of about:config for now) that one can turn on to beautify the HTML when copying it through the inspector's "copy inner HTML" and "copy outer HTML" context menu items.

Assignee: nobody → pbrosset
Status: NEW → ASSIGNED
Pushed by pbrosset@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/b7080c6d1c05
New pref to beautify HTML code when copying from the inspector; r=jdescottes

Hey Karl. This feature came from you, originally. As you can see, it's about to land.
This first MVP approach was to just hide this behind a pref. So if you want to take advantage of this feature when it lands, please do the following:

  • open about:config
  • set devtools.markup.beautifyOnCopy to true
  • right click on any HMTL element in the inspector and choose Copy > Inner/Outer HMTL
  • profit!
Flags: needinfo?(kdubost)
Status: ASSIGNED → RESOLVED
Closed: 6 months ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 67

Wonderful! Thanks Patrick!

Flags: needinfo?(kdubost)
You need to log in before you can comment on or make changes to this bug.