디버깅을 위한 JavaScript 콘솔 활용 🐞

웹 개발을 하다 보면, 코드가 예상대로 작동하지 않을 때가 있습니다. 그럴 때 우리의 친구인 JavaScript 콘솔이 큰 도움이 됩니다. 이번 포스트에서는 디버깅을 위해 JavaScript 콘솔을 어떻게 활용할 수 있는지 간단한 방법을 알아보겠습니다.

콘솔 로그 사용하기

가장 기본적이면서도 강력한 도구는 console.log()입니다. 코드의 특정 지점에서 변수의 값을 확인하고 싶을 때 사용할 수 있습니다.

let number = 5;
console.log(number); // 5가 출력됩니다.

에러 추적하기

코드가 복잡해지면 어디서 문제가 발생했는지 찾기 어려울 수 있습니다. console.error()를 사용하면 에러 메시지를 콘솔에 빨간색으로 출력하여 눈에 띄게 할 수 있습니다.

console.error('여기에 에러가 발생했습니다!');

조건부 로깅

특정 조건에서만 로그를 출력하고 싶다면 console.log()와 if 문을 조합할 수 있습니다. 하지만 더 간단하게 console.assert()를 사용할 수도 있습니다. 이 메서드는 첫 번째 인자로 주어진 조건이 거짓일 때만 메시지를 출력합니다.

console.assert(number > 10, 'number는 10보다 커야 합니다.');

그룹화하여 로그 보기

코드에서 여러 데이터를 로그로 출력할 때, 이들을 그룹화하여 더 깔눌하게 볼 수 있습니다. console.group()와 console.groupEnd()를 사용하여 로그를 그룹화할 수 있습니다.

console.group('나의 숫자들');
console.log('number: ', number);
console.log('number * 2: ', number * 2);
console.groupEnd();

스타일링 로그

콘솔 로그에 CSS 스타일을 적용하여 눈에 띄게 할 수도 있습니다. %c를 사용하여 스타일을 적용할 수 있습니다.

console.log('%c이 메시지는 크고 빨간색입니다!', 'color: red; font-size: 20px;');

이러한 기법들을 활용하면 코드를 디버깅할 때 보다 효과적으로 문제를 찾고 해결할 수 있습니다. 콘솔은 단순히 로그를 출력하는 것 이상의 기능을 제공하므로, 이러한 기능들을 적극적으로 활용해 보세요. Happy coding! 🐞