자바스크립트 디버깅 (Debugging)

새로운 컴퓨터 코드(some new computer code)를 작성할 때마다, 오류가 발생할 수 있습니다.


코드 디버깅 (Code Debugging)

프로그래밍 코드에는 구문 오류 또는 논리 오류(syntax errors, or logical errors)가 포함될 수 있습니다.

이러한 오류의 대부분은 진단하기가 어렵습니다.

프로그래밍 코드에 오류가 있지만 아무 일도 일어나지 않는 경우가 많습니다. 오류 메시지가 없으므로 오류를 검색 할 위치를 알 수 없습니다.

프로그래밍 코드에서 오류를 찾는(그리고 수정하는) 것을 코드 디버깅이라고 합니다.


자바스크립트 디버거(Debuggers)

디버깅은 쉽지 않습니다. 다행히도 모든 최신 브라우저에는 내장되어 있는 자바스크립트 디버거가 있습니다.

내장된 디버거는, 사용자에게 오류를 보고하도록, 켜고 끌 수 있습니다.

디버거를 사용하여, 중단점(breakpoints)(코드 실행을 중지할 수있는 위치)을 설정하고, 코드가 실행되는 동안 변수를 검사할 수도 있습니다.

그렇지 않으면 이 페이지 하단의 순서에 따르고, 브라우저에서 F12 키를 사용하여 디버깅을 활성화하고, 디버거 메뉴에서 “콘솔(Console)”을 선택하십시오.


console.log() 메소드

브라우저가 디버깅을 지원하면 console.log()를 사용하여 디버거 창에 자바스크립트 값을 표시할 수 있습니다:

Example

Activate debugging in your browser (Chrome, IE, Firefox) with F12, and select “Console” in the debugger menu.


중단점(Breakpoints) 설정

디버거 창에서 자바스크립트 코드에 중단점을 설정할 수 있습니다.

각 중단점에서 자바스크립트는 실행을 중지하고 자바스크립트 값을 검사합니다.

값을 검사한 후 코드 실행을 재개할 수 있습니다 (일반적으로 재생 버튼(a play button) 사용).


debugger 키워드(keyword)

debugger 키워드는 자바 크립트의 실행을 중지하고, 디버깅 함수를 호출(가능한 경우)합니다.

이것은 디버거에서 중단점을 설정하는 것과 같은 기능을 합니다.

사용할 수 있는 디버깅이 없으면, 디버거 문(statement)은 아무 효과가 없습니다.

디버거가 켜져 있으면, 이 코드는, 세 번째 줄을 실행하기 전에, 실행이 중지됩니다.

Example

디버거가 켜져 있으면, 이 코드는, 세 번째 줄을 실행하기 전에, 실행이 중지됩니다.


주요 브라우저의 디버깅 도구(Debugging Tools)

일반적으로 F12 키를 사용하여 브라우저에서 디버깅을 활성화하고, 디버거 메뉴에서 “콘솔(Console)”을 선택합니다.

그렇지 않으면 다음 단계를 따르십시오:

Chrome

  • 브라우저를 엽니다
  • 메뉴에서 도구를 선택합니다.
  • 도구에서 개발자 도구를 선택합니다.
  • 마지막으로 Console을 선택합니다.

Firefox Firebug

  • 브라우저를 엽니다.
  • 웹페이지로 이동:
    http://www.getfirebug.com
  • 지침에 따라 :
    Firebug를 설치합니다.

Internet Explorer

  • 브라우저를 엽니다.
  • 메뉴에서 도구를 선택합니다.
  • 도구에서 개발자 도구를 선택합니다.
  • 마지막으로 Console을 선택합니다.

Opera

  • 브라우저를 엽니다.
  • 웹페이로 이동합니다:
    http://dev.opera.com
  • 안내를 따라, 도구 모음(toolbar)에 개발자 콘솔 버튼(Developer Console button)을 추가합니다.

Safari Firebug

  • 브라우저를 엽니다.
  • 웹페이지로 이동:
    http://safari-extensions.apple.com
  • 안내에 따라
    Firebug Lite를 설치합니다.

Safari Develop Menu

  • 기본 메뉴의 Safari, Preferences, Advanced로 이동합니다.
  • “메뉴 바”에서 “Enable Show Develop menu in menu bar”를 체크합니다.
  • 새로운 옵션 “Develop”이 메뉴에 나타나면: “Show Error Console”을 선택합니다.

알고 계셨습니까?

출처: JavaScript Debugging

답글 남기기