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 多种变量定义(对象直接量,数组直接量和函数直接量)
May 24 Javascript
jQuery关于导航条背景切换效果实现示例
Sep 04 Javascript
jquery、js操作checkbox全选反选
Mar 12 Javascript
JavaScript数组函数unshift、shift、pop、push使用实例
Aug 27 Javascript
Ajax局部更新导致JS事件重复触发问题的解决方法
Oct 14 Javascript
js+html5实现canvas绘制椭圆形图案的方法
May 21 Javascript
xtemplate node.js 的使用方法实例解析
Aug 22 Javascript
JS填写银行卡号每隔4位数字加一个空格
Dec 19 Javascript
webpack之引入图片的实现及问题
Oct 08 Javascript
vue改变循环遍历后的数据实例
Nov 07 Javascript
vue跳转方式(打开新页面)及传参操作示例
Jan 26 Javascript
从源码角度来回答keep-alive组件的缓存原理
Jan 18 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
介绍几个array库的新函数 php
2006/12/29 PHP
php 计算两个时间戳相隔的时间的函数(小时)
2009/12/18 PHP
destoon实现调用图文新闻的方法
2014/08/21 PHP
四种php中webservice实现的简单架构方法及实例
2015/02/03 PHP
Yii中CGridView实现批量删除的方法
2015/12/28 PHP
JQuery 入门实例1
2009/06/25 Javascript
javascript工具库代码
2012/03/29 Javascript
子窗体与父窗体传值示例js代码
2013/08/01 Javascript
js调用浏览器打印模块实现点击按钮触发自定义函数
2014/03/21 Javascript
JS实现两表格里数据来回转移的方法
2015/05/28 Javascript
快速使用Bootstrap搭建传送带
2016/05/06 Javascript
JavaScript ES5标准中新增的Array方法
2016/06/28 Javascript
微信小程序 侧滑删除(左滑删除)
2017/05/23 Javascript
手把手教你vue-cli单页到多页应用的方法
2018/05/31 Javascript
使用vue-router与v-if实现tab切换遇到的问题及解决方法
2018/09/07 Javascript
Vue.js 图标选择组件实践详解
2018/12/03 Javascript
原生JS实现的跳一跳小游戏完整实例
2019/01/27 Javascript
Vue实现兄弟组件间的联动效果
2020/01/21 Javascript
Vue.js中Line第三方登录api的实现代码
2020/06/29 Javascript
详解vue中v-on事件监听指令的基本用法
2020/07/22 Javascript
vue路由的配置和页面切换详解
2020/09/09 Javascript
[02:22]2018DOTA2亚洲邀请赛VG赛前采访
2018/04/03 DOTA
详解Python3 pandas.merge用法
2019/09/05 Python
Python 类,property属性(简化属性的操作),@property,property()用法示例
2019/10/12 Python
基于Django统计博客文章阅读量
2019/10/29 Python
python数据库编程 Mysql实现通讯录
2020/03/27 Python
详解HTML5 data-* 自定义属性
2018/01/24 HTML / CSS
设置器与访问器的定义以及各自特点
2016/01/08 面试题
后勤采购员岗位职责
2013/12/19 职场文书
公司人力资源的自我评价
2014/01/02 职场文书
出纳工作岗位责任制
2014/02/02 职场文书
党的群众路线教育实践活动个人对照检查剖析材料
2014/09/23 职场文书
教师节横幅标语
2014/10/08 职场文书
房屋租赁协议书
2014/10/18 职场文书
MySQL中的隐藏列的具体查看
2021/09/04 MySQL
mysql 子查询的使用
2022/04/28 MySQL