网易前端微专业，JavaScript程序设计：JS调试

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

test.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里输入变量就可以看到当前值，同时可以随意对值进行修改。