网易前端微专业,JavaScript程序设计:JS调试

本节主要通过一个加法器,介绍JS如何调试。先上代码:

test.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算器</title>
</head>
<body>

<div>
    <h2>计算器</h2>

    <div>
        <input type="text" id="num1">
        <span>+</span>
        <input type="text" id="num2">
        <span>=</span>
        <span id="result"></span>
        <button id="add">计算</button>
    </div>
</div>
<script src="./demo.js"></script>
</body>
</html>

demo.js

/**
 * Created by yanzi on 15/12/8.
 */
var num1 = document.getElementById("num1"),
    num2 = document.getElementById("num2"),
    result = document.getElementById("result"),
    btn_add = document.getElementById("add");

btn_add.addEventListener("click", onAddClick, false);
function onAddClick(){
    var a = parseInt(num1.value),
    b = parseInt(num2.value);
    var sum = add(a, b);
    result.innerHTML = sum;
}

/**
 *
 * @param a
 * @param b
 * @returns {*}
 */
function add(a, b){
    return a+b;
}

效果:


课堂摘要:

1,一般调试JS,打印信息有如下三种:

a,用alert,缺点是每次都弹框

b,用console.log,这个数据量小还可以

c,加断点调试

2,在JS里,如果变量前面加var,表示局部变量,function里如果不带var表示全局变量。因此一般情况下变量前面带var.

3,一般在chrome调试器里,elements看代码,在source目录下进行调试。在该模式下,点击js里每一行即可以加断点。


4,调试模式下最右边的四个按钮分别是:下一个断点处,单步执行,进到下一函数,跳出函数。基本所有的调试工具都有这四种。


5,断点模式下,在console里输入变量就可以看到当前值,同时可以随意对值进行修改。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论

打赏作者

yanzi1225627

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值