<font id="zqva1"></font>
<rt id="zqva1"></rt>
  • <tt id="zqva1"></tt>
    <cite id="zqva1"></cite>

    <cite id="zqva1"><noscript id="zqva1"></noscript></cite>
      <rp id="zqva1"><meter id="zqva1"></meter></rp>

        <cite id="zqva1"></cite>
          <b id="zqva1"></b>
          <rp id="zqva1"></rp>
          <cite id="zqva1"></cite>

          <rt id="zqva1"></rt>

        1. <rp id="zqva1"></rp>

          JS斷點調試,必備的javaScript的debug調試技巧

          時間:?2017-12-04閱讀:?821標簽:?調試

          1.斷點調試是啥?難不難?

          斷點調試其實并不是多么復雜的一件事,簡單的理解無外呼就是打開瀏覽器,打開sources找到js文件,在行號上點一下罷了。操作起來似乎很簡單,其實很多人糾結的是,是在哪里打斷點?(我們先看一個斷點截圖,以chrome瀏覽器的斷點為例)


          步驟記住沒?

          用chrome瀏覽器打開頁面 → 按f12打開開發者工具 → 打開Sources → 打開你要調試的js代碼文件 → 在行號上單擊一下,OK!恭喜你的處女斷點打上了,哈哈~~


          2.斷點怎么打才合適?

          打斷點操作很簡單,核心的問題在于,斷點怎么打才能夠排查出代碼的問題所在呢?下面我繼續舉個例子方便大家理解,廢話不多說,上圖:


          假設我們現在正在實現一個加載更多的功能,如上圖,但是現在加載更多功能出現了問題,點擊以后數據沒有加載出來,這時候我們第一時間想到的應該是啥?(換一行寫答案,大家可以看看自己的第一反應是啥)

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

          接著上圖:


          各位想到沒?沒錯,既然想知道點擊是否成功,我們當然是在代碼中的點擊事件處添加一個斷點,切記不要添加在226行哦,因為被執行的是click方法內的函數,而不是226行的選擇器。斷點現在已經打上了,然后做什么呢?自己再琢磨琢磨~

          繼續上圖:


          然后我們當然是回去點擊加載更多按鈕啦,為什么?額。。。如果你這么問,請允許我用這個表情,不點擊加載更多按鈕,怎么去觸發點擊事件?不觸發點擊事件,怎么去執行點擊事件里的函數?咆哮狀。。不過我相信大家肯定不會問這么low的問題~不瞎扯了~

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

          如果出現了上圖這個情況,說明一點,click事件中的函數被調用了,進一步說明了點擊事件生效。那么我們對于這個問題產生的第一個“犯罪嫌疑人”就被排除了。


          補充一下:

          如果沒有出現上面的情況咋辦?那是不是說明點擊事件沒有生效呢?那是什么導致點擊事件沒有生效?大家自己思考思考~

          可能導致點擊事件沒生效的原因很多,比多選擇器錯誤,語法錯誤,被選擇的元素是后生成的等。怎么解決呢?

          選擇器錯誤,大家可以繼續往后看到console部分的內容,我想大家就知道怎么處理了

          語法錯誤,細心排查一下,不熟悉的語法可以百度對比一下

          被選擇的元素是后生成的,最簡單的處理就是使用.on()方法去處理,這個東東帶有事件委托處理,詳情可以自行百度。


          那么接下來”犯罪嫌疑人“的身份鎖定在哪里呢?

          我們將目光投向事件內部,click事件觸發了,那么接下來的問題就是它內部的函數問題了。如果你要問為什么?請給我一塊豆腐。。。

          打個比方,給你一支筆,讓你寫字,然后你在紙上寫了一個字,發現字沒出來,為啥?你說我寫了呀,紙上都還有劃痕。那是不是可能筆沒有墨水或者筆尖壞了了?這個例子和點擊加載更多一個道理,寫字這個動作就是點擊操作,而內部函數就是墨水或者筆尖。明白了不~

          接著我們分析下點擊事件里面的內容,里面包含三句話,第一句話是變量i自增長,第二句話是給按鈕添加一個i標簽,第三句話是調用請求數據的方法。

          就通過這三句話的本身作用,我們可以將較大一部分嫌疑放在第三句話,一小部分放在第一句和第二句話上,有人可能會疑惑,第二句話怎么會有嫌疑呢?他的作用只不過是添加一個標簽,對于數據完全沒有影響啊,確實,這句話對于數據沒有影響,但是出于嚴謹考慮,它仍然有可能出錯,例如它要是少了一個分號呢?或者句子內部某個符號錯誤呢?往往就是這種小問題浪費我們很多時間。

          好,為了進一步鎖定”犯罪嫌疑人“,給大家介紹一個工具,也是上圖出現兩個圖標之一,見下圖:


          這個小圖標的功能叫”逐語句執行“或者叫”逐步執行“,這是我個人理解的一個叫法,意思就是,每點擊它一次,js語句就會往后執行一句,它還有一個快捷鍵,F10。下圖示范一下它被點擊以后的效果:


          我單擊了兩次這個按鈕(或者使用F10快捷鍵),js代碼從227行執行到了229行,所以我管它叫”逐語句執行“或者”逐步執行“。這個功能非常的實用,大部分的調試都會使用到它。

          上面介紹到我單擊了兩次“逐語句執行”按鈕,代碼從227行運行到229行,大家覺得這意味著啥?是不是說明從語法上來說,前兩句是沒有問題的,那么是不是也同時意味著前兩句就排除嫌疑了呢?我看不然。

          大家都知道,加載更多就是一個下一頁的功能,而其中最核心的一個就是傳給后臺的頁碼數值,每當我點擊加載更多按鈕一次,頁碼的數值就要加1,所以如果下一頁的數據沒出來,是不是有可能是因為頁碼數值也就是[i變量](下面統一稱呼i)有問題?那么如何排查頁碼是否存在問題呢?大家自己先思考思考。

          下面教大家兩種查看頁碼數值i]實際輸出值的方法,上圖:


          第一種:


          操作步驟如下:

          1.仍然是在227行打上斷點 → 2. 點擊加載更多按鈕 → 3. 單擊一次“逐語句執行“按鈕,js代碼執行到228行 → 4.用鼠標選中i++(什么叫選中大家里不理解?就是你要復制一個東西,是不是要選中它?對,就是這個選中) → 5. 選中以后,鼠標懸浮在目標上方,你就看到上圖的結果。


          第二種:


          這個方法其實和第一種差不多,只不過是在控制臺輸出i的值,大家只需要按照第一種方法執行到第三步 → 4. 打開和sources同一級欄目的console → 5. 在console下方的輸入欄里輸入i → 6. 按enter回車鍵即可。

          上面的第二種方法里,提到了console這個東西,我們可以稱呼它為控制臺或者其他什么都可以,這不重要~console的功能很強大,在調試的過程中,我們往往需要知道某些變量的值到底輸出了什么,或者我們使用選擇器[$”.div”)這種]是否選中了我們想要的元素等,都可以在控制臺打印出來。當然直接用第一種方法也可以。

          給大家示范一下在console里打印我們想要選中的元素。上圖~


          在控制臺中輸入$(this),即可得到選擇的元素,沒錯,正是我們所點擊的對象——加載更多按鈕元素。

          在這里給大家說說我對console這個控制臺的理解:這個東東就是一個js解析器,是瀏覽器本身用來解析運行js的家伙,只不過瀏覽器通過console讓我們開發者在調試過程中,可以控制js的運行以及輸出。通過上面的兩種方法,大家可能覺得使用起來很簡單,但是我要給大家提醒一下,或者說是一些新手比較容易遇到的困惑。


          困惑一:在沒有打斷點的情況下,在console輸入i,結果console報錯了。

          這應該是新手很常見的問題,為什么不打斷點我就沒有辦法在控制臺直接輸出變量的值呢?個人理解這時候i只是一個局部變量,如果不打上斷點,瀏覽器會把所有的js全部解析完成,console并不能訪問到局部變量,只能訪問到全局變量,所以這時候console會報錯i未定義,但是當js打上斷點時,console解析到了局部變量i所在的函數內,這時候i是能夠被訪問的。


          困惑二:為什么我直接在console里輸入$(“.xxx”)能打印出東西來呢?

          很簡單,console本身就是一個js解析器,$(“.xxx”)就是一個js語句,所以自然console能夠解析這個語句然后輸出結果。

          介紹完“逐語句執行”按鈕和console控制臺的用法,最后再介紹一個按鈕,上圖:


          這個按鈕我稱呼它為“逐過程執行”按鈕,和“逐語句執行”按鈕不同,“逐過程執行”按鈕常用在一個方法調用多個js文件時,涉及到的js代碼比較長,則會使用到這個按鈕。上圖:


          假設上圖我只在227行打了個斷點,然后一直點擊逐語句執行”按鈕到229行,這時候如果再點擊一次“逐語句執行”按鈕呢?則會進入下圖的js里:


          這些都是zepto庫文件的內容,沒啥好看的,里面運行很復雜,我們不可能一直使用“逐語句執行”按鈕,這樣你會發現你按了大半天還在庫文件里面繞。。。這時候咋辦?那就該“逐過程執行”按鈕上場了。上圖:


          我除了在227行打了一個斷點,同時還在237行打了一個斷點,當我們運行到229行時,直接單擊“逐過程執行”按鈕,你會發現,js直接跳過了庫文件,運行到了237行,大家可以自己使用體驗一下。


          最后總結:

          本文主要介紹了“逐語句執行”按鈕、“逐過程執行”按鈕、console控制臺這三個工具,以及調試bug時的一些思路。工具的用法我就不再贅述了,大家知道用法就行,具體怎么去更合理的使用,還需要大家通過大量的實踐去總結提升~

          我其實在本文主要想講的是調試bug的一個思路,但是由于選的例子涉及東西太多。。。怕全部寫下來內容太長,大家也沒興趣看,所以我就簡單的選了一部分給大家講解,不知道大家有沒有收獲。別看我調試三句話寫了一堆的東西,如果真的在實際項目中你也像我這樣去做,估計你調試一個Bug的時間會比寫一個腳本的時間還長很多。。。在實際情況下,我們應該養成拿到問題的第一時間,自行在腦海中排查問題,找到最有可能出現問題的點,如果沒辦法迅速的排查出最重要的點,那么你可以使用最麻煩但是很靠譜的方法,利用“逐語句執行”按鈕將整個和問題相關的js依次去執行一遍,在執行的過程中,自己也跟著理清思路,同時注意下每個變量的值以及選擇器選中的元素是否正確,一般來說,這樣做一遍下來,bug都解決的差不多了。


          所以個人認為,我們調試bug的思路應該是這樣的:首先,js是否成功的執行進來;其次,js是否存在邏輯問題,變量問題,參數問題等等;最后,如果上述都沒有問題,請仔細查看各種符號。。。

          OK~斷點就講到這里~有不明白的同學可以在下面留言~還有如果大家有什么不懂的知識點或者對前端比較困惑的地方,也可以在下面留言,有空的時候我也會繼續針對大家的留言寫一些文檔的哦~


          作者:沐清風blog  地址:www.cnblogs.com/mqfblog/p/5397282.html
          站長推薦

          1.阿里云: 本站目前使用的是阿里云主機,安全/可靠/穩定。點擊領取2000元代金券、了解最新阿里云產品的各種優惠活動點擊進入

          2.騰訊云: 提供云服務器、云數據庫、云存儲、視頻與CDN、域名等服務。騰訊云各類產品的最新活動,優惠券領取點擊進入

          3.廣告聯盟: 整理了目前主流的廣告聯盟平臺,如果你有流量,可以作為參考選擇適合你的平臺點擊進入

          鏈接: http://www.modern-decoration.com.cn/article/detial/215

          移動web真機調試-Browsersync

          BrowserSync能讓PC、各移動設備使用各種瀏覽器的頁面同時實時地響應文件的更改,而不用刷新操作。而且,當在其他一個設備上進行點擊等行為時,該行為也會同步到其他瀏覽器中

          javascript怎樣調試代碼?

          查找編程代碼中的錯誤被稱為代碼調試。調試并不簡單。但幸運地是,所有現代瀏覽器都有內置的調試器。內置的調試器可打開或關閉,強制將錯誤報告給用戶。

          Flutter 應用調試

          程序調試是程序投入運行之前,使用手工或編譯程序等方法進行的測試,主要用以修正語法錯誤和邏輯錯誤。程序調試是保證計算機信息系統正確性的必不可少的步驟,在Flutter應用開發中,Android Studio和VSCode是兩種比較常見的集成開發環境

          如何調試javascript代碼?

          有時代碼可能會包含某些錯誤。而作為腳本語言,JavaScript無法在瀏覽器中顯示任何錯誤消息。但是,這些錯誤卻會影響輸出。找出這些錯誤的最佳做法就是調試代碼。我們可以使用內置的Web瀏覽器調試器來輕松調試代碼

          是時候拋棄Postman了,試試 VS Code 自帶神器插件

          接口調試是每一個軟件開發從業者必不可少的一項技能,一個項目的完成必然經過大量的接口測試,實際開發過程中,接口調試的時間不比實際開發所用的時間少。作為前端開發人員

          九大Java性能調試工具

          NetBeans分析器是NetBeans的擴展,用于為NetBeans IDE提供分析功能。NetBeans IDE是一個開源的集成開發環境。NetBeans IDE支持開發所有Java應用程序類型(Java SE(包括JavaFX),Java ME,Web,EJB和移動應用程序)

          JS反調試技術

          本文簡單整理一下日常使用到的JS反調試技術,主要目的防止非法用戶查看網頁運行流程,分析代碼。雖然不是絕對安全的,但也在一定程度上提高了調試破解的難度。在Chrome瀏覽器中,最常用到的就是DevTools工具進行調試JS

          vConsole_vue移動端調試

          當我們在瀏覽器開發vue頁面時,由于瀏覽器對于調試有天然的支持,我們開發起來很方便。但是現在已經進入了移動端時代,移動端頁面的需求越來越大。在開發移動端頁面的時候我們通常是在瀏覽器完成開發完成

          移動端調試工具推薦

          vConsole騰訊出品的 Web 調試面板,相信不少前端小伙伴都用過。Charles 是一款強大的抓包工具,可以截取包括 https 在內的各種網絡請求并方便的查看具體信息。weinre是一款很不錯的網頁檢查工具,可以通過在本地啟動一個 weinre 服務

          Js調試:console對象

          console.log方法用于在控制臺輸出信息。它可以接受一個或多個參數,將它們連接起來輸出。warn方法和error方法也是在控制臺輸出信息,它們與log方法的不同之處在于,warn方法輸出信息時,在最前面加一個黃色三角

          fly63.com版權所有,內容以共享、參考、研究為目的,不存在任何商業目的。其版權屬原作者所有,如有侵權,請與小編聯系!情況屬實本人將予以刪除!

          文章投稿關于web前端網站點搜索站長推薦網站地圖站長QQ:522607023

          小程序專欄: 土味情話心理測試腦筋急轉彎幽默笑話段子句子語錄成語大全

          国产精品高清视频免费 - 视频 - 在线观看 - 影视资讯 - 唯爱网