디버깅은 모든 프로그래머에게 필수적인 기술이며 JavaScript 개발자도 예외는 아닙니다.
JavaScript는 복잡하고 동적인 애플리케이션을 만드는 데 사용할 수 있는 강력한 언어이지만 오류가 발생할 때 디버깅하기 어려울 수도 있습니다.
이 게시물에서는 최신 웹 브라우저에 내장된 디버거와 타사 응용 프로그램에서 제공하는 강력한 도구를 포함하여 디버깅 도구를 사용하여 JavaScript 코드를 디버깅하는 방법을 살펴봅니다.
1. 최신 웹 브라우저에 내장된 디버거 사용
대부분의 최신 웹 브라우저에는 개발자가 JavaScript 코드를 실시간으로 검사하고 디버깅할 수 있는 디버깅 도구가 내장되어 있습니다.
이러한 도구에는 Chrome DevTools, Firefox 개발자 도구 및 Microsoft Edge 개발자 도구가 포함됩니다.
Chrome DevTools를 사용하여 자바스크립트 코드를 디버깅하려면:
1단계: Chrome을 열고 디버그하려는 웹페이지로 이동합니다.
2단계: 페이지를 마우스 오른쪽 버튼으로 클릭하고 상황에 맞는 메뉴에서 “검사”를 선택합니다.
이렇게 하면 별도의 창에서 Chrome DevTools가 열립니다.
3단계: DevTools 창에서 Sources 탭으로 이동합니다.
4단계: DevTools 창의 왼쪽에 있는 파일 탐색기에서 디버깅하려는 JavaScript 파일을 찾습니다.
5단계: 실행을 중지하려는 줄 번호를 클릭하여 코드에 중단점을 설정합니다.
6단계: 웹페이지를 새로고침하여 중단점을 트리거합니다.
7단계: 코드가 중단점에서 일시 중지되므로 DevTools 창의 컨트롤을 사용하여 변수를 검사하고 코드를 한 줄씩 단계별로 실행할 수 있습니다.
2. 타사 디버깅 도구 사용
웹 브라우저에서 제공하는 기본 제공 디버깅 도구 외에도 JavaScript 코드를 보다 효율적으로 디버깅하는 데 도움이 되는 타사 디버깅 도구가 많이 있습니다.
다음은 몇 가지 인기 있는 도구입니다.
- Visual Studio Code: Visual Studio Code는 기본 제공 JavaScript 디버깅 도구가 포함된 인기 있는 코드 편집기입니다.
디버거를 사용하려면 코드에 중단점을 설정하고 F5 키를 눌러 디버깅을 시작하십시오. - Node.js Inspector: Node.js를 사용하여 서버 측에서 JavaScript로 작업할 때 Node.js Inspector는 코드 디버깅을 위한 강력한 도구입니다.
인스펙터를 사용하려면 –inspect 플래그로 Node.js 스크립트를 시작한 다음 Chrome DevTools를 열고 Node.js 탭으로 이동합니다. - Firebug: Firebug는 콘솔, 인스펙터 및 네트워크 모니터를 포함하여 JavaScript 디버깅 도구의 전체 제품군을 제공하는 Firefox 애드온입니다.
- Firebug Lite Firebug Lite는 인기 있는 Firefox용 Firebug 디버깅 도구의 경량 버전입니다.
브라우저의 북마크 바에 추가할 수 있는 북마클릿으로 모든 웹 페이지에서 Firebug Lite 콘솔에 빠르게 액세스할 수 있습니다.
일단 활성화되면 Firebug Lite는 콘솔, HTML 인스펙터, CSS 인스펙터를 포함한 다양한 디버깅 기능을 제공합니다. - JSFiddle JSFiddle은 웹 브라우저에서 바로 JavaScript, HTML 및 CSS 코드를 작성하고 테스트할 수 있는 인기 있는 온라인 코드 편집기입니다.
또한 코드를 단계별로 실행하고 실시간으로 변수를 검사할 수 있는 강력한 디버깅 기능이 포함되어 있습니다.
JSFiddle에서 디버거를 사용하려면 실행을 중지하려는 라인 번호를 클릭하여 코드에 중단점을 추가한 다음 “디버그” 버튼을 클릭하여 디버깅을 시작하십시오. - WebStorm WebStorm은 디버거 콘솔, 호출 스택 뷰어 및 중단점 편집기를 포함하여 전체 JavaScript 디버깅 도구 제품군을 포함하는 널리 사용되는 코드 편집기입니다.
WebStorm에서 디버거를 사용하려면 실행을 중지하려는 줄 번호를 클릭하여 코드에 중단점을 설정한 다음 도구 모음의 “디버그” 버튼을 사용하여 디버거를 시작하십시오. - Visual Studio Live Share Visual Studio Live Share는 여러 개발자가 동시에 동일한 코드 기반에서 작업할 수 있는 공동 코딩 도구입니다.
여기에는 원격 팀에 특히 유용할 수 있는 다른 개발자와 실시간으로 코드를 디버깅할 수 있는 강력한 디버깅 기능이 포함되어 있습니다.
Visual Studio Live Share에서 디버거를 사용하려면 코드에 중단점을 설정하고 디버깅을 시작하기만 하면 팀의 다른 구성원이 디버깅 세션에 참여하여 문제를 해결할 수 있습니다.
3. 효과적인 JavaScript 디버깅을 위한 팁
디버깅 도구를 사용하면 JavaScript 코드에서 오류를 훨씬 쉽게 찾고 수정할 수 있지만 더 효과적으로 디버깅하는 데 도움이 되는 몇 가지 팁과 모범 사례가 있습니다.
다음은 염두에 두어야 할 몇 가지 팁입니다.
- 기본 사항부터 시작: 변수, 데이터 유형 및 제어 구조를 포함하여 JavaScript의 기본 사항을 이해해야 합니다.
코드를 디버깅하는 데 문제가 있는 경우 언어를 잘 이해하지 못하기 때문인 경우가 많습니다. - console.log() 문 사용: Console.log()는 JavaScript 코드 디버깅을 위한 간단하지만 강력한 도구입니다.
코드에 console.log() 문을 추가하면 변수 및 기타 데이터를 콘솔에 출력할 수 있으므로 오류를 식별하고 보다 효율적으로 디버깅할 수 있습니다. - 복잡한 문제 분해: 복잡한 문제를 디버깅하려는 경우 더 작고 관리하기 쉬운 부분으로 분해하십시오. 문제의 가능한 가장 간단한 버전으로 시작한 다음 버그를 찾을 때까지 점차 복잡성을 증가시킵니다.
- 연습, 연습, 연습: 디버깅은 기술이며 다른 기술과 마찬가지로 더 나아지려면 연습이 필요합니다.
정기적으로 코드를 디버깅하도록 노력하십시오.