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

Posted 2023-03-07

【中文标题】在 Firefox 或 Chrome Inspector 中复制显示的 HTML（保持缩进和格式）

【英文标题】：Copy HTML in Firefox or Chrome Inspector as displayed (maintaining indentation and formatting)

【发布时间】：2018-09-22 07:45:28

【问题描述】：

我想知道是否有办法在 Firefox 或 Chrome 的检查器（开发者工具）中复制 html，就像开发工具显示它一样。

很多页面没有格式良好的代码。如果您转到“查看源代码”（CTRL+U），有时会一团糟。两种浏览器的开发工具都做了非常简洁的格式和缩进，但我不知道如何复制它。

例如，检查器中的代码如下所示：

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

粘贴到 sublime 文本中，就是一长串代码：

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

【问题讨论】：

为此，您需要为 sublime 安装代码格式化程序（或使用已经实现的，不了解 sublime）。几乎每个文本编辑器都有这个功能。

【参考方案1】：

据我所知，没有办法以格式化的方式复制 HTML。不过，至少对于 Firefox DevTools 来说，存在一个feature request asking to allow to select the elements shown within the tree，所以你可以复制它们。不过，我不确定这是要以格式化方式复制元素，还是只是复制 HTML 源代码。

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

【讨论】：

感谢功能请求的链接。由于作者甚至想复制“...”，就像它们在 DevTools 中显示的那样，感觉他也意味着以格式化的方式。

【参考方案2】：

在 Firefox 中，选择一些文本后，您可以右键单击它，然后选择 View Selection Source。然后，将打开一个名为 DOM Source Selection 的新选项卡，并突出显示选定的 HTML 源。主要是为了快速选择你想要的目标元素。几乎可以使用任何 IDE 轻松格式化选定的 DOM。

【讨论】：

是的，但如果我选择所有这些并粘贴，格式就消失了

【参考方案3】：

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

【讨论】：

只有在原始代码结构良好的情况下才有效。看来您几乎没有阅读我的问题。

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

尽管我不能接受您的原始答案，但您的提示还是很有帮助的。我最终安装了 CodeFormatter (packagecontrol.io/packages/CodeFormatter)，它工作得非常好，而且比将代码来回粘贴到在线 html 格式化程序之类的东西要容易得多。