來源：最近師弟問了我?guī)讉€(gè)問題，我發(fā)現(xiàn)如果他會(huì)調(diào)試的話，自己就能發(fā)現(xiàn)，而調(diào)試確實(shí)是開發(fā)必備的技能之一，今天就總結(jié)下在工作中經(jīng)常用到的調(diào)試方法。

一、找到調(diào)試的代碼位置

簡(jiǎn)單的情況可以通過console.log來打印看看數(shù)據(jù)是否符合預(yù)期，而console.log也支持?jǐn)?shù)據(jù)格式的輸出，比如%d表示數(shù)字，詳情見參考文獻(xiàn)一

斷點(diǎn)調(diào)試，console.log的功能有限，不能看到函數(shù)運(yùn)行時(shí)的情況。
2.1 代碼中加debugger;這種情況自己在本地開發(fā)的時(shí)候會(huì)用到，直接打斷點(diǎn)，如果代碼在本地編輯器沒有，或者不是很清楚在什么位置，這時(shí)通常會(huì)用到下面這種方法
2.2 瀏覽器中加斷點(diǎn)。這種方法需要找到代碼執(zhí)行的位置
ctrl + shift + f 進(jìn)行全局搜索（切換到英文輸入法，避免熱鍵沖突）。如果能確定代碼中會(huì)出現(xiàn)某些東西，可以進(jìn)行全局搜索。這時(shí)編碼規(guī)范就顯得重要了，如果HTML中的某個(gè)元素被Js中引用了，給元素的class或者id加個(gè)鉤子就顯得比較重要，比如 <div class="nav j-nav">，有了這個(gè)j-nav ，就知道這個(gè)元素被js引用了，全局搜索j-nav比較方便，這樣就可以定位到相應(yīng)的位置。
審查元素查看綁定的事件，也能找到相應(yīng)的位置
- 原生Js綁定的事件，比較好找
  
  事件.png
- 如果是Jquery綁定的事件，Chrome會(huì)定位到Jquery源碼中，這樣的情況通過安裝jquery調(diào)試插件可以解決（詳情見第三章節(jié)），或者通過Firebug能定位到事件綁定的源碼中
  
  chrome查看jquery綁定的事件.png
  
  firebug查看元素綁定的jquery事件.png

二、進(jìn)行調(diào)試

查看作用域（包括局部變量，閉包變量以及全局變量），這個(gè)時(shí)候可以看到目前調(diào)試函數(shù)的閉包變量有哪些，對(duì)調(diào)試閉包功能非常有用

作用域.png
循環(huán)調(diào)試
- 循環(huán)中的調(diào)試比較繁瑣，如果循環(huán)次數(shù)比較多，一點(diǎn)點(diǎn)調(diào)試到自己想要的位置的話，耗時(shí)很長(zhǎng)，這時(shí)可以在斷點(diǎn)的行數(shù)右鍵，選擇edit breakpoint，輸入斷點(diǎn)的條件，可以避免循環(huán)次數(shù)太多，不停地循環(huán)調(diào)試問題。

ctrl + p查找文件(2016.8.29更正)
source面板中，如果代碼是壓縮過的，點(diǎn)擊左下角的{}，即可進(jìn)行代碼格式化
network的應(yīng)用，這也是經(jīng)常用到的面板之一，查看網(wǎng)絡(luò)的請(qǐng)求以及響應(yīng)的數(shù)據(jù)，尤其是有異步請(qǐng)求的時(shí)候，會(huì)打開此面板查看請(qǐng)求的狀態(tài)
安裝chrome調(diào)試插件，具體詳情可以見參考文獻(xiàn)二

本文只總結(jié)了作者在工作中經(jīng)常用到的Js調(diào)試的相關(guān)方法，而關(guān)于CSS與HTML的沒有總結(jié)，如果有需求，后面會(huì)寫。
在調(diào)試的時(shí)候，一般是先看代碼執(zhí)行了沒有，如果執(zhí)行了，再就是分析為什么沒有達(dá)到如期的效果，究竟是什么地方出了問題。
- 經(jīng)常犯的錯(cuò)誤就是，obj.aa = 'bb',如果aa的屬性不存在，會(huì)創(chuàng)建相應(yīng)的屬性，并且給其賦值，不會(huì)報(bào)錯(cuò)。如果屬性aa拼寫錯(cuò)誤，Js又不報(bào)錯(cuò)，這時(shí)候需要細(xì)心檢查拼寫。
普通的網(wǎng)絡(luò)請(qǐng)求調(diào)試通過network面板即可解決，但想要更多的功能，比如修改響應(yīng)的數(shù)據(jù)等，這時(shí)一般需要用到抓包工具，比如fiddler，如果有需求，后面會(huì)專門寫文章來介紹此工具在工作中的應(yīng)用
chrome調(diào)試工具官方文檔

作者水平有限，成文倉促，如果錯(cuò)誤或者問題請(qǐng)及時(shí)提出，虛心接納各方的意見。