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

Pesticide 有什么用？

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

主要功能

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

為什么選擇 Pesticide for Chrome？

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

立即安裝 Pesticide！

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

 插件安裝方法

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

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

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

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

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

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

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

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

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

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

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

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