欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

JavaScript程序设计之JS调试_javascript技巧

程序员文章站 2022-03-07 12:57:06
...
本文主要通过一个加法器,介绍JS如何调试。先上代码:
效果:

JavaScript程序设计之JS调试_javascript技巧

test.html:

 
 


计算器

计算器

+ =

demo.js

/** 
 * 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; 
} 

重点摘要:

1、一般调试JS,打印信息有如下三种:

a.用alert,缺点是每次都弹框

b.用console.log,这个数据量小还可以

c.加断点调试

2、在JS里,如果变量前面加var,表示局部变量,function里如果不带var表示全局变量。因此一般情况下变量前面带var.

3、一般在chrome调试器里,elements看代码,在source目录下进行调试。在该模式下,点击js里每一行即可以加断点。

JavaScript程序设计之JS调试_javascript技巧

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

JavaScript程序设计之JS调试_javascript技巧

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

JavaScript程序设计之JS调试_javascript技巧

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

相关标签: js 调试