網易前端微專業，JavaScript程式設計：JS調試

網易前端微專業，JavaScript程式設計：JS調試

本節主要通過一個加法器，介紹JS如何調試。先上代碼：

test.html：

 

計算機 + =計算<script src="./demo.js"></script>
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裡輸入變數就可以看到當前值，同時可以隨意對值進行修改。