在 Chrome 的查看源代码中整理呈现的 HTML 输出？

Question

在使用诸如 CMS 和静态站点生成器之类的东西时，HTML 输出通常看起来像垃圾（错误的缩进是最烦人的缺陷）。

是否有任何解决方案可以在 Chrome 的“查看源代码”中整理/美化渲染输出？

就我而言，我使用的是静态站点生成器。在编辑器中一切看起来都很完美，但在浏览器中预览时代码会出错。

（我知道我可能可以添加一个构建任务（例如 Grunt）来处理 HTML 美化。但在许多情况下，例如在使用实时重新加载工具（我使用 Mixture.io）时，您实际上预览了网站，这不是最佳解决方案。）

Answer 1

我推荐Quick Source Viewer。
它可以向您显示当前页面的格式和颜色编码的来源。

它非常强大，可以显示页面的所有“源”，无论是 css、js 还是 html。甚至可以单独查看内联 css/js 之类的内容（突出显示注入的代码）。最好的部分是它美化了所有这些，甚至是 css（chrome 的开发工具仍然拒绝这样做）。