我使用一種工作流來調試 CSS
今天我有這個問題。
我將Paddle按鈕添加到我的新在線課程頁面上,這樣人們就可以點擊“立即購買”按鈕,然後出現漂亮的Paddle彈出窗口。
彈出窗口有一個加載指示器,一個內部有一個旋轉器的圓圈,問題是:點擊“立即購買”按鈕時,旋轉器指示器未居中於圓圈內,如下gif所示:
我真的不知道是什麼原因導致這個問題,所以我在考慮如何解決它。
我在開發者工具中打開源代碼面板,該面板顯示頁面加載的所有文件。我搜索了我的一個CSS文件,因為我的直覺告訴我,頁面的CSS可能干擾了Paddle的CSS規則。
所以我刪除了該文件的所有內容。
當您在源代碼面板中更改CSS文件時,Chrome會自動更改頁面的外觀,因此我可以檢查並確認旋轉器現在正常工作!
所以,問題就在那個CSS文件的某個規則中。
如何找出是第幾行?
該文件有312行。我從第150行到312行進行了選擇並刪除。再試一次。問題仍然存在,所以它必定來自前149行。
我使用 cmd-Z(撤銷)來恢復我所刪除的那些行,然後刪除第70行到第149行。
問題消失了,所以問題肯定存在於這些行中。我再次使用 cmd-Z 來恢復我所刪除的行。
依此類推,直到找到引起問題的那一行。