JavaScript程序設(shè)計之JS調(diào)試

更新時間：2015年12月09日 10:37:38 作者：yanzi1225627

這篇文章主要介紹了JavaScript程序設(shè)計中的重要環(huán)節(jié)：JS調(diào)試，本文通過一個加法器，介紹JS如何調(diào)試，感興趣的小伙伴們可以參考一下

本文主要通過一個加法器，介紹JS如何調(diào)試。先上代碼：
效果：

test.html：

<span style="font-family:Comic Sans MS;font-size:18px;"><!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></span>

demo.js

<span style="font-family:Comic Sans MS;font-size:18px;">/** 
 * 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; 
}</span>

重點摘要：

1、一般調(diào)試JS，打印信息有如下三種：

a.用alert，缺點是每次都彈框

b.用console.log，這個數(shù)據(jù)量小還可以

c.加斷點調(diào)試

2、在JS里，如果變量前面加var，表示局部變量，function里如果不帶var表示全局變量。因此一般情況下變量前面帶var.

3、一般在chrome調(diào)試器里，elements看代碼，在source目錄下進(jìn)行調(diào)試。在該模式下，點擊js里每一行即可以加斷點。