本文章，基於mac，快捷鍵跟window有點區別
作為前端開發者都知道，快捷鍵 option＋command+I 可以打開chrome調試工具，這里就大概介紹下chrome調試工具的常用方法，對調試工具的掌握，能大大提高我們調試代碼的效率。每個面板都有詳細的順序標記和解釋，一定要仔細閱讀和練習。
調試中常用快捷鍵
- command+o 在Sources面板中打開一個文件(JS,CSS)
- command+f 查找當前文件中的關鍵字
- command+shift+f 全局查找關鍵字
- control+shift+e 在控制台運行當前選中的代碼片段，這個方法可以用來在控制台中打印出變量或方法的返回值。
- command+d 將當前網頁加入書簽
- command+Y 查看”歷史記錄”頁
接下來我們對chrome中各個面板做一個簡單的介紹
Elements面板
此面板是控制面板是控制DOM結構和CSS樣式的。
下圖共標記了6處，我們分別解釋一下
位置1：點擊后選擇頁面中的任何元素，就會選中相應的DOM節點
位置2：Toggle Device Mode切換設備模式，可以模擬該頁面在各種移動端設備的顯示情況。
位置3：Edit as HTML,選中某段html代碼后可以直接編輯這段html代碼。可以直接拖放節點，
自由調整位置。也可以拖拽節點到編輯器。(右擊查看元素跳出此面板)
位置4：Delete 直接刪除該節點。(右擊查看元素跳出此面板)
位置5：Event Listeners可以查看該元素所綁定的事件。
位置6："Computed"面板里，點擊樣式前面的放大鏡圖標，就可以直接定位到具體的樣式。當樣式層級較深，繼承較多時，對調試頁面的樣式很有幫助。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
Network面板
此面板是查看網絡請求信息的。
下圖共標記了6處，我們分別解釋一下
位置1：filter過濾器，可在輸入框中輸入關鍵字搜索對應請求的文件。
位置2：請求文件的列表里進行了分類，個人常用的是查看XHR的分類，查看Ajax請求。
位置3：設置網絡的通信方式。默認"No thirotting"不節流。這里可以設置斷網模式，或者模擬3G，4G網絡等情況下頁面加載的速度。
網速可以在"settings"里面設置。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
Sources面板
此面板是調試中最常用的地方。
下圖共標記了8處，我們分別解釋一下
位置1：查看頁面中加載的資源文件
位置2：如果瀏覽器裝了插件，插件所需要的JS文件會在這里顯示
位置3：使用ctrl+p/ctrl+o 打開某個文件
位置4：斷點的操作
位置5：查看異步請求時所設置的定時器
位置6：點擊右邊的加號，可以增加監聽的變量。不過鼠標放到JS文件中的變量時也會顯示對應的值。
位置7：設置各種不同的斷點。
當勾選XHR Breakpoints里的any XHR時，頁面中觸發Ajax請求時都會中斷。
當勾選"Event listener breakpoint" 下的 Mouse（鼠標）下的 Click （單擊）事件時，觸發某個按鈕的點擊事件就會中斷。
位置8：一般線上的代碼都是打包后的代碼，不利於調試。點擊{}后格式化該文件。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
Profiles面板
（這里講解下他的功能，想學習的筒子可以去http://www.jianshu.com/p/504bde348956）
此面板主要是做深度性能優化
不同版本的Chrome DevTools差別很大，這里我們基於最新版的Mac Chrome完成，
主要介紹Network/Timeline/Profiles三個方面的內容。
Profiles用來更深入的分析性能問題、內存問題。要深入分析，定位問題原因，還得靠Profiles。
如截圖所示，Profiles提供了三個主要功能：Collect Javascript CPU Profile：用於找出耗時較長的JS函數。Take Heap Snapshot：用於分析JS對象及其關聯的DOM節點的內存分布。Record Heap Allocations：記錄內存分配信息，用於分析內存泄露的情況。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
Timeline面板
Timeline面板是查看動態流的。在這里可以測試頁面的性能問題。比如頁面的渲染速度，動畫的流暢度等。
下圖共標記了5處，我們分別解釋一下
位置1：點擊這個按鈕開始Record，按鈕變成紅色，再次點擊停止記錄。
位置2：選擇記錄生成的圖表模式
位置3：需要記錄的類型
位置4：fps指每秒的幀數，這個可以衡量頁面的渲染速度。如果低於60fps，則頁面可能需要優化下了。如果低於30fps，則頁面的卡頓現象會比較嚴重。
位置5：記錄期間頁面加載的比重。看哪個范圍的值特別大，占用時間最長，然后有針對性的優化。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
Resources面板
resources面板展示各種資源文件，包括本地存儲，session,cookies,cache等信息
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
Console面板
console控制台輸出信息，console的方法有很多種，包括console.log(),console.info(),console.error(),console.table()等。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
Settings 選項（這是一個插件）
勾選下面這個選項后就會在控制台中打印出所有的Ajax請求地址。
