Chrome에서 효과적인 디버깅: 예외 중단점 사용

이 가이드에서는 Chrome 개발자 도구의 예외 중단점을 효율적으로 사용하는 방법을 알아보세요. 예외 중단점을 사용하면 예외가 발생할 때 프로그램을 자동으로 중지하여 JavaScript를 디버깅할 수 있습니다. 코드의 오류를 추적하고 오류의 발생 위치와 이유를 파악하려는 경우 특히 유용합니다. 중단점 사용은 코드에 오류가 없는지 확인하려는 모든 개발자에게 필수적인 기술입니다. 지금 바로 자세히 알아보겠습니다!

주요 학습 내용

• 예외 중단점은 예외가 발생하면 프로그램을 중지합니다.
• "잡히지 않은" 예외와 "잡힌" 예외를 구분할 수 있습니다.
• 디버거;-문을 삽입하면 특정 지점에서 프로그램을 중지할 수 있습니다.
• 프로덕션 코드를 깨끗하게 유지하려면 디버깅이 완료된 후 디버거; 문을 제거하는 것이 중요합니다.

단계별 지침

1. 예외 중단점 활성화하기

예외에 대한 자동 중지를 활성화하려면 Chrome 개발자 도구를 엽니다. '소스' 메뉴로 이동하여 '중단점' 섹션을 검색합니다. "예외 발생 시 일시 중지" 및 "예외 발생 시 일시 중지" 확인란을 선택합니다.

이제 예외가 발생하면 프로그램이 자동으로 일시 중지됩니다. 간단한 예외를 던지는 다음 코드를 사용하여 이 작업을 수행합니다.

이제 코드를 실행하면 예외가 발생한 지점에서 프로그램이 일시 중지됩니다.

2. '캐치됨' 및 '캐치되지 않음' 예외 처리하기

"잡힌 예외" 옵션을 비활성화하면 예외가 잡힐 때 프로그램이 중지되지 않는 것을 알 수 있습니다.

그러나 시도-캐치 블록에 예외가 있는 경우 예외는 캐치 블록에서 잡히고 프로그램은 계속 진행됩니다.

여기에서 예외가 잡힌 것을 확인할 수 있으며 예외에 포함된 오류와 함께 콘솔 출력을 볼 수 있습니다.

3. 여러 중단점에 적용

서로 다른 파일에 여러 중단점이 있는 경우 금방 혼란스러워질 수 있습니다. 하지만 중단점을 마우스 오른쪽 버튼으로 클릭하고 '모든 중단점 비활성화' 옵션을 선택하면 모든 중단점을 쉽게 비활성화할 수 있습니다.

이렇게 하면 모든 중단점이 비활성화되며 나중에 필요한 경우 다시 활성화할 수 있습니다.

4. 디버거 사용; 문

디버깅할 때 유용한 또 다른 기법은 코드에 debugger; 문을 삽입하는 것입니다. 이렇게 하면 페이지를 새로 고침하는 즉시 프로그램이 이 지점에서 중지됩니다.

디버거 문을 사용할 때는 라이브 애플리케이션에서는 유용하지 않으므로 프로덕션 환경으로 이동하기 전에 코드에서 제거해야 한다는 점을 기억하세요.

디버거; 문을 포함하면 해당 특정 지점에서 프로그램이 중지되므로 프로그램의 현재 변수와 진행 상황을 확인할 수 있습니다.

5. 예외로 작업할 때 주의 사항

예외로 작업할 때는 특히 많은 타사 라이브러리를 사용하는 경우 주의해야 합니다. 예외가 발생할 수 있으며 코드가 계속 멈추는 경우 성가신 일이 될 수 있습니다.

애플리케이션에서 예외가 발생한다는 것을 알고 있다면 디버깅 프로세스 중에 예외를 감지할 수 있도록 '잡히지 않은 예외' 옵션을 활성화하는 것이 유용할 수 있습니다.

모든 예외가 문제를 일으키는 것은 아니라는 점을 기억하세요. 예외가 단순히 포착되어 사용자 경험에 부정적인 영향을 미치지 않을 수도 있습니다.

요약

이 가이드에서는 Chrome 개발자 도구에서 예외 중단점을 사용하여 JavaScript 코드에서 오류를 찾는 방법을 배웠습니다. 이러한 중단점을 활성화하고 효과적으로 사용하여 애플리케이션이 원활하게 실행되도록 하는 방법을 살펴보았습니다. 이러한 기술을 이해하고 구현하면 디버깅 효율성이 크게 향상됩니다.