來(lái)源：最近師弟問(wèn)了我?guī)讉€(gè)問(wèn)題昌罩，我發(fā)現(xiàn)如果他會(huì)調(diào)試的話琐驴，自己就能發(fā)現(xiàn)，而調(diào)試確實(shí)是開(kāi)發(fā)必備的技能之一嘀韧，今天就總結(jié)下在工作中經(jīng)常用到的調(diào)試方法篇亭。
一、找到調(diào)試的代碼位置
- 簡(jiǎn)單的情況可以通過(guò)console.log來(lái)打印看看數(shù)據(jù)是否符合預(yù)期锄贷，而console.log也支持?jǐn)?shù)據(jù)格式的輸出译蒂，比如%d表示數(shù)字，詳情見(jiàn)參考文獻(xiàn)一
- 斷點(diǎn)調(diào)試谊却，console.log的功能有限柔昼，不能看到函數(shù)運(yùn)行時(shí)的情況。
2.1 代碼中加debugger;這種情況自己在本地開(kāi)發(fā)的時(shí)候會(huì)用到炎辨，直接打斷點(diǎn)捕透，如果代碼在本地編輯器沒(méi)有，或者不是很清楚在什么位置碴萧，這時(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源碼中，這樣的情況通過(guò)安裝jquery調(diào)試插件可以解決（詳情見(jiàn)第三章節(jié)）匀伏，或者通過(guò)Firebug能定位到事件綁定的源碼中
chrome查看jquery綁定的事件.png
firebug查看元素綁定的jquery事件.png
-
二洒忧、進(jìn)行調(diào)試
- 查看變量的值，這個(gè)比較簡(jiǎn)單够颠，選中某個(gè)變量就會(huì)出現(xiàn)它的值熙侍，或者右鍵將其add to watch
-
查看作用域（包括局部變量，閉包變量以及全局變量），這個(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)試問(wèn)題飞蹂。
三几苍、其他方面
- ctrl + p查找文件(2016.8.29更正)
- source面板中，如果代碼是壓縮過(guò)的陈哑，點(diǎn)擊左下角的{}妻坝，即可進(jìn)行代碼格式化
- network的應(yīng)用，這也是經(jīng)常用到的面板之一芥颈，查看網(wǎng)絡(luò)的請(qǐng)求以及響應(yīng)的數(shù)據(jù)惠勒，尤其是有異步請(qǐng)求的時(shí)候，會(huì)打開(kāi)此面板查看請(qǐng)求的狀態(tài)
- 安裝chrome調(diào)試插件爬坑，具體詳情可以見(jiàn)參考文獻(xiàn)二
四、后續(xù)
- 本文只總結(jié)了作者在工作中經(jīng)常用到的Js調(diào)試的相關(guān)方法涂臣，而關(guān)于CSS與HTML的沒(méi)有總結(jié)盾计，如果有需求，后面會(huì)寫(xiě)赁遗。
- 在調(diào)試的時(shí)候署辉，一般是先看代碼執(zhí)行了沒(méi)有，如果執(zhí)行了岩四，再就是分析為什么沒(méi)有達(dá)到如期的效果哭尝，究竟是什么地方出了問(wèn)題。
- 經(jīng)常犯的錯(cuò)誤就是剖煌，obj.aa = 'bb',如果aa的屬性不存在材鹦，會(huì)創(chuàng)建相應(yīng)的屬性，并且給其賦值耕姊，不會(huì)報(bào)錯(cuò)桶唐。如果屬性aa拼寫(xiě)錯(cuò)誤，Js又不報(bào)錯(cuò)茉兰，這時(shí)候需要細(xì)心檢查拼寫(xiě)尤泽。
- 普通的網(wǎng)絡(luò)請(qǐng)求調(diào)試通過(guò)network面板即可解決，但想要更多的功能，比如修改響應(yīng)的數(shù)據(jù)等坯约，這時(shí)一般需要用到抓包工具熊咽，比如fiddler，如果有需求闹丐，后面會(huì)專門(mén)寫(xiě)文章來(lái)介紹此工具在工作中的應(yīng)用
- chrome調(diào)試工具官方文檔
五横殴、最后
作者水平有限，成文倉(cāng)促妇智，如果錯(cuò)誤或者問(wèn)題請(qǐng)及時(shí)提出滥玷，虛心接納各方的意見(jiàn)。
