調試F9/F10/F11/F8

這篇隨筆記錄來自於實現活動促銷頁彈幕過程學習：

// 頁面加載完初始化方法
$(function () {  
    GetCustList();
    createBarrage();
})

// 某功能的初始化方法
function GetCustList() {
    var successFun = function (json) {
        barrageArr = json.Info;
        barrageLen = barrageArr.length;
    };
    var par = { act: "GetList", "id": id };
    JsAjax("/Handle/promotion/nc_promotion_custHandle.ashx", par, successFun);
}

function createBarrage() {
    if (barrageLen != 0) {
        arrLen = barrageLen;
        var barrageItem = document.createElement("li");
        barrageObjIndex = Math.floor(Math.random() * arrLen);
        html = '   <div class="barrageImg"><img src="' + (barrageArr[barrageObjIndex].user_avatar ? barrageArr[barrageObjIndex].user_avatar : '/images/promotion/iconPhoto2.png') + '" alt="picture" /></div> ' + formatName(barrageArr[barrageObjIndex].user_name) + '<span class="applyFont">報名</span>參與活動--- ';
        barrageItem.innerHTML = html;
        barrageItem.className = "barrageItem commFlex";
        barrageUl.appendChild(barrageItem);
        move(barrageItem);
    } else {
        console.log("第一次:" + barrageLen);
    }
}
function move(barrage) {
    $(barrage).animate({
        "left": 0,
        "opacity": 1
    }, 1200, function () {
        barrage.style.webkitTransform = 'translate(-300px)';
        barrage.style.transform = 'translateY(-300px)';
    });
}

概念：
　　$(function({ funA(); funcB()…})；$(function()}是頁面加載后將會執行的初始化方法；其中初始化方法里的哥調用方法會按順序執行；對於某一個方法，里面的語句也是自上而下一步步執行。

 

關於調試：
　　F10——單步執行step over：下一行，如果斷點在函數內部，單步執行時遇到子函數時，會將整個子函數視作一步執行，在不存在子函數的情況下，F10和F11效果一樣（雖子函數是一步執行完的，對於子函數來說，內部依然是自上而下一步步執行的，只是F10的作用相當只取子函數的結果，對於外部函數來說，能更快執行完內部所涉及的各項操作）。

　　說明：如上圖所示，在A處打斷點，F10  > B > F10 > C  > F10 > C下方右花括號“}” > F10 > 如上述所貼頁面初始化方法內的createBarrage()方法。

 

　　F11——單步執行step into：下一行，執行到的外部函數內存在子函數的話，使用F11會進入到子函數，可在子函數內使用F11查看每步執行結果。

　　說明：如上圖所示，在A處打斷點，F11 > B > F11 > C > 將進入封裝的JsAjax(url, data, successFun)方法中 > Shift + F11 > C下方右花括號“}”  > F11 > 如上述所貼頁面初始化方法內的createBarrage()方法。

 

　　Shift + F11——直接跳出當前斷點執行到的函數並進入下一步（如果在子函數使用。則跳到子函數所在父函數位置的下一步；如果斷點是在父函數中，則執行父函數的兄弟函數）。

　　說明：如上圖所示，在A處打斷點，Shift + F11 > 如上述所貼頁面初始化方法內的createBarrage()方法；另一個如F11說明。

 

斷點在不同地方的執行順序理解：

　　某功能的初始化方法存在頁面初始化方法內和初始化方法外。在某功能初始化方法開始出打斷點時，斷點標簽會跳到方法內的第一行（134，而不是133）。
　　只要對某功能初始化方法打斷點，那么這個頁面的各函數都會把頁面加載初始化的方法執行完才能正常顯示，即使斷點的方法之前有其他功能方法也沒能先執行完並顯示相應數據。

　　在頁面初始化方法內對GetCustLsit()打斷點：　　
　　　　F10 > createBarrage() > funC > … > 直到執行到頁面初始化的" }); "處可將頁面初始化完，動態數據得以顯示。

　　在頁面初始化方法外對GetCustList()打斷點（133或134，都會跳到134）：
　　　　這里的斷點位置作為方法的第一行，相當於是給某功能方法初始化時進行斷點，因為方法存在頁面加載初始化方法中，所以，這時需要等待$(function(){…})方法執行完之后，動態加載的數據才能顯示（這里我暫時理解為，在初始化時打斷點，相當於總的初始化函數執行到該函數時，便停止執行，要跳轉到該初始化方法中）。
　　　　只要打斷點的地方是會自上而下執行到的語句，那頁面的其他初始化方法也是不能執行。因為只要該方法不能完成執行完，就沒法執行完頁面初始化方法。

　　在變量函數內對變量進行斷點，如上圖A處的barrageLen處斷點，F10  > A處的右花括號“}”處 > F10 > JsAjax(url, data, successFun)中successFun的執行處（successFun為函數變量，函數調用在JsAjax(…)方法中）。