如何通過二等分法調試 CSS

我使用一種工作流來調試 CSS

今天我有這個問題。

我將Paddle按鈕添加到我的新在線課程頁面上，這樣人們就可以點擊“立即購買”按鈕，然後出現漂亮的Paddle彈出窗口。

彈出窗口有一個加載指示器，一個內部有一個旋轉器的圓圈，問題是：點擊“立即購買”按鈕時，旋轉器指示器未居中於圓圈內，如下gif所示：

我真的不知道是什麼原因導致這個問題，所以我在考慮如何解決它。

我在開發者工具中打開源代碼面板，該面板顯示頁面加載的所有文件。我搜索了我的一個CSS文件，因為我的直覺告訴我，頁面的CSS可能干擾了Paddle的CSS規則。

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

當您在源代碼面板中更改CSS文件時，Chrome會自動更改頁面的外觀，因此我可以檢查並確認旋轉器現在正常工作！

所以，問題就在那個CSS文件的某個規則中。

如何找出是第幾行？

該文件有312行。我從第150行到312行進行了選擇並刪除。再試一次。問題仍然存在，所以它必定來自前149行。

我使用 cmd-Z（撤銷）來恢復我所刪除的那些行，然後刪除第70行到第149行。

問題消失了，所以問題肯定存在於這些行中。我再次使用 cmd-Z 來恢復我所刪除的行。

依此類推，直到找到引起問題的那一行。