chrome-devtools学习系列--断点调试

断点调试的三种方法

1. debugger
2. source资源中增加断点行
3. 监听事件，http请求

demo

html

    
    
    
    


    
debugger
    number1
    
    

    number2
    
    

    计算
    

    

js

function onClick(){
    if(inputsAreEmpty()){
        label.textContent = '错误,你输入的数字为空'
        console.error('错误，你输入的数字为空')
        return;
    }
    updateLabel();
}

function inputsAreEmpty(){
    if(getNumber1() === '' || getNumber2() === ''){
        return true;
    }else{
        return false;
    }
}

function updateLabel(){
    debugger
    var addend1 = getNumber1();
    var addend2 = getNumber2();
    var sum = addend1 + addend2;
    label.textContent = addend1 + '+' + addend2 + '=' +sum;
}

function getNumber1(){
    return inputs[0].value;
}
function getNumber2(){
    return inputs[1].value;
}
var inputs = document.querySelectorAll('input')
var label = document.querySelector('p')
var button = document.querySelector('button')
button.addEventListener('click',onClick)