JavaScript程序設(shè)計(jì)之JS調(diào)試
本文主要通過(guò)一個(gè)加法器,介紹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>計(jì)算器</title> </head> <body> <div> <h2>計(jì)算器</h2> <div> <input type="text" id="num1"> <span>+</span> <input type="text" id="num2"> <span>=</span> <span id="result"></span> <button id="add">計(jì)算</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>
重點(diǎn)摘要:
1、一般調(diào)試JS,打印信息有如下三種:
a.用alert,缺點(diǎn)是每次都彈框
b.用console.log,這個(gè)數(shù)據(jù)量小還可以
c.加斷點(diǎn)調(diào)試
2、在JS里,如果變量前面加var,表示局部變量,function里如果不帶var表示全局變量。因此一般情況下變量前面帶var.
3、一般在chrome調(diào)試器里,elements看代碼,在source目錄下進(jìn)行調(diào)試。在該模式下,點(diǎn)擊js里每一行即可以加斷點(diǎn)。
4、調(diào)試模式下最右邊的四個(gè)按鈕分別是:下一個(gè)斷點(diǎn)處,單步執(zhí)行,進(jìn)到下一函數(shù),跳出函數(shù)。基本所有的調(diào)試工具都有這四種。
5、斷點(diǎn)模式下,在console里輸入變量就可以看到當(dāng)前值,同時(shí)可以隨意對(duì)值進(jìn)行修改。
以上就是js調(diào)試的具體步驟,希望大家在javascript程序設(shè)計(jì)時(shí)會(huì)使用js進(jìn)行調(diào)試,謝謝大家的閱讀。
相關(guān)文章
利用JS來(lái)控制鍵盤(pán)的上下左右鍵(示例代碼)
這篇文章主要介紹了利用JS來(lái)控制鍵盤(pán)的上下左右鍵示例代碼。需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2013-12-12原生javascript實(shí)現(xiàn)解析XML文檔與字符串
這篇文章主要介紹了javascript解析XML文檔和XML字符串的方法和具體的代碼解析,有需要的小伙伴可以參考下。2016-03-03在Javascript類(lèi)中使用setTimeout
2008-01-01值得分享和收藏的xmlplus組件學(xué)習(xí)教程
值得分享和收藏的xmlplus組件學(xué)習(xí)教程,xmlplus是一個(gè)設(shè)計(jì)非常獨(dú)特 JavaScript 框架,用于快速開(kāi)發(fā)前后端項(xiàng)目,感興趣的小伙伴們可以參考一下2017-05-05在js里怎么實(shí)現(xiàn)Xcode里的callFuncN方法(詳解)
下面小編就為大家?guī)?lái)一篇在js里怎么實(shí)現(xiàn)Xcode里的callFuncN方法(詳解)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11layer 刷新某個(gè)頁(yè)面的實(shí)現(xiàn)方法
今天小編就為大家分享一篇layer 刷新某個(gè)頁(yè)面的實(shí)現(xiàn)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09如何優(yōu)雅地取消 JavaScript 異步任務(wù)
這篇文章主要介紹了如何優(yōu)雅地取消 JavaScript 異步任務(wù),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03Js實(shí)現(xiàn)手機(jī)發(fā)送驗(yàn)證碼時(shí)按鈕延遲操作
在做項(xiàng)目的時(shí)候,經(jīng)常遇到發(fā)短信驗(yàn)證碼的問(wèn)題,這時(shí)候需要用戶點(diǎn)完發(fā)送驗(yàn)證碼按鈕后,一段時(shí)間內(nèi)不能重復(fù)點(diǎn)擊,畢竟驗(yàn)證碼都是收費(fèi)的嘛,誰(shuí)都不想浪費(fèi),那么如何實(shí)現(xiàn)這種功能呢?下面來(lái)分享一下。2014-06-06