Chrome調試工具奇淫技

所以對前端er來說，熟練掌握瀏覽器調試工具是性能優化的必備條件。

首先我們得知道如何打開Chrome調試工具。
你可以鼠標右鍵，選擇審查元素（Inspect Element）或者使用快捷鍵（??I）。

接下來我們先簡要介紹一下Chrome調試工具各個工具的作用。

Element

Elements板塊你可以看到整個頁面的Dom結構。你可以在這里編輯HTML,查看元素CSS,查找元素等等。

Network

這個板塊，你可以查看頁面所加載的所有資源響應情況，響應時間，瀏覽器等待時間，狀態碼，MINE Type,資源大小等。

Sources

Sources就是所有資源了，你可以看到頁面加載的資源，圖片，css,js等，它們會按照資源的來源分類。

Timeline

跟前面的工具相比，Timeline就高級很多了。它可以讓你查看瀏覽器的渲染流程。解析代碼,布局，繪制，合并渲染層。了解更多，查看之前的文章瀏覽器渲染流程

Profiles

Profiles工具主要是用來檢測CPU占用程度，堆棧申請的內存。

Resources

Resources工具顯示資源的，跟Sources不同的是，它會對文檔類型分類。并且它可以查看，增加，刪除，修改頁面LocalStorage，SessionStorage,Cookies等等。

Audits

Audits工具非常智能，它會告訴你如何優化頁面，告訴你應該合并CSS,JS，應該明確圖片的大小，以及某個css文件中unused CSS的百分比等。

Console

Console應該都很熟悉了吧？經常會以為少寫了’}’而報語法錯誤。當然它的功能遠不止這些。點擊這里查看更多

奇淫技

• 在開發者工具打開的情況下，長按左上角的刷新按鈕，會出現多種加載選項。
  
• Source面板下的文件是可以修改并且支持版本回退的。打開一個文件，進行編輯，保存。右鍵打開Local Modifications,你可以看到保存記錄，你可以選擇回退，到某個時間點。你也可以另存為~
  
• Elements工具中的選擇器，支持css選擇器
  
• Console工具’支持’jQuery語法，選中后，你還可以右鍵選擇Reveal In Elements Panel,跳回Element工具。
  
• Elements工具右側css模塊，最底部可以看到某個元素最終具體使用的字體。
  
• devtools中的setting，支持在DevTools打開時強制清除緩存，記錄AJAX,打開source map,增刪改模擬器等等。
  
• 在Source面板下，右鍵選擇Add Folder to Workspace，之后就可以直接編輯該目錄下的任何文件。
  
• Source下的Snippets可以讓你想保存小段的腳本、書簽或是你在瀏覽器中調試時經常用到的代碼，都可以使用Snippets，你可以在Source面板里創建、存儲和運行這些Snippets。
  
• 待續。
</ul>

總結

趁著有空看了TreeHouse的Website Optimization教程，總算是把Chrome調試工具的基本功能都摸清楚了。本文作為學習筆記~

如需轉載，請注明出處:http://w3ctrain.com/2015/11/30/chrome-dev-tools/