Chrome瀏覽器面板基礎瞭解
本篇參考部落格連結
https://www.cnblogs.com/charliechu/p/5948448.html
http://www.cnblogs.com/camille666/p/memory_debug_chrome.html
Chrome開發者工具面板
面板上包含了Elements面板、Console面板、Sources面板、Network面板、Performance面板、Memory面板、Application面板、Security面板、Audits面板這些功能面板。
這些按鈕的功能點如下：
- Elements:查詢網頁原始碼HTML中的任一元素,手動修改任一元素的屬性和樣式且能實時在瀏覽器裡面得到反饋。
- Console:記錄開發者開發過程中的日誌資訊，且可以作為與JS進行互動的命令列Shell。
- Sources:斷點除錯JS。
- Network:從發起網頁頁面請求Request後分析HTTP請求後得到的各個請求資源資訊（包括狀態、資源型別、大小、所用時間等），可以根據這個進行網路效能優化。
- Performance:記錄並分析在網站的生命週期內所發生的各類事件，以此可以提高網頁的執行時間的效能。
- Memory:如果你需要Timeline所能提供的更多資訊時，可以嘗試一下Profiles,比如記錄JS CPU執行時間細節、顯示JS物件和相關的DOM節點的記憶體消耗、記錄記憶體的分配細節。
- Application:記錄網站載入的所有資源資訊，包括儲存資料（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）、快取資料、字型、圖片、指令碼、樣式表等。
- Security:判斷當前網頁是否安全。
-
Audits:對當前網頁進行網路利用情況、網頁效能方面的診斷，並給出一些優化建議。比如列出所有沒有用到的CSS檔案等。
Elements面板
上圖左側是網頁的主體標籤，需要檢視哪個節點直接雙擊就可以；
上圖右側是elements面板中的幾個子功能：包含有Styles/Computed/EventListeners/DomBreakpoints/Properties/Accessibility多種功能。
- Styles:檢視當前選中的標籤的樣式設定，其中標籤狀態可選，如圖所示，直接勾選即可，也可以通過inherited from來檢視繼承的樣式，同時這裡可以直接編輯元素的樣式，可以直接在瀏覽器中檢視效果，也可以同勾選樣式或者改變樣式資料來測試各種樣式的效果，非常方便。
- Computed：點選右側Computed面板，可以編輯左側選中的盒子模型引數，所有的值都是可以修改的;點選不同的位置(top、bottom、left、right) 就可以修改元素的padding、border、margin屬性值。（基本概括完畢，我沒有添加了）
- EventListeners：這裡是檢視頁面元素新增過的事件。
- DomBreakpoints：暫時不清楚。
- Properties：元素具有的屬性與方法，但這裡我自己並沒有看太明白。
- Accessibility：暫時不清楚。
- 檢視網頁的本地修改歷史 這一點還沒發現\(^o^)/~（摘自原部落格）
- 點選Styles面板中修改過屬性的檔名，會跳轉到Source面板
- 在檔案位置右擊選擇Local modifications,可以檢視本地的所有修改記錄
- 點選指定的時間點可以看到粉紅背景的刪除內容和綠色背景的新增內容
Console面板
elements面板左下面板還有的選項就是縮小版的列印臺哈：1是選擇一些功能，見下面的右圖，右圖的這些功能我還沒搞清楚，搞清楚了再來補充；2是選擇檔案；3是過濾；4不清楚；5是檢視各個檔案的console值
Sources面板
這個面板我目前主要是用於除錯js,左側分為page/filesystem/overrides/contentscripts/snippets幾個功能,目前主要檢視page功能，檢視頁面的各個原始檔，選擇相應的js檔案，然後選擇要除錯的程式碼段使用右側的功能鍵進行除錯，右側一層是開始/暫停/跳過/進入除錯具體功能函式的按鈕，二層watch是監視需要監視引數，觀察其具體變化，再下層的這些都並不太瞭解，待補充。
Network面板
這個面板主要用來檢視網路請求、頁面響應的各個引數，方便優化。1行是用來選擇需要檢視請求響應的方式，2行選擇檢視需要檢視的檔案型別，3行是是顯示請求響應時間，4行是具體的各個頁面請求資料。
第1行：
- group by frame: 逐幀顯示
- preserve log: 保留請求日誌
- disable cache:禁用快取
- offline:離線
- online的各個選擇：模擬除錯3G網路測試
第4行：選擇一個檔案雙擊
- headers:請求頭資訊和響應頭資訊
- preview: 根據你所選擇的資源型別（JSON、圖片、文字）顯示相應的預覽。
在Preview(預覽功能)中，控制檯會把傳送過來的json資料自動轉換成javascript的物件格式 - response:響應主體，頁面內容
- timing:時間
performance面板
這個面板主要是用來檢視除錯網頁的效能的，有多種選擇，這個層次目前對於我來說太高了，略過不表。
這裡暫告一段落。