Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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>
like image 911
Tilman Avatar asked Apr 12 '18 08:04

Tilman


People also ask

How do I copy HTML from Firefox?

You can get the source of the head and body tag via the right-click context menu (Copy > Copy Outer HTML), i.e. you can get the source of a selected node.

How do I save HTML changes in Firefox?

Select the root tag, right-click, and select Copy HTML , then paste into a text editor and save to a HTML file.


1 Answers

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.

like image 53
Sebastian Zartner Avatar answered Oct 06 '22 22:10

Sebastian Zartner