您有多少次努力找到一个困扰 CSS布局的特定问题 ？ 从缺少结束标记到嵌套不正确的兄弟姐妹，CSS问题一毛钱。 有了这个CSS布局调试器 ，这个过程变得容易得多 。
这一行代码将遍历DOM，并用不同的颜色勾勒出每个元素的轮廓 。 这样，您可以更好地可视化 CSS的工作方式（或不工作），并快速发现问题区域 。
GitHub允许开发人员保存称为Gists的 少量代码 。 这些都是开源的，可以免费保存供自己使用 。 这就是这个CSS调试器如此有用的原因。 它结合了Chrome DevTools的现代能力和 简单的浏览器书签 。
要使用此代码，您应该首先从Gist页面中 复制最喜欢的任何版本 。 然后， 将代码粘贴到“终端”窗口中并运行它 。 您应该最终得到这样的结果 ：
现在，可以将此代码另存为浏览器工具栏中的书签 。 但是，如果您是Chrome用户，则可以将此JS代码另存为代码段 ，从而更容易运行。
只需单击一个按钮，即可反复调用此代码段。 您可以解析每个页面 ，其中充满了这些丰富多彩CSS轮廓，适用于父母和孩子的DOM元素。
但是，您不应该只局限于Chrome。 此代码段适用于所有主要浏览器 ，包括Firefox，Safari，Opera和Internet Explorer。
对于想了解其工作原理的任何人，您都可以签出带注释的版本，其中包含每行代码的注释 。
该要点充满了相关的用户评论和其他开发人员的更新，从而使它变得更小，更有效。 但是在当前状态下，这是用单行代码调试任何DOM的最简单方法之一 。
另请阅读： 如何重构CSS –指南