使用 Pesticide 提升您的 Web 開發(fā)體驗(yàn) - 調(diào)試布局和掌握 CSS 的終極工具！

Pesticide 有什么用？

Pesticide 在您的網(wǎng)頁上疊加視覺指南，讓您輕松識別元素邊界、大小、調(diào)試布局并完善您的 CSS 框模型。 無論您是初學(xué)者還是專家級 Web 開發(fā)人員，此工具都是您解決布局問題的最佳解決方案。

主要功能

- 輕松進(jìn)行 CSS 調(diào)試：立即突出顯示元素輪廓以了解您的布局結(jié)構(gòu)。
- 輕松切換：使用鍵盤快捷鍵（如 Ctrl + Shift + P）或上下文菜單啟用/禁用 Pesticide。
- 交互式說明：時尚的橫幅提供高效使用技巧，包括如何退出或切換模式。
- 自定義：您可以在選項(xiàng)頁面中決定所需的調(diào)試信息。
- 提高生產(chǎn)力：使用直觀的視覺輔助工具節(jié)省調(diào)試復(fù)雜布局的時間。
- 添加了選項(xiàng)頁面，以便您可以控制默認(rèn)啟動時顯示/隱藏底部橫幅

為什么選擇 Pesticide for Chrome？

- 針對速度和簡便性進(jìn)行了優(yōu)化。
- 無需猜測！ 準(zhǔn)確查看元素的堆疊方式。
- 非常適合開發(fā)人員、設(shè)計師以及任何熱衷于制作像素完美網(wǎng)頁的人。
- 提高調(diào)試效率：通過概述頁面上的每個元素快速發(fā)現(xiàn)布局問題。
- 可視化 DOM：了解您的 HTML 和 CSS 如何協(xié)同塑造頁面。
- 易于使用：只需打開或關(guān)閉擴(kuò)展即可實(shí)時注入或刪除 Pesticide 樣式。
- 非常適合學(xué)習(xí)：初學(xué)者可以通過直觀地查看其 CSS 的效果來更好地了解元素布局的行為方式。

立即安裝 Pesticide！

簡化您的工作流程并控制您的網(wǎng)頁設(shè)計。 立即下載 Pesticide for Chrome，讓 CSS 調(diào)試變得輕而易舉！ 如果您真的想構(gòu)建干凈、結(jié)構(gòu)良好的網(wǎng)站，那么 Chrome 版 Pesticide 是您的工具包中必備的工具！

 插件安裝方法

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

1.首先用戶點(diǎn)擊谷歌瀏覽器右上角的自定義及控制按鈕，在下拉框中選擇設(shè)置。

2.在打開的谷歌瀏覽器的擴(kuò)展管理器最左側(cè)選擇擴(kuò)展程序或直接輸入：chrome://extensions/

3.找到自己已經(jīng)下載好的Chrome離線安裝文件xxx.crx，然后將其從資源管理器中拖動到Chrome的擴(kuò)展管理界面中，這時候用戶會發(fā)現(xiàn)在擴(kuò)展管理器的中央部分中會多出一個”拖動以安裝“的插件按鈕。

4.松開鼠標(biāo)就可以把當(dāng)前正在拖動的插件安裝到谷歌瀏覽器中去，但是谷歌考慮用戶的安全隱私，在用戶松開鼠標(biāo)后還會給予用戶一個確認(rèn)安裝的提示。

5.用戶這時候只需要點(diǎn)擊添加按鈕就可以把該離線Chrome插件安裝到谷歌瀏覽器中去，安裝成功以后該插件會立即顯示在瀏覽器右上角（如果有插件按鈕的話），如果沒有插件按鈕的話，用戶還可以通過Chrome擴(kuò)展管理器找到已經(jīng)安裝的插件。

方法二：文件夾格式插件安裝

1.首先用戶點(diǎn)擊谷歌瀏覽器右上角的自定義及控制按鈕，在下拉框中選擇設(shè)置。

2.在打開的谷歌瀏覽器的擴(kuò)展管理器最左側(cè)選擇擴(kuò)展程序。

3.勾選開發(fā)者模式，點(diǎn)擊加載已解壓的擴(kuò)展程序，將文件夾選擇即可安裝插件。

如果你在安裝過程中出現(xiàn)下圖中的錯誤程序包無效 CRX_HEADER_INVALID

可以參考：超詳細(xì)的Chrome 瀏覽器/瀏覽器插件安裝教程(全方法) 一文解決