ホームページ > 記事 > ウェブフロントエンド > JavaScript プログラミングでの JS デバッグ_JavaScript スキル

JavaScript プログラミングでの JS デバッグ_JavaScript スキル

WBOYオリジナル: 2016-05-16 15:26:541704ブラウズ

この記事では主にadderを使って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>

デモ.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 をデバッグする場合、次の 3 種類の印刷情報があります:

a. アラートを使用します。欠点は、毎回ボックスがポップアップすることです。

b. console.log を使用します。データ量は少なくても大丈夫です

c. デバッグ用のブレークポイントを追加します

2. JS では、変数の前に var が付いている場合、関数内に var がない場合は、グローバル変数を意味します。したがって、変数の前には通常 var.

が付きます。

3. 通常、Chrome デバッガーで要素内のコードを確認し、ソースディレクトリでデバッグします。このモードでは、js の各行をクリックしてブレークポイントを追加できます。