JavaScript 프로그래밍_javascript 기술의 JS 디버깅-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:26 PM

js 디버그

이 글에서는 주로 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를 활용하시기 바랍니다.

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

뜨거운 도구

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7324

자바 튜토리얼

1625

Cakephp 튜토리얼

1350

라라벨 튜토리얼

1262

PHP 튜토리얼

1209

Related knowledge

C++ 함수 디버깅에 대한 자세한 설명: 다중 스레드 함수의 문제를 디버깅하는 방법은 무엇입니까? May 02, 2024 pm 04:15 PM

C++ 다중 스레드 디버깅은 GDB를 사용할 수 있습니다. 1. 디버깅 정보 컴파일을 활성화합니다. 2. 중단점을 설정합니다. 3. 스레드를 보려면 infothread를 사용합니다. 4. 스레드를 전환하려면 next, stepi 및 locals를 사용합니다. 실제 사례 디버깅 교착 상태: 1. threadapplyallbt를 사용하여 스택을 인쇄합니다. 2. 스레드 상태를 확인합니다. 3. 기본 스레드를 한 단계씩 진행합니다. 4. 교착 상태를 해결하기 위해 액세스를 조정합니다.

LeakSanitizer를 사용하여 C++ 메모리 누수를 디버깅하는 방법은 무엇입니까? Jun 02, 2024 pm 09:46 PM

LeakSanitizer를 사용하여 C++ 메모리 누수를 디버깅하는 방법은 무엇입니까? LeakSanitizer를 설치합니다. 컴파일 플래그를 통해 LeakSanitizer를 활성화합니다. 애플리케이션을 실행하고 LeakSanitizer 보고서를 분석합니다. 메모리 할당 유형과 할당 위치를 식별합니다. 메모리 누수를 수정하고 동적으로 할당된 모든 메모리가 해제되었는지 확인하세요.

golang 함수 디버깅 및 분석 바로가기 May 06, 2024 pm 10:42 PM

이 기사에서는 실행을 일시 중지하고, 변수를 확인하고, 중단점을 설정하는 데 사용되는 내장 디버거 dlv를 포함하여 Go 기능 디버깅 및 분석을 위한 바로 가기를 소개합니다. 로깅 - 로그 패키지를 사용하여 메시지를 기록하고 디버깅 중에 확인합니다. 성능 분석 도구 pprof는 호출 그래프를 생성하고 성능을 분석하며, gotoolpprof를 사용하여 데이터를 분석합니다. 실제 사례: pprof를 통해 메모리 누수를 분석하고 호출 그래프를 생성하여 누수를 일으키는 함수를 표시합니다.

Java 람다 표현식에서 효율적인 디버깅을 수행하는 방법은 무엇입니까? Apr 24, 2024 pm 12:03 PM

효율적으로 Lambda 표현식을 디버그합니다. IntelliJ IDEA 디버거: 변수 선언이나 메서드에 중단점을 설정하고, 내부 변수와 상태를 검사하고, 실제 구현 클래스를 확인합니다. Java9+JVMTI: 런타임 JVM에 연결하여 식별자를 얻고, 바이트코드를 검사하고, 중단점을 설정하고, 실행 중에 변수와 상태를 모니터링합니다.

Java 동시 프로그래밍에서 동시성 테스트 및 디버깅을 수행하는 방법은 무엇입니까? May 09, 2024 am 09:33 AM

동시성 테스트 및 디버깅 Java 동시 프로그래밍의 동시성 테스트 및 디버깅은 매우 중요하며 다음 기술을 사용할 수 있습니다. 동시성 테스트: 단위 테스트: 단일 동시 작업을 격리하고 테스트합니다. 통합 테스트: 여러 동시 작업 간의 상호 작용을 테스트합니다. 부하 테스트: 부하가 심한 상황에서 애플리케이션의 성능과 확장성을 평가합니다. 동시성 디버깅: 중단점: 스레드 실행을 일시 중지하고 변수를 검사하거나 코드를 실행합니다. 로깅: 스레드 이벤트 및 상태를 기록합니다. 스택 추적: 예외의 원인을 식별합니다. 시각화 도구: 스레드 활동 및 리소스 사용량을 모니터링합니다.

PHP 비동기 코드를 디버깅하는 방법 May 31, 2024 am 09:08 AM

PHP 비동기 코드 디버깅을 위한 도구는 다음과 같습니다. Psalm: 잠재적인 오류를 찾는 정적 분석 도구입니다. ParallelLint: 비동기 코드를 검사하고 권장 사항을 제공하는 도구입니다. Xdebug: 세션을 활성화하고 코드를 단계별로 실행하여 PHP 애플리케이션을 디버깅하기 위한 확장입니다. 다른 팁으로는 로깅 사용, 어설션, 로컬에서 코드 실행, 단위 테스트 작성 등이 있습니다.

PHP 디버깅 오류: 일반적인 실수에 대한 가이드 Jun 05, 2024 pm 03:18 PM

일반적인 PHP 디버깅 오류는 다음과 같습니다. 구문 오류: 코드 구문을 확인하여 오류가 없는지 확인하세요. 정의되지 않은 변수: 변수를 사용하기 전에 변수가 초기화되고 값이 할당되었는지 확인하세요. 세미콜론 누락: 모든 코드 블록에 세미콜론을 추가합니다. 함수가 정의되지 않았습니다. 함수 이름의 철자가 올바른지 확인하고 올바른 파일이나 PHP 확장이 로드되었는지 확인하세요.