자바스크립트 디버깅
새로운 컴퓨터 코드를 작성할 때마다 오류가 발생할 수 있습니다.
코드 디버깅
프로그래밍 코드에는 구문 오류 또는 논리적 오류가 포함될 수 있습니다.
이러한 오류 중 대부분은 진단하기 어렵습니다.
종종 프로그래밍 코드에 오류가 포함되어 있으면 아무 일도 일어나지 않습니다. 오류 메시지가 없으며 오류를 검색할 위치가 표시되지 않습니다.
프로그래밍 코드에서 오류를 검색(및 수정)하는 것을 코드 디버깅이라고 합니다.
자바스크립트 디버거
디버깅은 쉽지 않습니다. 그러나 다행스럽게도 모든 최신 브라우저에는 JavaScript 디버거가 내장되어 있습니다.
내장 디버거를 켜고 끌 수 있어 사용자에게 강제로 오류가 보고됩니다.
디버거를 사용하면 중단점(코드 실행을 중지할 수 있는 위치)을 설정하고 코드가 실행되는 동안 변수를 검사할 수도 있습니다.
일반적으로 그렇지 않으면 이 페이지 하단의 단계를 따르고 F12 키를 사용하여 브라우저에서 디버깅을 활성화하고 디버거 메뉴에서 "콘솔"을 선택합니다.
console.log() 메서드
브라우저가 디버깅을 지원하는 console.log()경우 디버거 창에 JavaScript 값을 표시하는 데 사용할 수 있습니다.
예시
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>
</body>
</html>
팁: JavaScript 콘솔 참조console.log() 에서 메서드에 대해 자세히 읽어보세요 .
중단점 설정
디버거 창에서 JavaScript 코드에 중단점을 설정할 수 있습니다.
각 중단점에서 JavaScript는 실행을 중지하고 JavaScript 값을 검사할 수 있습니다.
값을 검사한 후 코드 실행을 재개할 수 있습니다(일반적으로 재생 버튼 사용).
디버거 키워드
키워드 는 debuggerJavaScript 실행을 중지하고 디버깅 기능을 호출합니다(사용 가능한 경우).
이것은 디버거에서 중단점을 설정하는 것과 같은 기능을 합니다.
디버깅을 사용할 수 없으면 디버거 문은 효과가 없습니다.
디버거가 켜져 있으면 이 코드는 세 번째 줄을 실행하기 전에 실행을 중지합니다.
예시
let x = 15 * 5;
debugger;
document.getElementById("demo").innerHTML = x;
주요 브라우저의 디버깅 도구
일반적으로 F12 키를 사용하여 브라우저에서 디버깅을 활성화하고 디버거 메뉴에서 "콘솔"을 선택합니다.
그렇지 않으면 다음 단계를 따르십시오.
크롬
- 브라우저를 엽니다.
- 메뉴에서 "추가 도구"를 선택하십시오.
- 도구에서 "개발자 도구"를 선택하십시오.
- 마지막으로 콘솔을 선택합니다.
파이어폭스
- 브라우저를 엽니다.
- 메뉴에서 "웹 개발자"를 선택합니다.
- 마지막으로 "웹 콘솔"을 선택합니다.
가장자리
- 브라우저를 엽니다.
- 메뉴에서 "개발자 도구"를 선택하십시오.
- 마지막으로 "콘솔"을 선택합니다.
오페라
- 브라우저를 엽니다.
- 메뉴에서 "개발자"를 선택하십시오.
- "개발자"에서 "개발자 도구"를 선택합니다.
- 마지막으로 "콘솔"을 선택합니다.
원정 여행
- 기본 메뉴에서 Safari, 환경 설정, 고급으로 이동합니다.
- "메뉴 모음에서 현상 메뉴 표시 활성화"를 선택하십시오.
- 새 옵션 "개발"이 메뉴에 나타나면
"오류 콘솔 표시"를 선택합니다.
알고 계셨나요?
디버깅은 컴퓨터 프로그램의 버그(오류)를 테스트하고 찾아내고 줄이는 과정입니다.
최초의 알려진 컴퓨터 버그는 전자 제품에 갇힌 실제 버그(곤충)였습니다.