相信在寫前端樣式時時常都會遇到一個問題,就是元素過寬造成出現捲動軸或是手機可以拖移至螢幕外諸如此類的問題,最土法煉鋼的除錯方式就是一層一層地慢慢下 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

Facebook 功能:

Summary
如何除錯元素 CSS 過寬而造成捲動軸
Article Name
如何除錯元素 CSS 過寬而造成捲動軸
Description
撰寫 css 樣式時常常會因為寬度的問題造成破版,可是又不知道是哪一個元素造成的,內文的程式碼可以幫助我們快速的找到是哪一個元素太寬造成破版。
Author
Publisher Name
bonze