JavaScript程序设计之JS调试
更新时间：2015年12月09日 10:37:38 作者：yanzi1225627
这篇文章主要介绍了JavaScript程序设计中的重要环节：JS调试，本文通过一个加法器，介绍JS如何调试，感兴趣的小伙伴们可以参考一下
本文主要通过一个加法器，介绍JS如何调试。先上代码：
效果：
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、一般调试JS，打印信息有如下三种：
a.用alert，缺点是每次都弹框
b.用console.log，这个数据量小还可以
c.加断点调试
2、在JS里，如果变量前面加var，表示局部变量，function里如果不带var表示全局变量。因此一般情况下变量前面带var.
3、一般在chrome调试器里，elements看代码，在source目录下进行调试。在该模式下，点击js里每一行即可以加断点。
4、调试模式下最右边的四个按钮分别是：下一个断点处，单步执行，进到下一函数，跳出函数。基本所有的调试工具都有这四种。
5、断点模式下，在console里输入变量就可以看到当前值，同时可以随意对值进行修改。
以上就是js调试的具体步骤，希望大家在javascript程序设计时会使用js进行调试，谢谢大家的阅读。
相关文章
这篇文章主要介绍了JavaScript代理模式原理与用法,结合实例形式详细分析了JavaScript代理模式基本概念、原理、用法与操作注意事项,需要的朋友可以参考下2020-03-03
这篇文章主要为大家详细介绍了JavaScript实现选中文字提示新浪微博分享效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
图片轮播组件是一个在网页中很常见的技术，这篇文章主要为大家详细介绍了Bootstrap图片轮播组件使用实例，感兴趣的小伙伴们可以参考一下2016-06-06
window.location.href是前端开发中一个非常重要且常用的属性,它为我们提供了获取和操作页面URL的便捷手段,本文主要介绍了js中window.location.href的用法大全,感兴趣的可以2023-12-12
最近，把项目中用到的下拉框组件重新封装了一下，以构造函数的方式进行封装，主要方法和事件定义在原型上，下面是主要的实现代码并添加了比较详细的注释，分享出来供大家参考2018-10-10
本篇文章通过具体实例，对Javascript的封装过程进行案例分析，有助于对其代码实现的理解与学习。下面就随小编一起来看看吧2016-12-12
javascript上下方向键控制表格行选中并高亮显示的方法
这篇文章主要介绍了javascript上下方向键控制表格行选中并高亮显示的方法,涉及javascript针对键盘按键操作相应的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-02-02
这篇文章主要介绍了微信小程序文章详情页面实现代码,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
我们会遇到的需求是，获取今天或者某一天所在星期的开始和结束日期。今天小编通过实例代码给大家分享JavaScript获取某一天所在的星期，感兴趣的朋友跟随小编一起看看吧2019-09-09
js在客户端验证密码强度，兼容FireFox和IE...2007-05-05
最新评论