選擇sources模塊，然後對要調式的方法設置斷點。
element面板
這個面板顯示了頁面全部html代碼，用於調試css代碼，右側展示左側對應選擇元素屬性。點擊屬性值可進行修改查看。
調試小技巧：
1，改變字體大小或者間距時，按住alt+箭頭可零點一個像素間距調整，按住shift+箭頭可十個像素間距調整；
2，定位元素快捷鍵：ctrl+shift+c
3，edit as HTML快捷鍵 F2
properties用於查看屬性所具有的全部屬性方法
Network面板
這個面板用於查看網絡響應內容，包括Ajax類請求。點擊左側請求右側顯示請求響應頭部具體信息及cookies。
Required Headers/Response Headers請求/響應頭信息。 Query String Parameters 請求參數。可實時檢測每個請求是否被正確發出、相應信息是否正確等。
Source面板
這個面板可進行js調試
選擇需調試js，單擊側欄添加斷點，頁面執行到斷點處出現右側調試單步控制條，各局部、全局變量；
F8 pause/continue 暫停繼續
F10 step over 單步跳過
F11 step into 單步進入
shift+F11 step out單步跳出
在watch expressions(查看變量)處，輸入你想查看的變量名可方便查看變量變化
在js右鍵選擇本地修改可調出控制檯，在控制檯進行屬性修改調試；
單擊{}可美化js
TimeLIne面板
這個面板顯示系統加載頁面耗時情況，方便開發者在優化頁面加載速度時進行針對性優化。
resource面板
顯示該頁面所有資源 包括圖片、css、js，可對頁面進行全面下載瀏覽。對於意圖仔細研究某頁面時發揮很大作用。
audits面板
對於前端開發者是一大利器，可提供優化頁面的建議。點擊run之後即可顯示。
console面板
除了查看錯誤信息、打印調試信息（console.log()）、寫一些測試腳本之外，還可以當做js API用。例如：依次輸入var d=new Date() ->按enter -> d -> 按enter -> console.dir(d)即可顯示d的所有屬性
console.dir() //顯示元素的dom屬性
Using the %c format specifier allows you to style the console output
谷歌瀏覽器network用法詳解:
network工具功能強大，能夠讓我看到網頁加載的信息，比如加載時間，和先後順序，是否是並行加載，還是堵塞加載。
下面進入正題:
上面就是network面板的截圖。
默認情況下有八列:
（1）.Name:表示加載的文件名。
（2）.Method:表示請求的方式。
（3）.Status:表示狀態碼（200爲請求成功，304表示從緩存讀取）。
（4）.Type:表示文件的MIME Type的類型。
（5）.Initiator:表示發出這個文件請求的發出者。
（6）.Size:表示文件大小。
（7）.Time:表示每個請求的總時長。
（8）.Timeline:以圖表的形式顯示元素的請求和加載情況。
當然內容不僅僅先於以上8個，右擊上面八個任意一個選項卡可以彈出一個菜單，可以查看更多內容:
不同顏色的橫向柱條表示不同的含義:
（1）.Stalled：瀏覽器得到要發出這個請求的指令，到請求可以發出的等待時間，一般是代理協商、以及等待可複用的TCP連接釋放的時間，不包括DNS查詢、建立TCP連接等時間等。
（2）.Request sent：請求第一個字節發出前到最後一個字節發出後的時間，也就是上傳時間。
（3）.Waiting 請求發出後，到收到響應的第一個字節所花費的時間(Time To First Byte)。
（4）.Content Download 收到響應的第一個字節，到接受完最後一個字節的時間，就是下載時間。
其他條目的含義，大家可以自行在網上查詢。
選項卡篩選:
點擊頂部選項卡可以實現加載的資源篩選效果。
查看文件詳細信息:
點擊具體的文件可以查看更爲詳細的信息。
區間選中:
點擊頂部類似於時間軸的區域，可以實現定位加載時間區間效果。
再雙擊就可以恢復到原來狀態。
--------------------------------------------------------------------------------------
溫馨提示：我是一個技術男，但我天生樂觀的性格讓我與技術男的形象有衝突，愛交朋友和聊天，想找我可以隨時聯繫我。不信搜索我的微信公衆號“好有趣耶”或者掃我的圖標二維碼，可以看到好多搞笑段子與微簡報。
