JavaScript 디버깅

프로그램 또는 스크립트에서오류끼리버그

디버깅(Debugging)은 컴퓨터 프로그램(버그)에서 오류를 테스트하고 발견하고 줄이는 과정입니다.

JavaScript 디버거

모든 주요 브라우저는 내장된 JavaScript 디버거를 가지고 있습니다.

내장 디버거를 열고 닫을 수 있어 사용자에게 오류 보고서를 제공할 수 있습니다.

디버거를 사용하여 코드를 중지할 수 있는 특정 브레이크 포인트(코드가 중지되는 위치)에서 코드를 중지할 수 있습니다.

실행이 중지되면 스크립트의 상태와 변수를 확인하여 문제가 있는지 확인할 수 있습니다.

변수 값의 변화 과정을 관찰할 수 있습니다.

console.log() 메서드

브라우저가 디버깅을 지원하면 사용할 수 있습니다.console.log();디버거 창에서 JavaScript 값이 표시됩니다:

let x =　50;
let y =　20;
let z = x　+　y;
console.log(z);

웹 브라우저의 컨솔을 액세스하려면 먼저 누릅니다.F12키보드의 키를 누른 다음 '컨솔' 탭을 클릭하세요.

디버거(debugger) 키워드

디버거 키워드가 호출하는 모든 사용 가능한 디버깅 기능, 예를 들어 브레이크 포인트를 설정하는 것.

디버깅 기능이 사용할 수 없으면 이 문장은 무효입니다.

다음 예제는 debugger 문장을 삽입하여 디버거를 호출하는 코드를 보여줍니다:

var a =　50　+　20;
debugger;
document.getElementById("output").innerHTML = a;

디버거를 호출할 때 debugger 문장의 실행이 멈춥니다. 이는 스크립트 소스에서의 브레이크 포인트와 같습니다.

주요 브라우저 디버깅 도구

보통, 브라우저를 활성화하여 사용합니다F12에서 디버깅을 선택한 후 디버거 메뉴에서 ‘컨솔’을 선택하세요.

그렇지 않으면 다음 단계로 진행하세요:

Chrome

• 브라우저를 엽니다

• 메뉴에서 ‘더 많은 도구’를 선택하세요

• 툴에서 ‘개발자 도구’를 선택하세요

• 마지막으로 컨솔을 선택하세요

FireFox

• 브라우저를 엽니다

• 메뉴에서 ‘웹 개발자’를 선택하세요

• 마지막으로 ‘웹 컨솔’을 선택하세요

Edge

• 브라우저를 엽니다

• 메뉴에서 ‘개발자 도구’를 선택하세요

• 마지막으로 ‘컨솔’을 선택하세요

Opera

• 브라우저를 엽니다

• 메뉴에서 ‘개발자’를 선택하세요

• ‘개발자’에서 ‘개발자 도구’를 선택하세요
  

• 마지막으로 ‘컨솔’을 선택하세요

Safari

• Safari에서 메인 메뉴 -> 선호 설정 -> 고급으로 이동하세요

• ‘메뉴 바에서 개발 메뉴 표시’를 선택하세요

• ‘개발’ 새 옵션이 메뉴에 나타났을 때:
  ‘에러 컨솔을 표시’를 선택하세요