在 Firefox 或 Chrome Inspector 中復制顯示的 HTML（保持縮進和格式）

Question

我想知道是否有辦法在 Firefox 或 Chrome 的檢查器（開發人員工具）中完全像開發工具顯示的那樣復制 html。

許多頁面沒有格式良好的代碼。 如果您轉到“查看源代碼”(CTRL+U)，有時會一團糟。 兩個瀏覽器的開發工具都做了非常整潔的格式和縮進，但我不知道如何復制它。

例如，檢查器中的代碼如下所示：

[Firefox 開發工具中的格式化代碼]

粘貼到崇高的文本，它只是一行代碼：

<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

據我所知，沒有辦法以格式化的方式復制 HTML。 盡管如此，至少對於 Firefox DevTools 存在一個功能請求，要求允許選擇樹中顯示的元素，因此您可以復制它們。 不過，我不確定這是否意味着以格式化的方式復制元素，還是只是復制 HTML 源代碼。

話雖如此，有一些在線工具，例如Free Online HTML Formatter ，可以做到這一點。

Answer 2

有一個 Sublime 插件，您可以安裝 Ctrl + O（打開插件搜索字段的快捷方式，我想現在無法測試）“%Formater%”只需輸入並安裝該 HTML 格式化程序插件，它應該自動對您的代碼進行排序。 或者使用 Atom.io, Brackets