当前位置: 首页 > 编程笔记 >

JavaScript程序设计之JS调试

范鸿畅
2023-03-14
本文向大家介绍JavaScript程序设计之JS调试,包括了JavaScript程序设计之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 程序设计以 ECMAScript 5.1 为标准,从基本语法到原理深入,理解和编写Javascript程序。核心内容有语言简介、调试器、类型系统、内置对象、基本语法、变量作用域、闭包、面向对象编程等。

  • JavaScript的继承(实现继承) 原型链 用 原型链 作为实现继承的方法,其基本思想是 利用原型让 一个引用类型 继承 另一个引用类型 的 属性和方法,实现方式就是让  原型对象 等于 另一个类型的实例对象。 回顾构造函数、原型对象和实例之间的关系: 每个构造函数都有个原型属性(prototype),原型属性是一个指针,指向构造函数的原型对象,原型对象默认有个构造属性(constructor

  • 组合使用构造函数模式和原型模式 在上述例子中,包含引用类型的原型模式,当修改一个实例的属性值时,其它实例的这个属性值也会相应变化。以及实例要有属于自己的属性这两个问题没有得到解决。 解决以上两个问题的方法:我们可以将  实例本身的属性用 构造函数封装起来,而  将共享的属性和方法用 原型对象封装起来。 创建自定义类型最常见的方法,就是组合使用构造函数模式和原型模式。 构造函数模式用于定义实例自身的

  • 创建对象(设计模式) 虽然Object构造函数或对象字面量都可以用创建对象,但这样有个缺点:使用同一个接口创建许多对象,这样容易产生大量代码。为了减少一个多余的、不必要的代码,我们在创建对象时,可以使用一些常见的设计模式来创建对象。 工厂模式 工厂模式抽象了创建具体对象的过程。用函数来封装 以特定接口 创建对象 的细节。(封装细节--特定接口创建相似对象) 将原始方法封装到函数,并返回这个对象。返

  • 理解对象 任何事物都可以看作对象,对象就是五级无序名/值对的集合。对象有属性和方法。 对象就是 无序属性 的集合,属性可包括基本值、对象和函数,简单地说就是一组无特定顺序的值,由名/值对组成,值可以是数据或函数。属性名是字符串,我们也将对象看成是从字符串到值的映射,当然,对象除了本身的属性外,还可以从一个叫原型的对象继承属性。 在JavaScript中,除了字符串、数字、true、false、nu

  • JavaScript 是一种非常松散的面向对象语言,也是 Web 开发中极受欢迎的一门语言。 JavaScript,尽管它的语法和编程风格与 Java 都很相似,但它却不是 Java 的“轻量级”版本,甚至与 Java 没有任何关系。 JavaScript 是一种全新的动态语言,它植根于全球数亿网民都在使用的 Web 浏览器之中,致力于增强网站和 Web 应用程序的交互性。