chromedevtools学习系列断点调试

23次阅读

共计 1092 个字符，预计需要花费 3 分钟才能阅读完成。

断点调试的三种方法

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

demo

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1>debugger</h1>
    <label for="num1">number1</label>
    <input type="text" id='num1'>
    <br>
    <label for="num2">number2</label>
    <input type="text" id='num2'>
    <br>
    <button> 计算 </button>
    <p></p>
    <script src='index.js'></script>
</body>
</html>

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)

正文完
chrome-devtools
发表至：无分类
2019-08-24
 0