JS DEBUGGING
새로운 컴퓨터 코드를 작성할 때마다 오류가 발생할 수 있다.
Code Debugging
프로그래밍 코드에는 구문 오류 또는 논리적 오류가 포함될 수 있다.
이러한 오류 중 대부분은 진단하기 어렵다.
종종 프로그래밍 코드에 오류가 포함되어 있으면 아무 일도 일어나지 않는다. 오류 메시지가 없으며 오류를 검색할 위치가 표시되지도 않는다.
프로그래밍 코드에서 오류를 검색(및 수정)하는 것을 코드 디버깅이라고 한다.
JavaScript Debuggers
디버깅은 쉽지 않다. 그러나 다행스럽게도 모든 최신 브라우저에는 JavaScript Debugger가 내장되어 있다.
내장 Debugger를 켜고 끌 수 있고, 오류는 사용자에게 보고된다.
Debugger를 사용하면 중단점(코드 실행을 중지할 수 있는 위치)을 설정하고 코드가 실행되는 동안 변수를 검사할 수도 있다.
그렇지 않으면 이 페이지 하단의 단계를 따르고 F12 키를 사용하여 브라우저에서 디버깅을 활성화하고 디버거 메뉴에서 "console"을 선택한다.
The console.log() Method
브라우저에서 디버깅을 지원하는 경우 console.log()를 사용하여 디버거 창에 JavaScript 값을 표시할 수 있다.
팁: JavaScript JavaScript Console Reference에서
console.log()메서드에 대해 자세히 알아보자.
Setting Breakpoints
디버거 창에서 JavaScript 코드에 중단점을 설정할 수 있다.
각 중단점에서 JavaScript는 실행을 중지하고 JavaScript 값을 검사할 수 있다.
값을 검사한 후 코드 실행을 재개할 수 있다(일반적으로 재생 버튼 사용).
The debugger Keyword
debugger 키워드는 JavaScript 실행을 중지하고 디버깅 기능을 호출다(사용 가능한 경우).
이것은 Debugger에서 중단점을 설정하는 것과 같은 기능을 한다.
디버깅을 사용할 수 없으면 Debugger 문은 효과가 없다.
Debugger가 켜져 있으면 이 코드는 세 번째 줄을 실행하기 전에 실행을 중지한다.
- Example
let x = 15 * 5; debugger; document.getElementById("demo").innerHTML = x;
Major Browsers' Debugging Tools
일반적으로 F12 키를 눌러 브라우저에서 디버깅을 활성화하고 Debugger 메뉴에서 "console"을 선택한다.
설명과 같지 않다면 다음 단계를 따라보자.
Chrome
- Open the browser.
- From the menu, select "More tools".
- From tools, choose "Developer tools".
- Finally, select Console.
Firefox
- Open the browser.
- From the menu, select "Web Developer".
- Finally, select "Web Console".
Edge
- Open the browser.
- From the menu, select "Developer Tools".
- Finally, select "Console".
Opera
- Open the browser.
- From the menu, select "Developer".
- From "Developer", select "Developer tools".
- Finally, select "Console".
Safari
- Go to Safari, Preferences, Advanced in the main menu.
- Check "Enable Show Develop menu in menu bar".
- When the new option "Develop" appears in the menu:
- Choose "Show Error Console".
Did You Know?
디버깅은 컴퓨터 프로그램의 버그(오류)를 테스트하고 찾아내고 줄이는 과정이다.
최초의 알려진 컴퓨터 버그는 전자 제품에 갇힌 실제 버그(곤충)였다. 깔깔
