JavaScript 디버깅

오류는 항상 발생합니다. 새로운 컴퓨터 코드를 작성할 때마다.

JavaScript 디버깅

디버거 없이 JavaScript를 작성하는 것은 어려운 일입니다.

코드에 문법 오류나 논리 오류가 있을 수 있으며, 이들은 진단하기 어렵습니다.

일반적으로 JavaScript 코드에 오류가 있더라도 어떤 일도 일어나지 않습니다. 오류 메시지도 없고, 오류를 찾을 수 있는 가이드 정보도 없습니다.

일반적으로 새로운 JavaScript 코드를 작성할 때마다 오류가 발생할 수 있습니다.

JavaScript 디버거

프로그래밍 코드에서 오류를 찾는 것을 코드 디버깅이라고 합니다.

디버깅은 간단하지 않습니다. 하지만 행운스럽게도 모든 현대 브라우저는 내장 디버거를 가지고 있습니다.

내장 디버거는 열고 닫을 수 있으며, 오류를 사용자에게 강제로 보고합니다.

디버거를 통해 브레이크 포인트(코드 실행이 중단되는 위치)를 설정하고, 코드 실행 중 변수를 확인할 수 있습니다.

일반적으로 F12 키를 통해 브라우저의 디버거를 시작하고, 디버거 메뉴에서 "콘솔"을 선택합니다.

console.log() 메서드

브라우저가 디버깅을 지원하면, 다음을 사용할 수 있습니다: console.log() 디버거 창에서 JavaScript의 값을 표시합니다:

예제

<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>
</body>
</html>

본인이 직접 테스트해 보세요

훌륭합니다:console.log() 메서드에 대한 더 많은 정보를 얻기 위해 우리의 JavaScript 콘솔 참조 매뉴얼을 방문하세요.

브레이크 포인트 설정

디버거 창에서, JavaScript 코드에 브레이크 포인트를 설정할 수 있습니다.

각 브레이크 포인트에서, JavaScript는 실행을 멈추어 JavaScript의 값을 확인할 수 있습니다.

값을 확인한 후, 코드 실행을 재개할 수 있습니다.

디버거 키워드

디버거 키워드는 JavaScript의 실행을 멈추고 (만약 있으면) 디버거 함수를 호출합니다.

이는 디버거에서 브레이크 포인트를 설정하는 기능과 같습니다.

디버거가 사용할 수 없을 때디버거 문장에는 효과가 없습니다.

디버거가 열려 있다면, 이 코드는 제3행 실행 전에 실행을 멈추게 됩니다.

예제

var x = 15 * 5;
디버거;
document.getElementById("demo").innerHTML = x;

본인이 직접 테스트해 보세요

주요 브라우저 디버깅 도구

일반적으로, 브라우저에서 F12 키를 사용하여 디버깅을 활성화하고, 디버거 메뉴에서 "컨솔"을 선택합니다.

그렇지 않으면 다음 단계를 따라주세요:

Chrome

  • 브라우저를 엽니다
  • 메뉴에서 도구를 선택하세요
  • 도구에서 개발자 도구를 선택하세요
  • 마지막으로, 컨솔을 선택하세요

Firefox Firebug

  • 브라우저를 엽니다
  • 웹사이트에 이동하세요: http://www.getfirebug.com
  • 다음 지시에 따라: Firebug 설치 방법

Internet Explorer

  • 브라우저를 엽니다
  • 메뉴에서 도구를 선택하세요
  • 도구에서 개발자 도구를 선택하세요
  • 마지막으로, 컨솔을 선택하세요

Opera

  • 브라우저를 엽니다
  • 웹사이트에 이동하세요: http://dev.opera.com
  • 다음 지시에 따라: Firebug Lite 설치 방법

Safari Develop Menu

  • Safari 메뉴, 선호 설정, 고급
  • "메뉴 표시줄에서 개발 메뉴를 활성화"를 선택하세요
  • 메뉴에 새로운 옵션 "개발"이 나타났을 때, "에러 컨솔을 표시"을 선택하세요

알고 계신가요?

디버깅은 컴퓨터 프로그램에서 버그(오류)를 찾고 줄이는 과정입니다.

가장 초기로 알려진 컴퓨터 버그는 전자 장치에 걸린 진짜 벌써(일종의 곤충)였습니다.