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里輸入變量就可以看到當前值，同時可以隨意對值進行修改。

以上就是js調試的具體步驟，希望大家在javascript程序設計時會使用js進行調試，謝謝大家的閱讀。相關閱讀:

JS實現一個按鈕的方法

從數組中隨機取x條不重復數據的JS代碼

asp.net上傳圖片并作處理水印與縮略圖的實例代碼

使用Get方式提交數據到Tomcat服務器的方法

js判斷當前頁面用什么瀏覽器打開的方法

android檢測網絡連接狀態示例講解

jquery showModelDialog的使用方法示例詳解

C#編寫ActiveX網頁截圖控件

JS動態增加刪除UL節點LI及相關內容示例

AJAX和JSP混合使用方法實例

PHP上傳圖片進行等比縮放可增加水印功能

MAC系統iTunes清理iOS備份文件增大磁盤空間的方法

淺談C語言編程中的布爾bool數據類型

CSS實現背景透明文字不透明兼容各種瀏覽器有圖有真相

總結

以上是生活随笔為你收集整理的JS在html中加法器,JavaScript_JavaScript程序设计之JS调试，本文主要通过一个加法器，介 - phpStudy...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。