断点调试的三种方法
- debugger
- source资源中增加断点行
- 监听事件，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)
发表回复