Chrome新版JS調試工具

很多前端開發工程師都對Chrome瀏覽器情有獨鐘。原因很簡單：一來她啟動速度快，執行效率 高，給網頁瀏覽帶來流暢和快感；二來她實現了很多新的標準，支持很多高級屬性，讓網頁體驗更好，更高大上；三來就不得不提一下她的調試工具了，對于前端開 發工程師更是無異于左右手。然而，大概是因為強迫癥得問題，我今天卻遇到一個讓我有點接受不了的功能…

由于，我的Chrome開啟自動升級功能。所以我的Chrome總是最新的，下圖是我目前的Chrome瀏覽器版本：

而最近我在進行代碼調試的時候，發現她的調試工具中多了一些東西——當我們使用斷點調試的時候，Chrome調試工具將變量直接輸出到了源代碼旁邊，下面我們一起看下效果：

當然這種設計不可否認有其好的地方：運行時變量直接可見，很方便查看，多數時間不需要再將鼠標移到變量上甚至使用 Watch 功能來查看了。但是她為什么會讓我感到不爽呢？

我個人覺得，她也有不好的地方：其一，在源代碼中輸出運行時變量，雖然有顏色區分，但不得不承認會一定程度降低源代碼的可讀性；其二，從上圖我們不 難發現，變量的輸出是以逗號分割緊接輸出，其實當變量過多時并不便于查看；其三，從調試空間來考慮，并不適合一次性顯示過多信息，尤其考慮到國內的開發條 件，還有很多使用小屏幕設備開發的前端工程師。所以，一開始我其實是不愿意接受這種設計的，不知道有沒有和我一樣感覺的小伙伴。

然而，事情沒有想象的那么糟。慶幸的是Chrome并沒有去除鼠標移到變量上查看變量信息的功能，我們依然可以采取原有的開發習慣進行開發調試。但是，那些“多余”的信息顯示在那里，總還是讓我心里不舒服（強迫癥傷不起啊），有沒有什么辦法可以把她們干掉呢？

答案是肯定的。作為努力做好用戶體驗先去的Google工程師們，怎么可能忽略各類開發者們的感受，Chrome調試工具給我們提供了很便捷的方法來配置是否顯示這些信息，點擊調試工具右上角那只小齒輪圖標（設置），我們在“General”面板中會看到這樣一條配置：

意思很明確：在調試的時候在行內顯示變量的值。所以我果斷的將其取消了，然后，我的界面整齊干凈了，心里舒服多了。

當然，我寫這些文字，不是想要說明新版Chrome中的調試工具不好，我只是想表達對于我這種有強迫癥的前端開發者來說，新增的功能未必是好，或者說還需要一定的時間來接受新的操作習慣。如果有和我一樣的朋友，也可以通過這樣的方式慢慢習慣。

作者博客：百碼山莊