作為前端開發者都知道，快捷鍵F12可以打開chrome調試工具。firefox可以打開firebug工具。“工欲善其事，必先利其器”，對調試工具的掌握，能大大提高我們調試代碼的效率。因為我平常chrome用的多，這里就大概介紹下chrome調試工具在windows下的使用，firefox的話就暫時不做介紹。
快捷鍵
ctrl+o 在Sources面板中打開一個文件(JS,CSS)
ctrl+p 同ctrl+o
ctrl+f 查找當前文件中的關鍵字
ctrl+shift+f 全局查找關鍵字
ctrl+shift+e 在控制台運行當前選中的代碼片段，這個方法可以用來在控制台中打印出變量或方法的返回值。
ctrl+shift+o 跳轉到指定的方法
Elements面板
Elements面板是控制DOM結構和CSS樣式的。
位置1：點擊后選擇頁面中的任何元素，就會選中相應的DOM節點
位置2：Toggle Device Mode切換設備模式，可以模擬該頁面在各種移動端設備的顯示情況。
位置3：Edit as HTML,選中某段html代碼后可以直接編輯這段html代碼。可以直接拖放節點，自由調整位置。也可以拖拽節點到編輯器。
位置4：Delete 直接刪除該節點。
位置5：Event Listeners可以查看該元素所綁定的事件。
位置6："Computed"面板里，點擊樣式前面的放大鏡圖標，就可以直接定位到具體的樣式。當樣式層級較深，繼承較多時，對調試頁面的樣式很有幫助。
Network面板
Network面板是查看網絡請求信息的。
位置1：filter過濾器，可在輸入框中輸入關鍵字搜索對應請求的文件。
位置2：請求文件的列表里進行了分類，個人常用的是查看XHR的分類，查看Ajax請求。
位置3：設置網絡的通信方式。默認"No thirotting"不節流。這里可以設置斷網模式，或者模擬3G，4G網絡等情況下頁面加載的速度。網速可以在"settings"里面設置。
位置4：列表里可以查看每個xhr的消耗時間。如果time超出200ms,需要考慮優化接口。
位置5：面板最底部可以查看請求的總個數,DomContentLoaded的時間，頁面load的時間。
Sources面板
sources面板是調試中最常用的地方。
位置1：查看頁面中加載的資源文件
位置2：如果瀏覽器裝了插件，插件所需要的JS文件會在這里顯示
位置3：使用ctrl+p/ctrl+o 打開某個文件
位置4：斷點的操作
位置5：查看異步請求時所設置的定時器
位置6：點擊右邊的加號，可以增加監聽的變量。不過鼠標放到JS文件中的變量時也會顯示對應的值。
位置7：設置各種不同的斷點。
當勾選XHR Breakpoints里的any XHR時，頁面中觸發Ajax請求時都會中斷。
當勾選"Event listener breakpoint" 下的 Mouse（鼠標）下的 Click （單擊）事件時，觸發某個按鈕的點擊事件就會中斷。
位置8：一般線上的代碼都是打包后的代碼，不利於調試。點擊{}后格式化該文件。
Timeline面板
Timeline面板是查看動態流的。在這里可以測試頁面的性能問題。比如頁面的渲染速度，動畫的流暢度等。
位置1：點擊這個按鈕開始Record，按鈕變成紅色，再次點擊停止記錄。
位置2：選擇記錄生成的圖表模式
位置3：需要記錄的類型
位置4：fps指每秒的幀數，這個可以衡量頁面的渲染速度。如果低於60fps，則頁面可能需要優化下了。如果低於30fps，則頁面的卡頓現象會比較嚴重。
位置5：記錄期間頁面加載的比重。看哪個范圍的值特別大，占用時間最長，然后有針對性的優化。
Profiles面板
這個使用較少，先暫時不做介紹。
Resources面板
resources面板展示各種資源文件，包括本地存儲，session,cookies,cache等信息
Console面板
console控制台輸出信息，console的方法有很多種，包括console.log(),console.info(),console.error(),console.table()等。
Settings 選項
勾選下面這個選項后就會在控制台中打印出所有的Ajax請求地址。
參考資料：
http://get.ftqq.com/5982.get
http://ued.taobao.org/blog/2012/06/debug-with-chrome-dev-tool/