JSY的拾掇ㄉㄨㄛˊ

https://leeon.gitbooks.io/devtools/content/learn_basic/tips_and_tricks_part_source.html

網頁資料~上:Sources

Elements(檢查元素):看頁面中所有的HTML元素，左面是用樹形結構展示的HTML標籤，滑鼠移到上面會在頁面中顯示這個標籤的位置、實際長寬等。右面是每個元素的CSS屬性，繼承關係等等，還有DOM屬性、繼承關係、綁定的事件。

Network(網路):顯示所有的網路事件，你需要先打開開發人員工具，切換到這個選項卡，之後再刷新頁面才會有顯示。這裏會顯示每個檔的資訊、由何處觸發這個網路活動、HTTP報頭等等。

Sources (源代碼)：用於對js進行調試，左面有所有js代碼的列表，中間是代碼區域(下面有個格式化代碼的功能)，右邊是中斷點、觸發器、調用棧等等。

Timeline(時間軸):同樣需要先打開這個選項卡，點擊下麵的`開始捕捉`才會有顯示。這個選項卡會顯示頁面中的一切時間，包括運行腳本、網路活動、頁面渲染等等。而且會很詳細的顯示每個活動佔用的CPU和記憶體.可以利用這些資訊對網頁進行優化。

Profiles(報告)：可以截取一段時間的CPU使用情況報告、CSS類使用情況報告(用來剔除未用到的CSS)、堆記憶體快照(用於優化js腳本和DOM結構)。

Resources(資源):檢視此頁面所載入並使用的資源檔，Scripts, Stylesheets, Images等，也包含儲存裝置的內容(如 Cookie）。

Audits(審計):讓Chrome給你的網頁提出一點建議，一般是關於哪些代碼不必要、沒用到。

Console(主控台):JavaScript控制臺可與其他面板聯合使用，您可以藉助它來審查DOM元素、調試JavaScript代碼、查看HTML解析錯誤等。

資料來源:http://www.guokr.com/question/398829/