Pesticide 是一款我用了很久的CSS调试插件，专门帮前端开发者解决布局问题。它的功能非常纯粹：为页面上的每一个HTML元素添加彩色轮廓线。这样你就能一眼看清元素的位置、边距、有没有意外重叠，再也不用在浏览器开发者工具里逐个检查了。

为什么推荐它？

日常写CSS时，最头疼的就是“元素为什么不按预期排列”？尤其是用Flexbox或Grid做复杂布局时，经常需要反复调整边距和宽度。Pesticide 直接把所有元素的边框标出来，结构一目了然。相比浏览器自带检查器（按F12）里手动悬停查看，它更快、更直观——只需点击一次插件图标，整个页面的层次结构就“暴露”无遗。

与其他CSS调试工具的对比

市面上也有类似工具，比如 CSS Peeper 偏重样式提取，而 Pesticide 专注视觉布局。它不会修改你的代码，只是插入一段CSS轮廓样式，刷新页面或关闭插件后恢复原样，非常干净。对于新手学习盒模型、内边距、外边距的影响，这个插件简直是救星。我在Udemy的全栈课程里就靠它讲课，学生反馈学盒子模型再也不晕了。

使用场景与技巧

  • 快速诊断元素是否溢出父容器：轮廓线能看到边界，如果子元素超出父元素，轮廓会重叠或超出。
  • 定位定位（position）问题：绝对定位的元素轮廓会浮在文档流之外，一眼就能发现。
  • 配合媒体查调试响应式布局：切换视口时，轮廓自动更新，帮你发现断点处的布局断裂。

当然，它也有小缺点：默认颜色有点扎眼（亮色边框），但你可以通过选项调整透明度。瑕不掩瑜，对于需要快速排查布局问题的前端开发者来说，Pesticide 是最轻量的帮手。如果你还没试过，建议在Chrome商店搜一下，装上后立刻打开一个复杂页面体验——你会爱上这种“透视”的感觉。