调试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(…)方法中）。