久久精品国产亚洲高清|精品日韩中文乱码在线|亚洲va中文字幕无码久|伊人久久综合狼伊人久久|亚洲不卡av不卡一区二区|精品久久久久久久蜜臀AV|国产精品19久久久久久不卡|国产男女猛烈视频在线观看麻豆

千鋒教育-做有情懷、有良心、有品質(zhì)的職業(yè)教育機(jī)構(gòu)

手機(jī)站
千鋒教育

千鋒學(xué)習(xí)站 | 隨時(shí)隨地免費(fèi)學(xué)

千鋒教育

掃一掃進(jìn)入千鋒手機(jī)站

領(lǐng)取全套視頻
千鋒教育

關(guān)注千鋒學(xué)習(xí)站小程序
隨時(shí)隨地免費(fèi)學(xué)習(xí)課程

當(dāng)前位置:首頁(yè)  >  技術(shù)干貨  > Chrome谷歌瀏覽器web前端斷點(diǎn)調(diào)試技巧

Chrome谷歌瀏覽器web前端斷點(diǎn)調(diào)試技巧

來(lái)源:千鋒教育
發(fā)布人:小千
時(shí)間: 2021-02-02 13:34:00 1612244040

      前端調(diào)試是所有前端開(kāi)發(fā)者繞不過(guò)去的一個(gè)環(huán)節(jié),很多初學(xué)者卻不知道該如何去做,今天小千就來(lái)以Chrome谷歌瀏覽器為例,教大家如何去調(diào)試前端JS代碼。

      為什么要調(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)試界面。具體界面顯示如下:

1

      紅框所標(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)試

2

      點(diǎn)擊Step over next function call就是程序逐步調(diào)試,每點(diǎn)擊一次,就會(huì)按照代碼執(zhí)行順序,向下執(zhí)行一句代碼。

2.1

      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按鈕

3.1

      使用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)。

3.2

      進(jìn)入函數(shù)體內(nèi)之后,繼續(xù)點(diǎn)擊Step over按鈕,就可以進(jìn)行函數(shù)體內(nèi)的單步調(diào)試。如圖所示,函數(shù)體內(nèi)的變量變化就一目了然了。

3.3

      但是在我們已經(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ù)體的代碼位置。

3.4

      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)略有不同)

4.1

      然后刷新頁(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í)行)

4.2

      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)有效果

5.1

      必須動(dòng)過(guò)事件才能觸發(fā)調(diào)試

5.2

      學(xué)習(xí)web前端,可以參考千鋒web前端培訓(xùn)班提供的web前端學(xué)習(xí)路線,該學(xué)習(xí)路線對(duì)從零基礎(chǔ)小白到web前端初級(jí)開(kāi)發(fā)工程師,web前端高級(jí)開(kāi)發(fā)工程師,后面的web前端大神級(jí)開(kāi)發(fā)工程師都有一個(gè)明確清晰的指導(dǎo),根據(jù)千鋒web前端培訓(xùn)機(jī)構(gòu)提供的web前端學(xué)習(xí)路線圖可以讓你對(duì)學(xué)習(xí)web前端開(kāi)發(fā)需要掌握的知識(shí)有個(gè)清晰的了解,并快速入門web前端開(kāi)發(fā)。想要獲取前端完整學(xué)習(xí)路線和免費(fèi)的學(xué)習(xí)資料可以添加我們的web前端技術(shù)分享交流qq群:857920838  加群找群管理領(lǐng)取即可,等你來(lái)哦~~

tags:
聲明:本站稿件版權(quán)均屬千鋒教育所有,未經(jīng)許可不得擅自轉(zhuǎn)載。
10年以上業(yè)內(nèi)強(qiáng)師集結(jié),手把手帶你蛻變精英
請(qǐng)您保持通訊暢通,專屬學(xué)習(xí)老師24小時(shí)內(nèi)將與您1V1溝通
免費(fèi)領(lǐng)取
今日已有369人領(lǐng)取成功
劉同學(xué) 138****2860 剛剛成功領(lǐng)取
王同學(xué) 131****2015 剛剛成功領(lǐng)取
張同學(xué) 133****4652 剛剛成功領(lǐng)取
李同學(xué) 135****8607 剛剛成功領(lǐng)取
楊同學(xué) 132****5667 剛剛成功領(lǐng)取
岳同學(xué) 134****6652 剛剛成功領(lǐng)取
梁同學(xué) 157****2950 剛剛成功領(lǐng)取
劉同學(xué) 189****1015 剛剛成功領(lǐng)取
張同學(xué) 155****4678 剛剛成功領(lǐng)取
鄒同學(xué) 139****2907 剛剛成功領(lǐng)取
董同學(xué) 138****2867 剛剛成功領(lǐng)取
周同學(xué) 136****3602 剛剛成功領(lǐng)取
相關(guān)推薦HOT
為什么sql語(yǔ)句不支持關(guān)系代數(shù)中的除法?

為什么SQL語(yǔ)句不支持關(guān)系代數(shù)中的除法1. SQL和關(guān)系代數(shù)的關(guān)系:SQL是一種基于關(guān)系代數(shù)的查詢語(yǔ)言,它的設(shè)計(jì)初衷是為了能夠以一種更接近自然語(yǔ)言...詳情>>

2023-10-14 04:07:35
sql 怎么根據(jù)父id查詢下三級(jí)子集?

一、概述處理樹形數(shù)據(jù)時(shí),我們常常需要根據(jù)父ID查詢其下的子集。本文將引導(dǎo)您如何使用SQL進(jìn)行這一操作,尤其是查詢下三級(jí)子集。二、查詢方法詳...詳情>>

2023-10-14 03:59:07
什么是分治算法,和遞歸有什么關(guān)系?

分治算法是什么分治算法是一種算法設(shè)計(jì)思想,其主要思想是將一個(gè)復(fù)雜的問(wèn)題分解為兩個(gè)或更多相同或相似的子問(wèn)題,直到子問(wèn)題簡(jiǎn)單到可以直接解決...詳情>>

2023-10-14 03:22:51
為什么微服務(wù)一定要上Docker?

為什么微服務(wù)一定要上Docker微服務(wù)作為一種軟件架構(gòu)模式,需要考慮的因素包括服務(wù)的獨(dú)立性、可擴(kuò)展性、可維護(hù)性和可移植性等。這其中,Docker的...詳情>>

2023-10-14 03:15:33
C++的traits技術(shù)到底是什么?

在C++編程中,traits是一種編程技巧,其主要目的是在編譯時(shí)提供關(guān)于類型的額外信息。它可以將類型的一些特性(如其關(guān)聯(lián)類型、屬性、函數(shù)等)抽...詳情>>

2023-10-14 03:00:03
快速通道