JavaScript断点调试Step into Step Over Step Out Resume

总结

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>

</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;
}

JavaScript断点调试Step into Step Over Step Out Resume

相关推荐