快捷導(dǎo)航

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

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

這篇文章主要介紹了JavaScript程序設(shè)計(jì)中的重要環(huán)節(jié)：JS調(diào)試，本文通過(guò)一個(gè)加法器，介紹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)文章

JavaScript代理模式原理與用法實(shí)例詳解
這篇文章主要介紹了JavaScript代理模式原理與用法,結(jié)合實(shí)例形式詳細(xì)分析了JavaScript代理模式基本概念、原理、用法與操作注意事項(xiàng),需要的朋友可以參考下
2020-03-03
JavaScript實(shí)現(xiàn)選中文字提示新浪微博分享效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)選中文字提示新浪微博分享效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-06-06
Bootstrap圖片輪播組件使用實(shí)例解析
圖片輪播組件是一個(gè)在網(wǎng)頁(yè)中很常見(jiàn)的技術(shù)，這篇文章主要為大家詳細(xì)介紹了Bootstrap圖片輪播組件使用實(shí)例，感興趣的小伙伴們可以參考一下
2016-06-06
js中window.location.href的用法大全
window.location.href是前端開(kāi)發(fā)中一個(gè)非常重要且常用的屬性,它為我們提供了獲取和操作頁(yè)面URL的便捷手段,本文主要介紹了js中window.location.href的用法大全,感興趣的可以
2023-12-12
原生JS實(shí)現(xiàn)自定義下拉單選選擇框功能
最近，把項(xiàng)目中用到的下拉框組件重新封裝了一下，以構(gòu)造函數(shù)的方式進(jìn)行封裝，主要方法和事件定義在原型上，下面是主要的實(shí)現(xiàn)代碼并添加了比較詳細(xì)的注釋，分享出來(lái)供大家參考
2018-10-10
Javascript之面向?qū)ο?-封裝
本篇文章通過(guò)具體實(shí)例，對(duì)Javascript的封裝過(guò)程進(jìn)行案例分析，有助于對(duì)其代碼實(shí)現(xiàn)的理解與學(xué)習(xí)。下面就隨小編一起來(lái)看看吧
2016-12-12
javascript上下方向鍵控制表格行選中并高亮顯示的方法
這篇文章主要介紹了javascript上下方向鍵控制表格行選中并高亮顯示的方法,涉及javascript針對(duì)鍵盤按鍵操作相應(yīng)的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-02-02
微信小程序文章詳情頁(yè)面實(shí)現(xiàn)代碼
這篇文章主要介紹了微信小程序文章詳情頁(yè)面實(shí)現(xiàn)代碼,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
JavaScript獲取某一天所在的星期
我們會(huì)遇到的需求是，獲取今天或者某一天所在星期的開(kāi)始和結(jié)束日期。今天小編通過(guò)實(shí)例代碼給大家分享JavaScript獲取某一天所在的星期，感興趣的朋友跟隨小編一起看看吧
2019-09-09
js在客戶端驗(yàn)證密碼強(qiáng)度，兼容FireFox和IE
js在客戶端驗(yàn)證密碼強(qiáng)度，兼容FireFox和IE...
2007-05-05