如何通過二等分來調試CSS

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

我今天有這個問題。

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

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

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

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

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

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

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

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

我如何找出哪條線?

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

我擊中了cmd-Z(撤消)放回我刪除的那些行,並刪除第70-149行。

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

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

免費下載我的CSS手冊


更多CSS教程: