1.Element:元素列表:用於調整Html和Css;Event Listener(事件監聽):

          在程式碼上右鍵-->copy-->capyoutHtml可以複製別人的Html程式碼

          在程式碼上右擊-->copy-->copy selector-->可以複製元素的層次關係

          Computed計算:瀏覽器載入所有檔案之後呈現的樣式和佈局(因為瀏覽器渲染存在覆蓋的問題),可以查詢到最終起作用的哪一個

       2.Console:控制檯

       3.Source:原始檔:用於調整JS程式碼,右側可以新增監視(Watch)和事件的型別(Event Listener Breakpoints)

          格式化JS程式碼::在Sources模式下檢視壓縮過的JS,可以點選左下腳的花括號{}Pretty print來格式化JS程式碼

          給JS程式碼設定斷點:在Source模式下,點選JS程式碼左側可以設定斷點,F5重新載入(推薦右鍵重新載入)即可,右邊有按鍵可以進行分步除錯

       4.NetWork:互動中心:用於Ajax請求和資料抓取,XHR,查詢引數,檢視HTTP協議

          Disable cache:勾選上為無快取模式瀏覽頁面:每次都是重新載入最新的資料

          Filter:過濾器:可以自定義輸入,也可以點後面定義好的型別(正則,JS,CSS等)

          Preserve log:儲存日誌.一直在增長,用於對比修改後和修改前的資料

          Online:模擬在各種網路環境下載入網頁       

       5.箭頭可以選擇網頁元素定位程式碼 

          在Element模式下,右鍵網頁圖示點檢查可以精準定位程式碼