Chrome瀏覽器面板基礎瞭解

本篇參考博客連接：

http://www.javashuo.com/article/p-pubornuu-bc.html

http://www.cnblogs.com/camille666/p/memory_debug_chrome.html

拓展連接：

https://developers.google.com/web/tools/chrome-devtools/?hl=zh-cn#_2

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面板

這個面板主要是用來查看調試網頁的性能的，有多種選擇，這個層次目前對於我來講過高了，略過不表。

這裏暫告一段落。