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"> </a></div>
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.
- Align <hr> to the left in an HTML5-compliant way
- How to remove required to an element using jQuery?
- Can I make a textarea grow with text to a max height?
- How can you hide the arrow that is displayed by default on the HTML5 <details> element in Chrome?
- Append element as sibling after element?
- jQuery on click to check if it has a div with a certain class and then change the value of a different class
- How to display WooCommerce product long description in the head?
- Set the table column width constant regardless of the amount of text in its cells?
- String interpolation via directive
- Stylesheet not loaded because of MIME type
- MIDI music support in HTML5
- How do I have my .hta file deleted after a period of time?
- How to fill the whole canvas with specific color?
- Change onClick attribute with javascript
- JavaScript shuffle elements but track original index or use modulus to insert them into parent markup
- Auto height div with overflow and scroll when needed
- Pug is not correctly generating the HTML even with the correct pug indentation
- Carousel Slider indicator as circle shape
- Position sticky on thead
- Bootstrap collapse all accordions on button click
- Why does my Shadow DOM button (tabindex="0") get focus after the regular button (tabindex="10") and how can I fix it?
- How to add a watermark to a canvas that already has an image?
- How to apply bootstrap style to inline <select> element
- Embed Github contributions graph in website
- autocomplete= off not working in chrome
- Animating progress bars with CSS
- Is it possible to create this shape using pure CSS?
- How to Justify text in HTML?(Netsuite AdvancedPDF)
- How to have a link that has a product id in it
- animations in css don't work when going into the page with hyperlink