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

    1. <style id="76ofp"></style>

      <style id="76ofp"></style>
      <rt id="76ofp"></rt>
      <form id="76ofp"><optgroup id="76ofp"></optgroup></form>
      1. 千鋒教育-做有情懷、有良心、有品質的職業(yè)教育機構

        手機站
        千鋒教育

        千鋒學習站 | 隨時隨地免費學

        千鋒教育

        掃一掃進入千鋒手機站

        領取全套視頻
        千鋒教育

        關注千鋒學習站小程序
        隨時隨地免費學習課程

        當前位置:首頁  >  技術干貨  > Chrome谷歌瀏覽器web前端斷點調試技巧

        Chrome谷歌瀏覽器web前端斷點調試技巧

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

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

              為什么要調試?

              程序就是函數堆砌起來的,程序的運行就是函數的執(zhí)行過程。而通過JS調試,我們可以更為直觀的追蹤到在程序運行中,函數的執(zhí)行順序,以及各個參數的變化。這樣我們就可以快速的定位到問題所在。

              1. 什么是JS調試?

              在程序運行中,我們總會遇到各種bug,而通過代碼的追蹤代碼的運行順序從而定位到問題的過程就叫做JS調試。

              首先我們需要知道如何進入調試的界面,此處我們以谷歌為例,通過F12和右鍵檢查,找到Sources就可以進入調試界面。具體界面顯示如下:

        1

              紅框所標示的就是我們調試常用的按鍵。下面我們會在實際應用場景中詳細講述每一個按鍵的作用。

              2.單步調試

              首先是普通調試,又叫單步調試。F12找到Sources后,在左側文件夾中找到你想運行的文件,然后點擊pause script execution按鈕再刷新頁面(F5),就可以進入單步調試

        2

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

        2.1

              3. 函數調試

              如果親手嘗試過單步調試的小伙伴就會發(fā)現,單步調試其實并不能滿足我們找bug的需求,因為單步調試是不能進入函數體內,我們也就不能跟蹤函數體內變量的變化。

              所以我們接下來就來學習下第三個按鈕,step into next function call按鈕

        3.1

              使用Step into按鈕,我們就可以進入函數體內,在單步調試過程中,當經過函數調用時,點擊Step into就可以進入該函數體內。

        3.2

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

        3.3

              但是在我們已經追蹤到想要的變量變化時,函數體內的內容又很多,單步調試到函數結束就很浪費時間。這里就可以使用我們今天學習的第四個按鈕,step out of current function call跳出當前函數體,跳出到之前進入函數體的代碼位置。

        3.4

              4. 斷點調試

              在實際項目代碼量是很大的,使用單步調試就過于的浪費時間。而且有時我們是想要定位某一處的代碼是否有錯,所以就沒有必要調試所有的代碼。所以我們就可以使用斷點調試,那么什么是斷點調試呢?

              首先,在想要定位問題的代碼處,打斷點,也就是代碼停止執(zhí)行的位置。如圖所示點擊紅框處打該行的斷點。(由于谷歌版本的不同,斷點圖標略有不同)

        4.1

              然后刷新頁面(F5),就可以進入斷點調試頁面。點擊Resume script execution按鈕就可以調到下一個斷點。(注意:當調到斷點處時,此行代碼為藍色背景,表示此行代碼即將執(zhí)行但并未執(zhí)行)

        4.2

              5. 事件調試

              首先我們要來明確一個概念,就是同步與異步,當代碼執(zhí)行時,自上而下運行的為同步代碼,而異步代碼其中一類就是需要事件來觸發(fā)。所以在代碼調試中,事件體內的函數,需要在打斷點后,通過該事件的行為,才能進入函數體。

              如以下代碼:打斷點后在刷新,其實沒有效果

        5.1

              必須動過事件才能觸發(fā)調試

        5.2

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

        tags:
        聲明:本站稿件版權均屬千鋒教育所有,未經許可不得擅自轉載。
        10年以上業(yè)內強師集結,手把手帶你蛻變精英
        請您保持通訊暢通,專屬學習老師24小時內將與您1V1溝通
        免費領取
        今日已有369人領取成功
        劉同學 138****2860 剛剛成功領取
        王同學 131****2015 剛剛成功領取
        張同學 133****4652 剛剛成功領取
        李同學 135****8607 剛剛成功領取
        楊同學 132****5667 剛剛成功領取
        岳同學 134****6652 剛剛成功領取
        梁同學 157****2950 剛剛成功領取
        劉同學 189****1015 剛剛成功領取
        張同學 155****4678 剛剛成功領取
        鄒同學 139****2907 剛剛成功領取
        董同學 138****2867 剛剛成功領取
        周同學 136****3602 剛剛成功領取
        相關推薦HOT
        西城区| 航空| 荔波县| 荔浦县| 繁峙县| 弥勒县| 南木林县| 黔东| 侯马市| 行唐县| 随州市| 汾阳市| 甘洛县| 商都县| 南木林县| 巢湖市| 肃北| 桦南县| 湖北省| 嘉峪关市| 南平市| 法库县| 福鼎市| 宁城县| 泰来县| 宁武县| 吴川市| 恩施市| 无极县| 兴义市| 太湖县| 淳化县| 桃源县| 龙陵县| 五大连池市| 武义县| 都昌县| 新河县| 佛山市| 青铜峡市| 拜城县|