你有多少次努力找到一个特定的问题搞乱你的CSS布局？从错误的关闭标签到不正确的嵌套兄弟姐妹，CSS问题是一打分。并且使用这个CSS布局调试器，这个过程很容易。
这一行代码将遍历DOM，并以不同的颜色对每个元素进行轮廓。这样，您可以更好地可视化您的CSS如何工作（或不工作），并快速发现问题区域。
网站制作
GitHub上允许开发者节省的代码小块所谓的要旨。这些都是开源的，可以自由保存以供自己使用。这就是为什么这个CSS调试器是如此有用。它结合了Chrome的DevTools的现代实力与简单的浏览器书签工具。
要使用此代码，您应该首先从Gist页面中复制您喜欢的最佳版本。然后，您将该代码粘贴到“终端”窗口并运行。你应该最终得到如下结果：
网站制作
现在，可以在浏览器工具栏中将此代码保存为书签。但是，如果您是Chrome用户，则可以将此JS代码保存为更容易运行的代码段。
点击按钮可以重复调用此代码段。您可以解析每个页面，这些丰富多彩的CSS轮廓，为父母和孩子的DOM元素。
但是，您不应该只对Chrome感到有限。此代码段适用于所有主要浏览器，包括Firefox，Safari，Opera和Internet Explorer。
而对于任何人好奇地了解这是如何工作的，您可以查看带注释的注释版本，每行代码。
这个Gist充满了来自其他开发人员的相关用户评论和更新，帮助其更小更有效率。但是在目前的状态下，这是使用一行代码调试任何DOM的最简单的方式之一。
网站制作
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/tech/courses/260598.html