總結
step over 執行當前行
step into 進入方法內部
step out 從方法內部執行後返回上一層
代碼如下:
①index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>Chrome Debug Sample</title>
<script defer src="main.js"></script>
<style>
html,
body {
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
background: #EEEEEE;
padding: 0;
overflow: hidden;
}
form {
zoom: 2;
text-align: center;
}
input[type=number] {
width: 30px;
}
#result {
width: 30px;
display: inline-block
}
</style>
</head>
<body>
<form>
<div>
<input type="number" value="1" id="num1">
<select id="calcType">
<option value="type-add">+</option>
<option value="type-substract">-</option>
<option value="type-multiply">×</option>
<option value="type-divide">÷</option>
</select>
<input type="number" value="2" id="num2"> =
<span id="result"></span>
</div>
</form>
</body>
</html>
②main.js
const elementSelect = document.querySelector("#calcType");
const elementNum1 = document.querySelector("#num1");
const elementNum2 = document.querySelector("#num2");
const elementResult = document.querySelector("#result");
elementSelect.addEventListener("change", update);
elementNum1.addEventListener("change", update);
elementNum2.addEventListener("change", update);
function update() {
const result = calculate(
Number(elementNum1.value),
Number(elementNum2.value),
elementSelect.value
);
elementResult.innerHTML = result;
}
function calculate(num1, num2, calcType) {
let result;
switch (calcType) {
case "type-add":
result = add(num1, num2);
break;
case "type-substract":
result = substract(num1, num2);
break;
case "type-multiply":
result = multiply(num1, num2);
break;
case "type-divide":
result = divide(num1, num2);
break;
}
return result;
}
function add(num1, num2) {
const result = num1 + num2;
return result;
}
function substract(num1, num2) {
const result = num1 - num2;
return result;
}
function multiply(num1, num2) {
const result = num1 * num2;
return result;
}
function divide(num1, num2) {
const result = num1 / num2;
return result;
}