![整理 Chrome 查看源代码中呈现的 HTML 输出?](https://linux22.com/image/1385010/%E6%95%B4%E7%90%86%20Chrome%20%E6%9F%A5%E7%9C%8B%E6%BA%90%E4%BB%A3%E7%A0%81%E4%B8%AD%E5%91%88%E7%8E%B0%E7%9A%84%20HTML%20%E8%BE%93%E5%87%BA%EF%BC%9F.png)
在使用 CMS 和静态站点生成器之类的东西时,HTML 输出往往看起来像垃圾(错误的缩进是最令人讨厌的缺陷)。
是否有任何解决方案可以在 Chrome 的“查看源代码”中呈现输出整理/美化?
就我而言,我使用的是静态网站生成器。编辑器中一切看起来都很完美,但在浏览器中预览时代码就乱了。
(我知道我可以添加一个构建任务(例如 Grunt)来处理 HTML 美化。但在很多情况下,例如当使用实时重新加载工具(我正在使用 Mixture.io)时,您实际上预览了网站的内部版本,这不是最佳解决方案。)
答案1
我建议快速源代码查看器.
它可以显示当前页面的格式和颜色编码的来源。
它非常强大,显示全部页面的“源代码”,无论是 css、js 还是 html。甚至内联 css/js 之类的内容都可以单独查看(突出显示注入的代码)。最好的部分是它可以美化所有内容,甚至是 css(chrome 的开发工具仍然拒绝这样做)。
答案2
我通常只需按 Ctrl+Shift+I 即可进行检查。元素选项卡包含所有 html,并带有彩色编码和各部分的隐藏/取消隐藏功能。