基于JavaScript 的調(diào)試程序JSDebugger是怎樣的

基于JavaScript 的調(diào)試程序JSDebugger是怎樣的，相信很多沒有經(jīng)驗(yàn)的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。

　　jsDebugger基于JavaScript的調(diào)試程序，用于檢查應(yīng)用的運(yùn)行狀態(tài)。jsDebugger是一個運(yùn)行時檢查工具，您可以深入了解應(yīng)用程序的詳細(xì)信息或動態(tài)更改應(yīng)用程序邏輯。斷點(diǎn)調(diào)試其實(shí)并不是多么復(fù)雜的一件事，簡單的理解無外呼就是打開瀏覽器，打開sources找到j(luò)s文件，在行號上點(diǎn)一下罷了。操作起來似乎很簡單，其實(shí)很多人糾結(jié)的是，是在哪里打斷點(diǎn)？

　　jsDebugger在哪里打斷點(diǎn)

　　用chrome瀏覽器打開頁面→按f12打開開發(fā)者工具→打開Sources→打開你要調(diào)試的js代碼文件→在行號上單擊一下，OK!恭喜你的處女?dāng)帱c(diǎn)打上了,哈哈~~

　　jsDebugge斷點(diǎn)怎么打才合適？

　　打斷點(diǎn)操作很簡單，核心的問題在于，斷點(diǎn)怎么打才能夠排查出代碼的問題所在呢？下面我繼續(xù)舉個例子方便大家理解。

　　假設(shè)我們現(xiàn)在正在實(shí)現(xiàn)一個加載更多的功能，如上圖，但是現(xiàn)在加載更多功能出現(xiàn)了問題，點(diǎn)擊以后數(shù)據(jù)沒有加載出來，這時候我們第一時間想到的應(yīng)該是啥？（換一行寫答案，大家可以看看自己的第一反應(yīng)是啥）

　　我最先想到的是，我點(diǎn)擊到底有沒有成功？點(diǎn)擊事件里的方法有沒有運(yùn)行？好，要想知道這個問題的答案，我們立馬去打個斷點(diǎn)試試看，斷點(diǎn)打在哪？自己先琢磨一下。

　　各位想到?jīng)]？沒錯，既然想知道點(diǎn)擊是否成功，我們當(dāng)然是在代碼中的點(diǎn)擊事件處添加一個斷點(diǎn)，切記不要添加在226行哦，因?yàn)楸粓?zhí)行的是click方法內(nèi)的函數(shù)，而不是226行的選擇器。斷點(diǎn)現(xiàn)在已經(jīng)打上了，然后做什么呢？自己再琢磨琢磨~

　　繼續(xù)正題，上面的圖就是點(diǎn)擊加載更多按鈕后的情況，我們可以看到左側(cè)的頁面被一個半透明的層給蓋住了，頁面上方還有一串英文和兩個按鈕，右側(cè)代碼227行被添加上了背景色，出現(xiàn)這個情況，先不管那些按鈕英文是啥意思有啥作用，你從這個圖得到了什么信息？繼續(xù)琢磨琢磨~

　　如果出現(xiàn)了上圖這個情況，說明一點(diǎn)，click事件中的函數(shù)被調(diào)用了，進(jìn)一步說明了點(diǎn)擊事件生效。那么我們對于這個問題產(chǎn)生的第一個“犯罪嫌疑人”就被排除了。

看完上述內(nèi)容，你們掌握基于JavaScript 的調(diào)試程序JSDebugger是怎樣的的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！