집 >웹 프론트엔드 >JS 튜토리얼 >JavaScript 프로그래밍_javascript 기술의 JS 디버깅

JavaScript 프로그래밍_javascript 기술의 JS 디버깅

WBOY원래의: 2016-05-16 15:26:541750검색

이 글에서는 주로 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>

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. 알림을 사용하면 매번 상자가 팝업된다는 단점이 있습니다

b. console.log를 이용하세요. 데이터 양이 적어서 괜찮습니다

c. 디버깅을 위한 중단점 추가

2. JS에서는 변수 앞에 var가 붙으면 지역 변수를 의미합니다. 함수에 var가 없으면 전역 변수를 의미합니다. 따라서 변수 앞에는 일반적으로 var가 붙습니다.

3. 일반적으로 크롬 디버거에서는 요소의 코드를 살펴보고 소스 디렉터리에서 디버그합니다. 이 모드에서는 js의 각 줄을 클릭하여 중단점을 추가할 수 있습니다.

4. 디버깅 모드의 가장 오른쪽에 있는 4개의 버튼은 다음 중단점, 단일 단계 실행, 다음 기능 입력 및 기능에서 나가기입니다. 기본적으로 모든 디버깅 도구에는 이러한 네 가지 유형이 있습니다.

5. 중단점 모드에서는 콘솔에 변수를 입력하여 현재 값을 확인할 수 있으며, 값을 마음대로 수정할 수 있습니다.

위 내용은 js 디버깅을 위한 구체적인 단계입니다. 자바스크립트 프로그램을 설계할 때 디버깅에 js를 활용하시기 바랍니다.

성명：

이전 기사：프론트엔드 프레임워크 React_javascript 기술에 대한 심층 토론다음 기사：프론트엔드 프레임워크 React_javascript 기술에 대한 심층 토론

JavaScript 프로그래밍_javascript 기술의 JS 디버깅

관련 기사