JS debugging in JavaScript programming_javascript skills-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

JS debugging in JavaScript programming_javascript skills

May 16, 2016 pm 03:26 PM

js debug

This article mainly introduces how to debug JS through an adder. First enter the code:
Effect:

test.html：

&lt;span style="font-family:Comic Sans MS;font-size:18px;"&gt;&lt;!DOCTYPE html&gt; 
&lt;html lang="en"&gt; 
&lt;head&gt; 
  &lt;meta charset="UTF-8"&gt; 
  &lt;title&gt;计算器&lt;/title&gt; 
&lt;/head&gt; 
&lt;body&gt; 
 
&lt;div&gt; 
  &lt;h2&gt;计算器&lt;/h2&gt; 
 
  &lt;div&gt; 
    &lt;input type="text" id="num1"&gt; 
    &lt;span&gt;+&lt;/span&gt; 
    &lt;input type="text" id="num2"&gt; 
    &lt;span&gt;=&lt;/span&gt; 
    &lt;span id="result"&gt;&lt;/span&gt; 
    &lt;button id="add"&gt;计算&lt;/button&gt; 
  &lt;/div&gt; 
&lt;/div&gt; 
&lt;script src="./demo.js"&gt;&lt;/script&gt; 
&lt;/body&gt; 
&lt;/html&gt;&lt;/span&gt;

Copy after login

demo.js

&lt;span style="font-family:Comic Sans MS;font-size:18px;"&gt;/** 
 * 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; 
}&lt;/span&gt;

Copy after login

Key summary:

1. Generally when debugging JS, there are three types of printing information:

a. Use alert, the disadvantage is that the box pops up every time

b. Use console.log, the amount of data is small and it’s okay

c. Add breakpoints for debugging

2. In JS, if var is added in front of a variable, it means a local variable. If there is no var in the function, it means a global variable. Therefore, variables are usually preceded by var.

3. Generally in the chrome debugger, look at the code in elements and debug in the source directory. In this mode, you can add breakpoints by clicking on each line in js.

4. The four rightmost buttons in debugging mode are: next breakpoint, single-step execution, enter the next function, and jump out of the function. Basically all debugging tools have these four types.

5. In breakpoint mode, you can see the current value by entering a variable in the console, and you can modify the value at will.

The above are the specific steps for js debugging. I hope you will use js for debugging when designing javascript programs. Thank you for reading.

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn