在JavaScirpt裡設置斷點，檢閱HTML和CSS元素並在它們更新時實時查看變化，性能分析...沒錯，這周的文章主題就是IE8裡的開發者工具。
[那是什麼？真的假的？你確定？我知道了，謝謝，再見，不過真的沒必要]。
好吧，剛才有人告訴我沒人像我一樣喜歡IE8，那麼這周的主題就寫關於Chrome的開發者工具吧。更具體點，我用 Chrome Canary ，你也應該用用它。這可不僅僅是因為Chrome Canary好像一種很小很可愛的鳥，而且它們會燃燒生命給我們提供燃料。
這裡，我列出了一些開發工具的建議，希望裡面至少有一條是你還不知道的。如果你發現你不知道的那條其實很有用，說句實話，我會非常高興的。
（在這個文章裡，我用了動態的gif。第一遍看的時候，它們很有用，不過之後就變得很討人厭了。如果你在電腦上，我建議你打開開發者工具，刪掉那些帶圖片的節點。如果你是在一臺小的設備上，那你就把那些不想看的東西用牌或者圍巾什麼的擋起來吧。）
好吧，遊戲開始了。
編輯：這一條完全值得放在最開始。評論裡的某個聰明人告訴我
**copy (someVariable)**
會把變量的值拷貝到剪貼板。我絕對會充分用這個的！
現在，節目開始。
1. 動畫審閱動畫很可愛。它們可以取悅用戶，更重要的是，它們讓我覺得愉悅。開發工具裡的動畫工具讓你可以把頁面裡的所有動畫減慢到25%或10%（世界會變得好像兔子眼中的世界一樣），甚至允許你回放某個特定的動畫。
2. 好看的截圖
當你在設備模式中時，你可以打開設備的邊框，並且在你按下截圖按鈕時，截圖會包含邊框。
結果跟你猜的可能差不多，是這個樣子的：
3. 控制臺裡的$0這是個很小的技巧。
在控制臺裡輸入$0返回的是Elements面板裡當前選中的DOM節點的引用。
這是一個該元素的真正引用，所以，你可以用例如 $0.classList.add('touch-of')或 $0.getBoundingClientRect() 這樣的代碼來把它變大，或者如果你的頁面裡加載了jQuery，你可以用諸如$($0).data()這樣的代碼來獲得節點上面的數據。
默認情況下，Chrome會給你顯示該節點DOM風格的表達。不過，如果你想以JavaScirpt對象的形式查看這個元素，你可以輸入console.dir($0)。
注意這個區別：
如果你用著很時髦的React，並且安裝了React開發者工具，那麼 $r是對React組件的引用。舉個例子，你可以輸入 $r.props來查看所有的屬性。
額外的建議：你可以在控制臺裡輸入一個元素的ID，並得到對應元素的引用，因為元素的ID是有點排序但又不完全是的全局變量。真奇怪。
4. 控制臺裡的箭頭函數這其實並不是一個開發者工具的建議，不過因為是我寫的，所以你不得不看到它，而且你肯定會喜歡它的。由於箭頭函數的出現，在控制臺裡寫一些實用的單行的函數更方便了，例如：performance.getEntries().filter(entry => entry.name.includes(『static』)) 提供了一些關於我所有的從同一個域名發出的請求的有用信息，他們的名字中還包含了靜態的信息。
當然，如果你一定要用超過一行的代碼，你可以按shift+enter到新的一行，而不執行上面的代碼。
5. 選中選擇器Elements面板上的搜索框不僅僅可以用來搜string（真有意思，它還能搜什麼呢？！），它也可以匹配CSS選擇器。這對那些需要寫選擇器，但又不是前端開發者的人或工具來說非常方便，例如，實現自動化測試。
這裡，我找了點樂子，去匹配.section-inner p:nth-of-type(2)
6. 嘗試不同顏色在你嘗試不同顏色時，你可以用eyedropper去選擇頁面上的任意元素，或者選擇頁面上已經存在的任意顏色模板，甚至是從material design中選一個現成的顏色。
注意這些動態的gif會毀了那些顏色，它們實際上並不是那樣子的。7. 檢查渲染的字體有時，你很難判斷到底是哪種字體被渲染了。在Elements面板上的Computed的最下面，你可以看到到底用了什麼字體，即使它的名字都沒有出現在font-family中。
8. 編輯頁面上的任何文字好，現在你有一個固定寬度的菜單，然後你想知道過長的文字是否還能在上面優雅地顯示。很簡單，在設計模式下試試！
接下來，你就可以在任意地方點擊並輸出文字了。
如果你是那個決定用on/off而不是true/false的人，請你來我的辦公室，我有話跟你說說。
9. 幻燈片對於性能調試來說，最好的特性無外乎Network面板上的幻燈片模式。它讓你致力於用戶體驗，而不是一些很不明確的數據，像什麼domContentLoaded。
在Adobe的頁面上，享受一下它們的字體加載有多諷刺，也是很有意思的。
每當我不開心的時候，我就會看看這個。我最喜歡的部分就是當所有的文字全消失的時候。 ### 10. 在Network面板上過濾 如果你在做任何一種性能測試，你都會想知道網絡加載了什麼。如果你的頁面上有廣告，那麼那大概會加載200多個東西。為了讓這個列表短一點，你可以通過資源類型或域名來進行過濾（按住cmd或ctrl可以多選）。
11. 深色主題沒啥，就因為它是深色主題
幸好它在偏好頁面的最上面12. Chrome代碼片段我超愛代碼片段（很可惜它們不像其他設置一樣可以在不同瀏覽器之間同步）
最棒的是它們執行的上下文是當前頁面。所以，這些代碼片段就像你頁面裡的代碼一樣，可以訪問DOM，URL，cookie以及其他跨域的資源。
結語你可能會想，你接下來該怎麼辦。我有個建議，算一算去年你在開發者工具上花了多少時間，然後花其中0.5% 的時間，在下面一周讀一讀這個文檔
請在下面的評論裡分享你最喜歡的技巧。如果它們實在太酷炫，我有可能覺得受到威脅並把它們刪了。所以，普通一點的就行。
噢，我剛想到一個額外的建議。當你安裝Chrome Canary時，用你的Google帳號登錄並同步，但是，在高級同步設置裡，不要選擇擴展。這樣，你就可以獲得你所有的書籤、歷史和其他方便的東西，但是，不會有哪些會毀了你開發環境的可以改變DOM的擴展。