Copy HTML in Firefox or Chrome Inspector as displayed (maintaining indentation and formatting)

Question

I would like to know if there is a way, either in the inspector (developer tools) of Firefox or Chrome, to copy html exactly like the dev tool is displaying it.

A lot of pages don't have well formatted code. If you go to "View Source Code" (CTRL+U) it's sometimes a mess. The dev tools of both browser do a very neat formatting and indentation, but I cannot figure out how to copy it.

For example, the code looks like this in the inspector:

[Formatted code in Firefox dev tool]

Pasted to sublime text, it is just one long line of code:

<div class="mod_customnav block"><a href="startseite.html#skipNavigation50" class="invisible">Navigation überspringen</a><ul class="level_1"><li class="verband first"><a href="vereine.html" title="Die Vereine im Badischen Sportschützenverband" class="verband first">Vereine</a></li><li class="geschaeftsstelle"><a href="oeffnungzeiten.html" title="Die Öffnungszeiten der Geschäftsstelle" class="geschaeftsstelle">Öffnungzeiten</a></li><li class="geschaeftsstelle"><a href="anfahrtsplan.html" title="So finden Sie uns" class="geschaeftsstelle">Anfahrtsplan</a></li><li class="formulare"><a href="waffenrecht.html" title="Waffenrechtliche Formulare" class="formulare">Waffenrecht</a></li><li><a href="sitemap.html" title="Die Website im Überblick">Sitemap</a></li><li><a href="kontakt.html" title="Kontaktformular">Nachricht an uns</a></li><li class="last"><a href="impressum.html" title="Impressum" class="last">Impressum</a></li></ul><a id="skipNavigation50" class="invisible">&nbsp;</a></div>

Answer 1

As far as I know, there is no way to copy the HTML in a formatted way. Though, at least for the Firefox DevTools exists a feature request asking to allow to select the elements shown within the tree , so you can copy them. I'm not sure, though, whether this is meant to copy the elements in a formatted way or also just copies the HTML source.

Having said that, there are online tools like the Free Online HTML Formatter , which allow to do that.

Answer 2

Theres an Sublime plugin which you can install Ctrl + O (shortcut to open search field for plugins i guess can't test now) "%Formater%" just type that in and install that HTML formatter plugin it should sort your code automatically. Or use Atom.io, Brackets