JavaScript程序设计之JS调试


Posted in Javascript onDecember 09, 2015

本文主要通过一个加法器,介绍JS如何调试。先上代码:
效果:

JavaScript程序设计之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里每一行即可以加断点。

JavaScript程序设计之JS调试

4、调试模式下最右边的四个按钮分别是:下一个断点处,单步执行,进到下一函数,跳出函数。基本所有的调试工具都有这四种。

JavaScript程序设计之JS调试

5、断点模式下,在console里输入变量就可以看到当前值,同时可以随意对值进行修改。

JavaScript程序设计之JS调试

以上就是js调试的具体步骤,希望大家在javascript程序设计时会使用js进行调试,谢谢大家的阅读。

Javascript 相关文章推荐
JS 页面内容搜索,类似于 Ctrl+F功能的实现代码
Aug 13 Javascript
jquery 事件执行检测代码
Dec 09 Javascript
使用Json比用string返回数据更友好,也更面向对象一些
Sep 13 Javascript
JS取文本框中最小值的简单实例
Nov 29 Javascript
jquery分页对象使用示例
Apr 01 Javascript
基于js与flash实现的网站flv视频播放插件代码
Oct 14 Javascript
jQuery实现菜单感应鼠标滑动动画效果的方法
Feb 28 Javascript
jquery合并表格中相同文本的相邻单元格
Jul 17 Javascript
jQuery如何防止Ajax重复提交
Oct 14 Javascript
jquery移除了live()、die(),新版事件绑定on()、off()的方法
Oct 26 Javascript
animate.css在vue项目中的使用教程
Aug 05 Javascript
vue elementUI使用tabs与导航栏联动
Jun 21 Javascript
js实现的星星评分功能函数
Dec 09 #Javascript
JavaScript中的this到底是什么(一)
Dec 09 #Javascript
js实现的奥运倒计时时钟效果代码
Dec 09 #Javascript
完美实现bootstrap分页查询
Dec 09 #Javascript
JavaScript脚本库编写的方法
Dec 09 #Javascript
js省市联动效果完整实例代码
Dec 09 #Javascript
JavaScript知识点整理
Dec 09 #Javascript
You might like
php生成短网址示例
2014/05/05 PHP
PHP curl伪造IP地址和header信息代码实例
2015/04/27 PHP
PHP 断点续传实例详解
2017/11/11 PHP
php 截取中英文混合字符串的方法
2018/05/31 PHP
尽可能写&quot;友好&quot;的&quot;Javascript&quot;代码
2007/01/09 Javascript
同一页面多个商品倒计时JS 基于面向对象的javascript
2012/02/16 Javascript
用js来刷新当前页面保留参数的具体实现
2013/12/23 Javascript
ajax请求乱码的解决方法(中文乱码)
2014/04/10 Javascript
浅析JavaScript基本类型与引用类型
2014/05/28 Javascript
Javascript中arguments对象详解
2014/10/22 Javascript
原生javascript+css3编写的3D魔方动画旋扭特效
2016/03/14 Javascript
js canvas实现擦除动画
2016/07/16 Javascript
微信小程序 实现动态显示和隐藏某个控件
2017/04/27 Javascript
Vue2.0 多 Tab切换组件的封装实例
2017/07/28 Javascript
Node.js log4js日志管理详解
2018/07/31 Javascript
jquery实现动态改变css样式的方法分析
2019/05/27 jQuery
JS合并两个数组的3种方法详解
2019/10/24 Javascript
[05:09]第二届DOTA2亚洲邀请赛决赛日比赛集锦:iG 3:0 OG夺冠
2017/04/05 DOTA
Python socket.error: [Errno 98] Address already in use的原因和解决方法
2014/08/25 Python
python批量提取word内信息
2015/08/09 Python
python 实现对文件夹中的图像连续重命名方法
2018/10/25 Python
Python根据欧拉角求旋转矩阵的实例
2019/01/28 Python
使用matplotlib中scatter方法画散点图
2019/03/19 Python
用python爬虫批量下载pdf的实现
2020/12/01 Python
python中yield的用法详解
2021/01/13 Python
HTML5的新特性(1)
2016/03/03 HTML / CSS
护理学中专毕业生求职信
2013/11/11 职场文书
毕业生个人求职自荐信
2014/02/26 职场文书
上海世博会口号
2014/06/19 职场文书
卖车协议书范例
2014/09/16 职场文书
2014市国税局对照检查材料思想汇报
2014/09/23 职场文书
考研经验交流会策划书
2015/11/02 职场文书
《七律·长征》教学反思
2016/02/16 职场文书
2019数学教师下学期工作总结
2019/06/27 职场文书
JavaScript实现酷炫的鼠标拖尾特效
2022/02/18 Javascript
详解Python+OpenCV绘制灰度直方图
2022/03/22 Python