不知道为什么微专业总是要把调试放到最前面来讲，没有基础地看这些代码很吃力，可是我明明看过了DOM，还是不会= =，真是辣鸡。不过可以看出来，实际开发中调试是十分重要的一步，所以也应该重视。
最初是在代码中添加alert()和console.log()来查看变量的值，但是如果要查看的变量很多，就无能为力了，所以还是要用工具来调试比较方便。
各浏览器都带有调试工具，右击审查元素可以查看，调试脚本都是在sources面板和console面板。
查看变量需要配合断点使用，然后一步一步检查变量的值，没有代码也调试不了，所以在写代码的时候再熟悉熟悉。
附录：一个简单的加法计算器
看到这个简单的加法函数也很想尝试一下，撸代码如下:
一天过去了。。。
算了，还是copy一下吧。。。。
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<style>
#result{
display:inline-block;
color:#f00;
width:40px;
}
</style>
</head>
<body>
<h2>Demo</h2>
<input type="text" id="num1">
<span>+</span>
<input type="text" id="num2">
<span>=</span>
<div id="result"> </div>
<input type="submit" value="计算" id="btn">
<script>
var nNum1 = document.getElementById('num1'),
nNum2 = document.getElementById('num2'),
nResult = document.getElementById('result'),
nBtn = document.getElementById('btn');
nBtn.addEventListener("click",onClickAdd,false);
function onClickAdd(){
var a = parseInt(nNum1.value),
b = parseInt(nNum2.value),
result;
result = add(a,b);
nResult.innerHTML = result;
}
function add(a,b){
return a+b;
}
</script>
</body>
</html>
网友评论