四個實用但容易忽略的Chrome開發工具特性

Chrome開發工具是基於Chrome瀏覽器，幫助開發人員調試代碼的控制面板。它的功能很豐富以致於咱們很難面面俱到，這裏就有幾個不太明顯但很實用的功能。

改變DOM元素狀態

右擊DOM元素，會列出功能選項，其中有一項名爲'Force Element State'，展開子菜單能夠看到幾種常見的僞類：:active, :hover, :focus, and :visited。

若是在你的CSS或JS中想要調試這些僞類效果，就能夠使用這個功能。

DOM斷點

咱們熟悉JS的斷點調試，但不多有人知道DOM也能夠斷點調試！依然右擊DOM元素，能夠看到一個名爲Break on的選項，展開有Subtree Modifications，Attributes Modifications以及Node Removal三個選項。

當JS嘗試改變DOM元素時，給元素添加的斷點便會觸發。

1. Subtree Modifications，當添加，改變，刪除子元素時觸發
2. Attributes Modifications，當元素屬性被改變時觸發
3. Node Removal，當移除元素時觸發

Console API

咱們最爲熟悉的必定是console.log，但console的方法遠遠不止這一個，有興趣的能夠看看官方文檔。這裏再講一個很實用的方法——console.count，它能夠統計代碼塊執行的次數，若是你懷疑一個函數是否是被執行了不少次，用它就能夠很輕鬆的統計出來。

function login(user) {
    console.count("Login called");
    // login() code...
}

這樣，每次調用login時都會在控制檯打印出次數

Audits

Audits能夠檢查頁面的性能方面存在的問題，並給出優化意見，好比CSS和JS的引入位置，是否開啓了Gzip壓縮，是否很好地利用了瀏覽器緩存以及沒有應用到的CSS規則等，是否是很智能很強大呢？

好了，看了這四個，也許你會開眼界，也許會以爲小兒科，但chrome開發者工具的強大之處毫不僅此。若是你有推薦的實用功能歡迎在評論分享出來。

原文