Pesticide(高级 CSS 调试器) v3.1.0 Chrome扩展插件

使用 Pesticide 提升您的 Web 开发体验 - 调试布局和掌握 CSS 的终极工具！

Pesticide 有什么用？

Pesticide 在您的网页上叠加视觉指南，让您轻松识别元素边界、大小、调试布局并完善您的 CSS 框模型。 无论您是初学者还是专家级 Web 开发人员，此工具都是您解决布局问题的最佳解决方案。

主要功能

- 轻松进行 CSS 调试：立即突出显示元素轮廓以了解您的布局结构。
- 轻松切换：使用键盘快捷键（如 Ctrl + Shift + P）或上下文菜单启用/禁用 Pesticide。
- 交互式说明：时尚的横幅提供高效使用技巧，包括如何退出或切换模式。
- 自定义：您可以在选项页面中决定所需的调试信息。
- 提高生产力：使用直观的视觉辅助工具节省调试复杂布局的时间。
- 添加了选项页面，以便您可以控制默认启动时显示/隐藏底部横幅

为什么选择 Pesticide for Chrome？

- 针对速度和简便性进行了优化。
- 无需猜测！ 准确查看元素的堆叠方式。
- 非常适合开发人员、设计师以及任何热衷于制作像素完美网页的人。
- 提高调试效率：通过概述页面上的每个元素快速发现布局问题。
- 可视化 DOM：了解您的 HTML 和 CSS 如何协同塑造页面。
- 易于使用：只需打开或关闭扩展即可实时注入或删除 Pesticide 样式。
- 非常适合学习：初学者可以通过直观地查看其 CSS 的效果来更好地了解元素布局的行为方式。

立即安装 Pesticide！

简化您的工作流程并控制您的网页设计。 立即下载 Pesticide for Chrome，让 CSS 调试变得轻而易举！ 如果您真的想构建干净、结构良好的网站，那么 Chrome 版 Pesticide 是您的工具包中必备的工具！

 插件安装方法

方法一：.crx文件格式插件安装

1.首先用户点击谷歌浏览器右上角的自定义及控制按钮，在下拉框中选择设置。

2.在打开的谷歌浏览器的扩展管理器最左侧选择扩展程序或直接输入：chrome://extensions/

3.找到自己已经下载好的Chrome离线安装文件xxx.crx，然后将其从资源管理器中拖动到Chrome的扩展管理界面中，这时候用户会发现在扩展管理器的中央部分中会多出一个”拖动以安装“的插件按钮。

4.松开鼠标就可以把当前正在拖动的插件安装到谷歌浏览器中去，但是谷歌考虑用户的安全隐私，在用户松开鼠标后还会给予用户一个确认安装的提示。

5.用户这时候只需要点击添加按钮就可以把该离线Chrome插件安装到谷歌浏览器中去，安装成功以后该插件会立即显示在浏览器右上角（如果有插件按钮的话），如果没有插件按钮的话，用户还可以通过Chrome扩展管理器找到已经安装的插件。

方法二：文件夹格式插件安装

1.首先用户点击谷歌浏览器右上角的自定义及控制按钮，在下拉框中选择设置。

2.在打开的谷歌浏览器的扩展管理器最左侧选择扩展程序。

3.勾选开发者模式，点击加载已解压的扩展程序，将文件夹选择即可安装插件。

如果你在安装过程中出现下图中的错误程序包无效 CRX_HEADER_INVALID

可以参考：超详细的Chrome 浏览器/浏览器插件安装教程(全方法) 一文解决