JS實(shí)用技巧斷點(diǎn)調(diào)試過(guò)程
調(diào)試能力是一個(gè)程序員的生存根本，可是很多初學(xué)者卻忽視調(diào)試。今天我們就來(lái)討究一下JS的調(diào)試技巧。本文章將會(huì)詳細(xì)列舉JS相關(guān)的各種實(shí)用調(diào)試技巧。
如果您是JS的初學(xué)者，那么這篇文章將對(duì)您有很大的幫助。為什么要調(diào)試？程序就是函數(shù)堆砌起來(lái)的，程序的運(yùn)行就是函數(shù)的執(zhí)行過(guò)程。而通過(guò)JS調(diào)試，我們可以更為直觀的追蹤到在程序運(yùn)行中，函數(shù)的執(zhí)行順序，以及各個(gè)參數(shù)的變化。這樣我們就可以快速的定位到問(wèn)題所在。
1、什么是JS調(diào)試？
在程序運(yùn)行中，我們總會(huì)遇到各種bug，而通過(guò)代碼的追蹤代碼的運(yùn)行順序從而定位到問(wèn)題的過(guò)程就叫做JS調(diào)試。
首先我們需要知道如何進(jìn)入調(diào)試的界面，此處我們以谷歌為例，通過(guò)F12和右鍵檢查，找到Sources就可以進(jìn)入調(diào)試界面。
具體界面顯示如下：
紅框所標(biāo)示的就是我們調(diào)試常用的按鍵。
下面我們會(huì)在實(shí)際應(yīng)用場(chǎng)景中詳細(xì)講述每一個(gè)按鍵的作用。
2、單步調(diào)試首先是普通調(diào)試，又叫單步調(diào)試
F12找到Sources后，在左側(cè)文件夾中找到你想運(yùn)行的文件，然后點(diǎn)擊pause script execution按鈕再刷新頁(yè)面（F5），就可以進(jìn)入單步調(diào)試
點(diǎn)擊Step over next function call就是程序逐步調(diào)試，每點(diǎn)擊一次，就會(huì)按照代碼執(zhí)行順序，向下執(zhí)行一句代碼。
3、函數(shù)調(diào)試如果親手嘗試過(guò)單步調(diào)試的小伙伴就會(huì)發(fā)現(xiàn)
單步調(diào)試其實(shí)并不能滿足我們找bug的需求，因?yàn)閱尾秸{(diào)試是不能進(jìn)入函數(shù)體內(nèi)，我們也就不能跟蹤函數(shù)體內(nèi)變量的變化。
所以我們接下來(lái)就來(lái)學(xué)習(xí)下第三個(gè)按鈕，step into next function call按鈕
使用Step into按鈕，我們就可以進(jìn)入函數(shù)體內(nèi)，在單步調(diào)試過(guò)程中，當(dāng)經(jīng)過(guò)函數(shù)調(diào)用時(shí)，點(diǎn)擊Step into就可以進(jìn)入該函數(shù)體內(nèi)。
進(jìn)入函數(shù)體內(nèi)之后，繼續(xù)點(diǎn)擊Step over按鈕，就可以進(jìn)行函數(shù)體內(nèi)的單步調(diào)試。如圖所示，函數(shù)體內(nèi)的變量變化就一目了然了。
但是在我們已經(jīng)追蹤到想要的變量變化時(shí)，函數(shù)體內(nèi)的內(nèi)容又很多，單步調(diào)試到函數(shù)結(jié)束就很浪費(fèi)時(shí)間。
這里就可以使用我們今天學(xué)習(xí)的第四個(gè)按鈕，step out of current function call跳出當(dāng)前函數(shù)體，跳出到之前進(jìn)入函數(shù)體的代碼位置。
4、斷點(diǎn)調(diào)試在實(shí)際項(xiàng)目代碼量是很大的
使用單步調(diào)試就過(guò)于的浪費(fèi)時(shí)間，而且有時(shí)我們是想要定位某一處的代碼是否有錯(cuò)，所以就沒(méi)有必要調(diào)試所有的代碼。所以我們就可以使用斷點(diǎn)調(diào)試，那么什么是斷點(diǎn)調(diào)試呢？
首先，在想要定位問(wèn)題的代碼處，打斷點(diǎn)，也就是代碼停止執(zhí)行的位置。如圖所示點(diǎn)擊紅框處打該行的斷點(diǎn)。（由于谷歌版本的不同，斷點(diǎn)圖標(biāo)略有不同）
然后刷新頁(yè)面（F5），就可以進(jìn)入斷點(diǎn)調(diào)試頁(yè)面。
點(diǎn)擊Resume script execution按鈕就可以調(diào)到下一個(gè)斷點(diǎn)。（注意：當(dāng)調(diào)到斷點(diǎn)處時(shí)，此行代碼為藍(lán)色背景，表示此行代碼即將執(zhí)行但并未執(zhí)行）
5、事件調(diào)試首先我們要來(lái)明確一個(gè)概念
就是同步與異步，當(dāng)代碼執(zhí)行時(shí)，自上而下運(yùn)行的為同步代碼，而異步代碼其中一類就是需要事件來(lái)觸發(fā)。
所以在代碼調(diào)試中，事件體內(nèi)的函數(shù)，需要在打斷點(diǎn)后，通過(guò)該事件的行為，才能進(jìn)入函數(shù)體。
如以下代碼：打斷點(diǎn)后在刷新，其實(shí)沒(méi)有效果
必須動(dòng)過(guò)事件才能觸發(fā)調(diào)試
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
ES6 Iterator接口和for...of循環(huán)用法分析
這篇文章主要介紹了ES6 Iterator接口和for...of循環(huán)用法,結(jié)合實(shí)例形式分析了Iterator接口和for...of循環(huán)相關(guān)使用技巧,需要的朋友可以參考下2019-07-07
這篇文章主要為大家詳細(xì)介紹了微信小程序制作表格的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-02-02
JS實(shí)現(xiàn)動(dòng)態(tài)生成表格并提交表格數(shù)據(jù)向后端
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)動(dòng)態(tài)生成表格并提交表格數(shù)據(jù)向后端的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-01-01
下面小編就為大家?guī)?lái)一篇老生常談ES6中的類。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
在文本框中輸入完內(nèi)容后,經(jīng)常需要按回車,焦點(diǎn)跳到下個(gè)文本框,或者觸發(fā)按鈕事件2010-06-06
一文徹底搞懂JS數(shù)據(jù)類型之基本類型與引用類型的核心差異
在javascript中,引用數(shù)據(jù)類型是一種數(shù)據(jù)結(jié)構(gòu),用于將數(shù)據(jù)和功能組織在一起,它也常被稱為類,這篇文章主要介紹了JS數(shù)據(jù)類型之基本類型與引用類型核心差異的相關(guān)資料,需要的朋友可以參考下2026-03-03
這篇文章主要介紹了開源的JavaScript插件化框架MinimaJS的詳解,詳細(xì)的介紹了MinimaJS的使用，具有一定的參考價(jià)值，有興趣的可以了解一下2017-10-10
js簡(jiǎn)單實(shí)現(xiàn)圖片延遲加載的方法
這篇文章主要介紹了js簡(jiǎn)單實(shí)現(xiàn)圖片延遲加載的方法,涉及javascript針對(duì)頁(yè)面元素的遍歷與動(dòng)態(tài)設(shè)置技巧,需要的朋友可以參考下2016-07-07
JavaScript為事件句柄綁定監(jiān)聽函數(shù)實(shí)例詳解
這篇文章主要介紹了JavaScript為事件句柄綁定監(jiān)聽函數(shù)的方法,結(jié)合實(shí)例詳細(xì)分析了常見(jiàn)的事件句柄綁定監(jiān)聽函數(shù)的實(shí)現(xiàn)技巧,并實(shí)例講解了跨瀏覽器的實(shí)現(xiàn)方法,需要的朋友可以參考下2015-12-12
UEditor 自定義圖片視頻尺寸校驗(yàn)功能的實(shí)現(xiàn)代碼
UEditor支持單圖、多圖以及視頻上傳，編輯器配置項(xiàng)支持文件格式、文件大小校驗(yàn)，對(duì)于文件寬高尺寸校驗(yàn)暫不支持。本文給大家介紹UEditor 自定義圖片視頻尺寸校驗(yàn)功能的實(shí)現(xiàn)代碼，感興趣的朋友一起看看吧2020-10-10