Home>

This article mainly uses an adder,Introduce how to debug js.First on the code:

effect:

test.html:

<span><! Doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Calculator</title>
</head>
<body>
<div>
  <h2>Calculator</h2>
  <div>
    <input type="text">
    <span>+</span>
    <input type="text">
    <span>=</span>
    <span></span>
    <button>calculation</button>
  </div>
</div>
<script src="./demo.js"></script>
</body>
</html></span>

demo.js

<span>/**
 * 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>

Key summary:

1.Generally debug js, there are three kinds of print information:

a. Use alert, the disadvantage is to pop the frame every time

b. Use console.log, this data volume is ok

c. Add breakpoint debugging

2. In js, if you add var in front of a variable, it means a local variable.If var is not used in a function, it means a global variable.Therefore, variables are usually preceded by var.

3, generally in the chrome debugger,elements look at the code and debug in the source directory.In this mode,Click on each line in js to add breakpoints.

4. The four rightmost buttons in the debug mode are:at the next breakpoint,Single step,Go to the next function,Out of function.Basically all debugging tools have these four.

5. In breakpoint mode,Enter the variable in the console to see the current value,At the same time, you can modify the value at will.

  • Previous Java observer design pattern (Observable and Observer)
  • Next Detailed JavaScript basic types and reference types