如图所示在Firefox或Chrome Inspector中复制HTML(维护缩进和格式)

时间:2018-04-12 08:36:55

标签: html google-chrome-devtools firefox-developer-tools

我想知道在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>

2 个答案:

答案 0 :(得分:2)

据我所知,无法以格式化方式复制HTML。但是,至少对于Firefox DevTools存在feature request asking to allow to select the elements shown within the tree,所以你可以复制它们。但是,我不确定这是用于以格式化方式复制元素还是仅复制HTML源。

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

答案 1 :(得分:-1)

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