共计 1092 个字符,预计需要花费 3 分钟才能阅读完成。
断点调试的三种方法
- 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) |
正文完
发表至:无分类
2019-08-24