JavaScript程序设计之JS调试_javascript技巧
程序员文章站
2022-03-07 12:57:06
...
本文主要通过一个加法器,介绍JS如何调试。先上代码:
效果:
效果:
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里每一行即可以加断点。
4、调试模式下最右边的四个按钮分别是:下一个断点处,单步执行,进到下一函数,跳出函数。基本所有的调试工具都有这四种。
5、断点模式下,在console里输入变量就可以看到当前值,同时可以随意对值进行修改。
以上就是js调试的具体步骤,希望大家在javascript程序设计时会使用js进行调试,谢谢大家的阅读。
上一篇: JavaScrip调试技巧之断点调试_javascript技巧
下一篇: php如何将富文本内容转义
推荐阅读
-
Node.js模拟浏览器文件上传示例_javascript技巧
-
JS的递增/递减运算符和带操作的赋值运算符的等价式_javascript技巧
-
Js 刷新框架页的代码_javascript技巧
-
js或者jquery判断图片是否加载完成实现代码_javascript技巧
-
js封装的textarea操作方法集合(兼容很好)_javascript技巧
-
Js之软键盘实现(js源码)_javascript技巧
-
js自动闭合html标签(自动补全html标记)_javascript技巧
-
js 图片随机不定向浮动的实现代码_javascript技巧
-
让低版本浏览器支持input的placeholder属性(js方法)_javascript技巧
-
浏览器解析js生成的html出现样式问题的解决方法_javascript技巧