JavaScript에 디버깅 코드를 추가하는 방법

JavaScript 디버깅 코드 추가하기

JavaScript 프로그램에 디버깅 코드를 추가하려면 alert() 또는 document.write() 메서드를 활용할 수 있습니다. 이 방법은 간단하지만 코드 실행 흐름과 변수 값을 빠르게 확인할 수 있어 초보자에게 특히 유용합니다.

기본 예제

아래 예제는 debugging 플래그 변수를 사용하여 디버깅 메시지를 조건부로 출력하는 방법을 보여줍니다.

var debugging = true;
var whichImage = "widget";

if( debugging )
    alert( "Calls swapImage() with argument: " + whichImage );
var swapStatus = swapImage( whichImage );

if( debugging )
    alert( "Exits swapImage() with swapStatus=" + swapStatus );

동작 원리

위 코드에서는 함수가 호출되기 전과 후에 각각 alert() 창을 띄워 전달된 인수와 반환값을 확인합니다. 이렇게 하면 다음 정보를 쉽게 파악할 수 있습니다.

• 함수가 올바른 인수와 함께 호출되었는지 여부
• 함수의 실행 결과(반환값)가 기대한 값인지 여부
• 코드가 중간에 비정상적으로 종료되지 않았는지 여부

alert() 창이 나타나는 순서와 내용을 순서대로 살펴보면, 프로그램이 정상적으로 작동하는지 아주 쉽게 진단할 수 있습니다.

추가 팁

실무에서는 console.log()를 사용하는 것이 더 권장됩니다. alert()는 매번 확인 버튼을 눌러야 해서 작업 흐름을 방해하고, 반복문 안에서 사용하면 번거로울 수 있습니다. 반면 console.log()는 브라우저 개발자 도구(F12)의 콘솔 탭에서 여러 메시지를 한눈에 확인할 수 있습니다.

또한 위 예제처럼 debugging 같은 플래그 변수를 두면, 배포 시 변수 값만 false로 바꿔 디버깅 메시지를 손쉽게 제거할 수 있다는 장점이 있습니다.