더 복잡한 코드를 작성하기 전에 디버깅에 대해 이야기해 보겠습니다.
디버깅은 스크립트 내에서 오류를 찾아 수정하는 프로세스입니다. 모든 최신 브라우저와 대부분의 기타 환경은 디버깅 도구를 지원합니다. 디버깅을 훨씬 쉽게 해주는 개발자 도구의 특수 UI입니다. 또한 코드를 단계별로 추적하여 정확히 무슨 일이 일어나고 있는지 확인할 수 있습니다.
여기서는 충분한 기능을 갖춘 Chrome을 사용하겠습니다. 대부분의 다른 브라우저에도 비슷한 프로세스가 있습니다.
Chrome 버전이 약간 다르게 보일 수 있지만 여전히 무엇이 있는지는 분명해야 합니다.
Chrome에서 예제 페이지를 엽니다.
F12 (Mac: Cmd + Opt + I )를 사용하여 개발자 도구를 켭니다.
Sources 패널을 선택합니다.
처음으로 수행하는 경우 확인해야 할 사항은 다음과 같습니다.
토글러 버튼 파일이 있는 탭을 엽니다.
이를 클릭하고 트리뷰에서 hello.js 선택해 보겠습니다. 표시되는 내용은 다음과 같습니다.
소스 패널은 세 부분으로 구성됩니다.
파일 탐색기 창에는 페이지에 첨부된 이미지를 포함하여 HTML, JavaScript, CSS 및 기타 파일이 나열됩니다. Chrome 확장 프로그램도 여기에 표시될 수 있습니다.
코드 편집기 창에는 소스 코드가 표시됩니다.
JavaScript 디버깅 창은 디버깅을 위한 창이므로 곧 살펴보겠습니다.
이제 동일한 토글러를 클릭할 수 있습니다. 다시 리소스 목록을 숨기고 코드에 약간의 공간을 제공합니다.
Esc 키를 누르면 아래 콘솔이 열립니다. 거기에 명령을 입력하고 Enter를 눌러 실행할 수 있습니다.
명령문이 실행된 후 결과는 아래와 같습니다.
예를 들어, 여기서 1+2 결과는 3 이지만 hello("debugger") 함수 호출은 아무것도 반환하지 않으므로 결과는 정의되지 undefined .
예제 페이지의 코드 내에서 무슨 일이 일어나고 있는지 살펴보겠습니다. hello.js 에서 4 번 줄을 클릭하세요. 네, 코드가 아닌 4 자리에 있습니다.
축하해요! 중단점을 설정했습니다. 8 번째 줄의 숫자도 클릭하세요.
다음과 같아야 합니다(클릭해야 할 부분은 파란색입니다).
중단점 은 디버거가 JavaScript 실행을 자동으로 일시 중지하는 코드 지점입니다.
코드가 일시 중지된 동안 현재 변수를 검사하고 콘솔에서 명령을 실행하는 등의 작업을 수행할 수 있습니다. 즉, 코드를 디버깅할 수 있습니다.
오른쪽 패널에서 언제든지 중단점 목록을 찾을 수 있습니다. 이는 다양한 파일에 중단점이 많을 때 유용합니다. 이를 통해 우리는 다음을 수행할 수 있습니다.
코드의 중단점으로 빠르게 이동합니다(오른쪽 패널에서 클릭하여).
중단점을 선택 취소하여 일시적으로 비활성화합니다.
마우스 오른쪽 버튼을 클릭하고 제거를 선택하여 중단점을 제거합니다.
…등.
조건부 중단점
줄 번호를 마우스 오른쪽 버튼으로 클릭 하면 조건부 중단점을 만들 수 있습니다. 생성 시 제공해야 하는 주어진 표현식이 진실인 경우에만 트리거됩니다.
이는 특정 변수 값이나 특정 함수 매개변수에 대해서만 중지해야 할 때 편리합니다.
다음과 같이 debugger 명령을 사용하여 코드를 일시 중지할 수도 있습니다.
함수 안녕하세요(이름) {
let 문구 = `안녕하세요, ${name}!`;
디버거; // <-- 디버거는 여기서 멈춥니다.
말하다(문구);
}이러한 명령은 개발 도구가 열려 있을 때만 작동하며, 그렇지 않으면 브라우저는 이를 무시합니다.
이 예에서는 페이지를 로드하는 동안 hello() 호출되므로 중단점을 설정한 후 디버거를 활성화하는 가장 쉬운 방법은 페이지를 다시 로드하는 것입니다. 그럼 F5 (Windows, Linux) 또는 Cmd + R (Mac)을 누르겠습니다.
중단점이 설정되면 실행이 네 번째 줄에서 일시 중지됩니다.
오른쪽에 있는 정보 드롭다운(화살표로 표시됨)을 열어주세요. 이를 통해 현재 코드 상태를 검사할 수 있습니다.
Watch – 모든 표현식의 현재 값을 표시합니다.
더하기 + 클릭하고 표현식을 입력할 수 있습니다. 디버거는 해당 값을 표시하고 실행 과정에서 자동으로 다시 계산합니다.
Call Stack – 중첩된 호출 체인을 표시합니다.
현재 디버거는 index.html 의 스크립트에 의해 호출되는 hello() 호출 내부에 있습니다(거기에는 함수가 없으므로 "익명"이라고 함).
스택 항목(예: "익명")을 클릭하면 디버거가 해당 코드로 이동하고 해당 코드의 모든 변수도 검사할 수 있습니다.
Scope – 현재 변수.
Local 지역 함수 변수를 보여줍니다. 소스 바로 위에 강조 표시된 값을 볼 수도 있습니다.
Global 에는 전역 변수(모든 함수 중)가 있습니다.
아직 연구하지 않은 this 도 있는데 곧 해보도록 하겠습니다.
이제 스크립트를 추적 할 차례입니다.
오른쪽 패널 상단에 버튼이 있습니다. 그들을 참여시키자.
– “재개”: 실행을 계속합니다. 단축키 F8 .
실행을 재개합니다. 추가 중단점이 없으면 실행은 계속되고 디버거는 제어를 잃게 됩니다.
클릭하면 다음과 같은 내용을 볼 수 있습니다.
실행이 재개되어 say() 내부의 또 다른 중단점에 도달한 후 일시 중지되었습니다. 오른쪽의 “Call Stack”을 살펴보세요. 통화가 1개 더 늘어났습니다. 우리는 지금 say() 안에 있습니다.
– "단계": 다음 명령인 단축키 F9 를 실행합니다.
다음 문을 실행합니다. 지금 클릭하면 alert 표시됩니다.
이것을 계속해서 클릭하면 모든 스크립트 문을 하나씩 단계별로 실행하게 됩니다.
– “Step over”: 다음 명령을 실행하지만 기능으로 들어가지는 않습니다 . 단축키 F10 .
이전 "Step" 명령과 비슷하지만 다음 명령문이 함수 호출( alert 와 같은 내장 함수가 아니라 자체 함수)인 경우 다르게 동작합니다.
비교해 보면 "Step" 명령은 중첩된 함수 호출로 들어가 첫 번째 줄에서 실행을 일시 중지하는 반면, "Step over"는 함수 내부를 건너뛰고 눈에 띄지 않게 중첩된 함수 호출을 실행합니다.
그런 다음 해당 함수 호출 직후 실행이 일시 중지됩니다.
함수 호출 내부에서 무슨 일이 일어나는지 보는 데 관심이 없다면 좋습니다.
– "들어가기", 단축키 F11 .
이는 "Step"과 유사하지만 비동기 함수 호출의 경우 다르게 동작합니다. JavaScript를 배우기 시작했다면 아직 비동기 호출이 없으므로 차이점을 무시해도 됩니다.
앞으로는 "Step" 명령이 나중에 실행되는 setTimeout (예약된 함수 호출)과 같은 비동기 작업을 무시한다는 점에 유의하세요. "Step into"는 코드에 들어가서 필요한 경우 기다립니다. 자세한 내용은 DevTools 매뉴얼을 참조하세요.
– "Step out": 현재 기능이 끝날 때까지 실행을 계속합니다(단축키 Shift + F11 ) .
실행을 계속하고 현재 함수의 마지막 줄에서 중지합니다. 이는 실수로 다음을 사용하여 중첩된 호출을 입력했을 때 편리합니다. , 그러나 그것은 우리에게 관심이 없으며 가능한 한 빨리 끝까지 계속되기를 원합니다.
– 모든 중단점을 활성화/비활성화합니다.
해당 버튼은 실행을 이동하지 않습니다. 중단점에 대한 대량 온/오프입니다.
– 오류 발생 시 자동 일시 중지를 활성화/비활성화합니다.
활성화되면 개발자 도구가 열려 있으면 스크립트 실행 중 오류가 발생하면 자동으로 일시 중지됩니다. 그런 다음 디버거의 변수를 분석하여 무엇이 잘못되었는지 확인할 수 있습니다. 따라서 스크립트가 오류로 인해 종료되면 디버거를 열고 이 옵션을 활성화한 다음 페이지를 다시 로드하여 스크립트가 종료되는 위치와 그 순간의 컨텍스트를 확인할 수 있습니다.
여기까지 계속
코드 줄을 마우스 오른쪽 버튼으로 클릭하면 "여기까지 계속"이라는 훌륭한 옵션이 있는 상황에 맞는 메뉴가 열립니다.
이는 여러 단계를 줄 앞으로 이동하고 싶지만 너무 게으른 나머지 중단점을 설정할 때 유용합니다.
코드에서 콘솔로 무언가를 출력하려면 console.log 함수가 있습니다.
예를 들어, 다음은 0 에서 4 까지의 값을 콘솔에 출력합니다.
// 콘솔을 열어 확인
for (let i = 0; i < 5; i++) {
console.log("값,", i);
}일반 사용자는 해당 출력을 볼 수 없으며 콘솔에 있습니다. 이를 보려면 개발자 도구의 콘솔 패널을 열거나 다른 패널에서 Esc 키를 누르십시오. 그러면 하단에 콘솔이 열립니다.
코드에 충분한 로그인이 있으면 디버거 없이도 레코드에서 무슨 일이 일어나고 있는지 확인할 수 있습니다.
보시다시피, 스크립트를 일시 중지하는 세 가지 주요 방법이 있습니다:
중단점.
debugger 문.
오류(개발 도구가 열려 있고 버튼이 "켜짐")입니다.
일시 중지되면 디버깅할 수 있습니다. 변수를 검사하고 코드를 추적하여 실행이 잘못된 위치를 확인할 수 있습니다.
개발자 도구에는 여기에서 다루는 것보다 더 많은 옵션이 있습니다. 전체 매뉴얼은 https://developers.google.com/web/tools/chrome-devtools에 있습니다.
이 장의 정보는 디버깅을 시작하기에 충분하지만 나중에, 특히 브라우저 관련 작업을 많이 수행하는 경우 해당 장으로 가서 개발자 도구의 고급 기능을 살펴보시기 바랍니다.
아, 그리고 개발 도구의 다양한 위치를 클릭하면 무엇이 표시되는지 확인할 수도 있습니다. 아마도 그것이 개발 도구를 배우는 가장 빠른 경로일 것입니다. 마우스 오른쪽 버튼 클릭과 상황에 맞는 메뉴를 잊지 마세요!