Javascript 코드 디버깅(브라우저 F12 및 VS의 디버거 키워드)_javascript 기술

현재 일반적으로 사용되는 브라우저 IE, Chrome 및 Firefox에는 해당 스크립트 디버깅 기능이 있습니다. 우리는 .NET 캠프에 있기 때문에 IE에서 JS를 디버깅하는 방법을 배우는 것만으로도 충분합니다. IE의 디버깅 방법을 익히면 Chrome 및 Firefox의 디버깅 방법도 매우 간단해집니다.

F12 개발자 도구에서 디버깅

IE 브라우저를 열고 F12 키를 눌러 개발자 도구를 엽니다. 이는 IE에 내장된 개발자 도구로, 개발자가 HTML, CSS, Javascript와 같은 웹 리소스를 추적하고 디버그하는 데 편리합니다.

웹페이지를 열었을 때 하단에 고정되어 있지 않은 경우, 오른쪽 상단 메뉴바에 있는 버튼을 눌러 완료하시면 됩니다.

이 도구 창에는 HTML, CSS, 콘솔, 스크립트, 프로파일러, 네트워크 등 여러 탭이 있습니다. 각 탭을 클릭하여 해당 작업을 수행하세요.

HTML 태그 창에서 툴바에 있는 버튼이 수행하는 작업은 다음과 같습니다.

CSS 태그는 스타일을 보는 데 사용됩니다. 콘솔은 오류 메시지, 사용자 로그 등을 포함하여 JS의 다양한 출력 정보를 표시합니다. 이것이 바로 우리가 원하는 것입니다.

그림에서 노란색 직사각형을 사용하여 두 개의 컨트롤을 선택했습니다. 왼쪽의 드롭다운 목록은 파일을 선택하는 데 사용되고 오른쪽의 버튼은 디버깅을 시작하는 데 사용됩니다. 디버깅을 시작하기 위해 클릭하면 디버거가 창을 최대화합니다. 선택한 파일에서 디버깅해야 하는 위치를 찾은 다음 왼쪽 사이드바를 클릭하여 디버그할 중단점을 추가합니다.

프로그램이 중단점까지 실행되면 디버깅할 수 있습니다.

여기서 단축키를 이용하여 조작할 수 있습니다. 일반적으로 사용되는 단축키는 다음과 같습니다:

F9: 중단점 추가/제거

F10: 단계별, 즉 명령문에서 메소드, 표현식 등을 건너뜁니다

F11: 문별 디버깅, 즉 단일 단계 디버깅은 메서드와 표현식으로 점프하여 문별 추적 디버깅을 수행합니다

실행 과정에서 즉시 코드를 실행하려면 오른쪽 창에 코드를 입력하고 Enter 키를 눌러야 합니다.

여러 줄의 코드를 실행하려면 실행 버튼 오른쪽의 이중 화살표를 클릭하여 다중 줄 모드를 활성화하세요. 더 이상 사진을 찍지 않겠습니다.

브라우저에서 직접 디버깅하는 방식은 Google Chrome, FireFox FireDebug에도 적용 가능하지만, 세부적인 부분에서 약간의 차이가 있고 주요 기능은 동일합니다.

F12 키를 눌러 개발자 도구에 들어가 소스 코드, 스타일, js를 볼 수 있습니다.

스크립트 버튼을 클릭하면 웹페이지에 있는 스크립트 파일의 소스 코드가 포함된 디버깅 창이 열립니다. 왼쪽 버튼을 클릭하면 파일을 선택할 수 있는 창이 열립니다. 오른쪽에 디버깅 도구 버튼이 있지만 이런 순수 영어 인터페이스가 마음에 들지 않아서 대부분의 디버깅은 여전히 ​​IE에서 수행됩니다. 그리고 IE의 VS로 전송됩니다.

이제 VS에서 JS 코드를 디버깅하는 방법을 소개하겠습니다.

디버거에 debugger 키워드 사용

이 방법은 매우 간단합니다. 디버깅이 수행되는 곳에 debugger 키워드만 추가하면 됩니다. 그런 다음 브라우저가 이 키워드를 실행하면 디버깅을 켤 것인지 묻는 메시지가 표시됩니다. 이러한 종류의 디버깅을 위해서는 디버깅 도구를 선택할 수 있습니다. 새 VS를 열지 아니면 기존 VS에서 디버그할지 선택할 수 있습니다. 저는 개인적으로 이 디버깅 방법을 선호합니다.

이 프로그램을 실행하면 디버깅 프롬프트 창이 나타납니다.

브라우저에 이 창이 나타나지 않으면 몇 가지 간단한 설정을 하고 인터넷 옵션을 열어야 합니다.

빨간색 상자에 있는 두 항목의 선택을 취소하면 됩니다.

설정 후 디버깅을 위해 debugger 키워드를 사용할 수 있으며, 이러한 설정을 입력한 후에는 추적 및 디버깅을 위해 예상치 못한 오류를 포착할 수도 있습니다.

자, 이 글을 소개합니다. 이해가 안 되는 부분이 있으면 연락주세요. 디버깅은 실용적인 과정이므로 여러 번 사용해야만 방법과 기술을 익힐 수 있습니다.