如何通過二等分來調試CSS

我用來調試CSS的工作流程之一

我今天有這個問題。

我在新的在線課程頁面上添加了Paddle按鈕，因此人們可以單擊“立即購買”按鈕，然後會顯示漂亮的Paddle彈出窗口。

彈出窗口中有一個加載指示器，一個帶有微調器的圓形，裡面有一個問題：單擊“立即購買”按鈕時，微調器指示符不在圓形內部居中，如以下gif所示：

我真的不知道是什麼引起了這個問題，所以我在考慮如何解決它。

我在這些情況下使用的原則是二等分。我也叫它分裂與不平等。

我打開了DevTools並移至“源”面板，該面板顯示了頁面中加載的所有文件。我搜索了我的一個CSS文件，因為我的直覺是CSS頁面乾擾了Paddle自己的CSS規則。

所以我刪除了全部該文件的內容。

當您在“源”面板中更改CSS文件時，Chrome會自動更改頁面的外觀，因此我能夠檢查並看到微調器現在可以正常工作了！

因此，該CSS中的規則之一就是問題。

我如何找出哪條線？

該文件有312行。我從第150到312行中選擇並刪除它。再試一次。問題仍然存在，因此它必須起源於前149行。

我擊中了cmd-Z（撤消）放回我刪除的那些行，並刪除第70-149行。

問題解決了，所以問題線就在那裡。我再次點擊cmd-Z以恢復刪除的行。

依此類推，您明白了。沖洗並重複直到找到出現問題的線。

免費下載我的CSS手冊