在 Firefox 或 Chrome Inspector 中复制显示的 HTML(保持缩进和格式)

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

我想知道是否有办法在 Firefox 的检查器(开发人员工具)或 Chrome 中复制 html 与开发工具显示的完全一样。

很多页面没有格式正确的代码。如果您转到 "View Source Code" (CTRL+U),有时会一团糟。两个浏览器的开发工具都做了非常整洁的格式和缩进,但我不知道如何复制它。

例如,检查器中的代码如下所示:

[Firefox 开发工具中的格式化代码]

粘贴到sublime text,就是一长串代码:

<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>

有一个可以安装 Ctrl + O 的 Sublime 插件(打开插件搜索字段的快捷方式,我想现在无法测试)“%Formater%”只需输入并安装 HTML 格式化程序插件它应该自动排序你的代码。或者使用Atom.io,括号

据我所知,没有办法以格式化的方式复制HTML。不过,至少对于 Firefox DevTools 存在 feature request asking to allow to select the elements shown within the tree,因此您可以复制它们。不过,我不确定这是要以格式化方式复制元素还是仅复制 HTML 源。

话虽如此,有像 Free Online HTML Formatter 这样的在线工具可以做到这一点。

在 Firefox 中,select输入一些文本后,您可以右键单击它,然后选择 View Selection Source。然后,将打开一个名为 DOM Source Selection 的新选项卡,其中突出显示 selected HTML 来源。主要是为了快速select你想要的目标元素。对于几乎任何 IDE,它都会很容易地格式化 selected DOM。