如何除錯元素 CSS 過寬而造成捲動軸

如何除錯元素 CSS 過寬而造成捲動軸

相信在寫前端樣式時時常都會遇到一個問題,就是元素過寬造成出現捲動軸或是手機可以拖移至螢幕外諸如此類的問題,最土法煉鋼的除錯方式就是一層一層地慢慢下 display:none 看是哪一個元素太寬造成破版,直到最近發現有一位大神寫了一段簡短的 js code 幫助 debug。

解決方案

[].forEach.call($$("*"),function(a){a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)})

只要將上面這段 code 貼在你的 console 內就可以看到效果,馬上就可以知道是哪一個元素在搞鬼了。

參考資料

108 byte CSS Layout Debugger