중단점을 사용하여 JavaScript 코드를 일시중지합니다. 이 가이드에서는 DevTools에서 사용할 수 있는 각 중단점 유형과 각 유형의 사용 시기 및 설정 방법을 설명합니다. 디버깅 프로세스에 관한 대화형 가이드는 Chrome DevTools에서 자바스크립트 디버깅 시작하기를 참고하세요.
각 중단점 유형을 사용해야 하는 경우에 대한 개요
가장 잘 알려진 유형의 중단점은 코드 줄입니다. 그러나 코드 줄 중단점은 특히 정확히 어디를 봐야 할지 모르거나 대규모 코드베이스를 사용하는 경우 비효율적일 수 있습니다. 다른 유형의 중단점을 언제 어떻게 사용해야 하는지 알면 디버깅을 할 때 시간을 절약할 수 있습니다.
중단점 유형 | 용도 |
---|---|
코드 줄 | 정확한 코드 영역에서 일시중지 |
조건부 코드 줄 | 일부 다른 조건이 참일 때만 정확한 코드 영역에서 일시중지합니다. |
로그 지점 | 실행을 일시중지하지 않고 콘솔에 메시지를 로깅합니다. |
DOM | 특정 DOM 노드나 그 하위 노드를 변경하거나 삭제하는 코드에서 일시 중지합니다. |
XHR | XHR URL에 문자열 패턴이 포함되어 있으면 일시 중지합니다. |
이벤트 리스너 | click 와 같은 이벤트가 실행된 후 실행되는 코드에서 일시중지 |
예외 | 포착 또는 미포착 예외를 생성하는 코드 줄에서 일시중지합니다. |
함수 | 특정 함수가 호출될 때마다 일시중지합니다. |
신뢰할 수 있는 유형 | 신뢰할 수 있는 유형 위반 시 일시중지 |
코드 줄 중단점
조사해야 하는 정확한 코드 영역을 알고 있을 때 코드 줄 중단점을 사용합니다. DevTools는 항상 이 코드 줄이 실행되기 전에 일시 중지합니다.
DevTools에서 코드 줄 중단점을 설정하려면 다음 단계를 따르세요.
- 소스 탭을 클릭합니다.
- 중단하려는 코드 줄이 포함된 파일을 엽니다.
- 코드 줄로 이동합니다.
- 코드 줄의 왼쪽에는 줄 번호 열이 있습니다. 그 탭을 클릭합니다. 파란색 아이콘이 줄 번호 열 위에 표시됩니다.
이 예는 29 줄에 설정된 코드 줄 중단점을 보여줍니다.
코드의 코드 줄 중단점
코드에서 debugger
를 호출하여 해당 줄에서 일시중지합니다. 이는 코드 줄 중단점과 동일하지만 중단점이 DevTools UI가 아닌 코드에 설정된다는 점이 다릅니다.
console.log('a');
console.log('b');
debugger;
console.log('c');
조건부 코드 줄 중단점
실행을 중지하려는 경우 일부 조건이 true인 경우에만 조건부 코드 줄 중단점을 사용합니다.
이러한 중단점은 사례와 관련 없는 중단점을 건너뛰려는 경우에 유용합니다(특히 루프에서).
조건부 코드 줄 중단점을 설정하려면 다음 단계를 따르세요.
- 소스 탭을 엽니다.
- 중단하려는 코드 줄이 포함된 파일을 엽니다.
- 코드 줄로 이동합니다.
- 코드 줄의 왼쪽에는 줄 번호 열이 있습니다. 마우스 오른쪽 버튼으로 클릭합니다.
- 조건부 중단점 추가를 선택합니다. 코드 줄 아래에 대화상자가 표시됩니다.
- 대화상자에 조건을 입력합니다.
- Enter 키를 눌러 중단점을 활성화합니다. 물음표가 있는 주황색 아이콘이 줄 번호 열 위에 표시됩니다.
이 예에서는 반복 i=6
의 루프에서 x
가 10
를 초과할 때만 실행된 조건부 코드 줄 중단점을 보여줍니다.
코드 줄 중단점 로그
코드 줄 중단점 (로그 지점)을 사용하여 실행을 일시중지하거나 코드를 복잡하게 만들지 않으면서 콘솔에 메시지를 로깅할 수 있습니다.console.log()
로그 지점을 설정하려면 다음 안내를 따르세요.
- 소스 탭을 엽니다.
- 중단하려는 코드 줄이 포함된 파일을 엽니다.
- 코드 줄로 이동합니다.
- 코드 줄의 왼쪽에는 줄 번호 열이 있습니다. 마우스 오른쪽 버튼으로 클릭합니다.
- 로그 지점 추가를 선택합니다. 코드 줄 아래에 대화상자가 표시됩니다.
대화상자에 로그 메시지를 입력합니다.
console.log(message)
호출과 동일한 문법을 사용할 수 있습니다.예를 들어 다음을 기록할 수 있습니다.
"A string " + num, str.length > 1, str.toUpperCase(), obj
이 경우 로깅되는 메시지는 다음과 같습니다.
// str = "test" // num = 3 // obj = {attr: "x"} A string 42 true TEST {attr: 'x'}
Enter 키를 눌러 중단점을 활성화합니다. 두 개의 점이 있는 분홍색 아이콘이 줄 번호 열 위에 표시됩니다.
이 예는 문자열과 변수 값을 콘솔에 로깅하는 30번째 줄의 로그 지점을 보여줍니다.
코드 줄 중단점 수정
Breakpoints 창을 사용하여 코드 줄 중단점을 사용 중지, 수정 또는 삭제합니다.
중단점 그룹 수정
Breakpoints 창은 파일별로 중단점을 그룹화하고 줄 및 열 번호를 기준으로 정렬합니다. 그룹으로 다음과 같은 작업을 할 수 있습니다.
- 그룹을 접거나 펼치려면 이름을 클릭합니다.
- 그룹 또는 중단점을 개별적으로 사용 설정 또는 중지하려면 그룹 또는 중단점 옆에 있는 를 클릭합니다.
- 그룹을 삭제하려면 그룹 위로 마우스를 가져간 다음 를 클릭합니다.
이 동영상에서는 그룹을 접고 중단점을 하나씩 또는 그룹별로 사용 중지하거나 사용 설정하는 방법을 보여줍니다. 중단점을 사용 중지하면 Sources 패널에서 줄 번호 옆의 마커를 투명하게 만듭니다.
그룹에는 컨텍스트 메뉴가 있습니다. Breakpoints 창에서 그룹을 마우스 오른쪽 버튼으로 클릭하고 다음을 선택합니다.
- 파일 (그룹)의 모든 중단점을 삭제합니다.
- 파일의 모든 중단점을 사용 중지합니다.
- 파일의 모든 중단점을 사용 설정합니다.
- 모든 파일에서 모든 중단점을 삭제합니다.
- 다른 그룹의 다른 중단점 삭제
중단점 수정
중단점을 수정하려면 다음 단계를 따르세요.
- 중단점 옆에 있는 를 클릭하여 사용 설정하거나 사용 중지합니다. 중단점을 사용 중지하면 Sources 패널에서 줄 번호 옆의 마커를 투명하게 만듭니다.
- 중단점 위로 마우스를 가져간 후 를 클릭하여 수정하고 를 클릭하여 삭제합니다.
중단점을 수정할 때는 인라인 편집기의 드롭다운 목록에서 유형을 변경합니다.
중단점을 마우스 오른쪽 버튼으로 클릭하여 컨텍스트 메뉴를 표시하고 옵션 중 하나를 선택합니다.
- 위치 공개
- 조건 또는 로그 지점을 수정합니다.
- 모든 중단점을 사용 설정합니다.
- 모든 중단점을 사용 중지합니다.
- 중단점을 삭제합니다.
- 모든 파일에서 다른 중단점을 삭제합니다.
- 모든 파일에서 모든 중단점을 삭제합니다.
사용 중지, 삭제, 조건 수정, 메뉴에서 위치 표시, 유형 변경 등 다양한 중단점 수정 사항을 동영상을 통해 확인해 보세요.
DOM 변경 중단점
DOM 노드 또는 하위 요소를 변경하는 코드에서 일시중지하려면 DOM 변경 중단점을 사용하세요.
DOM 변경 중단점을 설정하려면 다음 단계를 따르세요.
- 요소 탭을 클릭합니다.
- 중단점을 설정하려는 요소로 이동합니다.
- 요소를 마우스 오른쪽 버튼으로 클릭합니다.
- 중단 위로 마우스를 가져간 다음 하위 트리 수정, 속성 수정 또는 노드 삭제를 선택합니다.
이 예에서는 DOM 변경 중단점을 만들기 위한 컨텍스트 메뉴를 보여줍니다.
DOM 변경 중단점 목록은 다음 위치에서 확인할 수 있습니다.
- 요소 > DOM 중단점 창
- 소스 > DOM 중단점 측면 창
여기에서 다음 작업을 수행할 수 있습니다.
- 로 사용 설정 또는 사용 중지합니다.
- 마우스 오른쪽 버튼을 클릭하고 DOM에서 삭제 또는 표시를 클릭합니다.
DOM 변경 중단점 유형
- 하위 트리 수정. 현재 선택된 노드의 하위 요소가 삭제 또는 추가되거나 하위 요소의 콘텐츠가 변경될 때 트리거됩니다. 하위 노드 속성이 변경되거나 현재 선택된 노드가 변경될 때는 트리거되지 않습니다.
- 속성 수정: 현재 선택한 노드에서 속성이 추가 또는 삭제되거나 속성 값이 변경될 때 트리거됩니다.
- 노드 삭제: 현재 선택된 노드가 삭제될 때 트리거됩니다.
XHR/가져오기 중단점
XHR의 요청 URL에 지정된 문자열이 포함되어 있을 때 중단하려면 XHR/가져오기 중단점을 사용합니다. DevTools는 XHR이 send()
를 호출하는 코드 줄에서 일시중지됩니다.
이 방법이 도움이 되는 한 가지 예는 페이지에서 잘못된 URL을 요청함을 발견하여 잘못된 요청을 야기하는 AJAX 또는 Fetch 소스 코드를 빠르게 찾는 경우입니다.
XHR/가져오기 중단점을 설정하려면 다음 단계를 따르세요.
- 소스 탭을 클릭합니다.
- XHR Breakpoints 창을 펼칩니다.
- 중단점 추가를 클릭합니다.
- 중단하려는 문자열을 입력합니다. DevTools는 이 문자열이 XHR의 요청 URL 어디든 존재하면 일시 중지합니다.
- Enter를 눌러 확인합니다.
이 예에서는 URL에 org
가 포함된 요청의 XHR/fetch Breakpoints에서 XHR/가져오기 중단점을 만드는 방법을 보여줍니다.
이벤트 리스너 중단점
이벤트가 시작된 후 실행되는 이벤트 리스너 코드에서 일시중지하려면 이벤트 리스너 중단점을 사용합니다. click
와 같은 특정 이벤트나 모든 마우스 이벤트와 같은 이벤트 카테고리를 선택할 수 있습니다.
- 소스 탭을 클릭합니다.
- Event Listener Breakpoints 창을 펼칩니다. DevTools에 애니메이션과 같은 이벤트 카테고리 목록이 표시됩니다.
- 해당 카테고리의 이벤트가 실행될 때마다 이러한 카테고리 중 하나를 선택하여 일시중지하거나 카테고리를 펼치고 특정 이벤트를 선택하세요.
이 예에서는 deviceorientation
의 이벤트 리스너 중단점을 만드는 방법을 보여줍니다.
또한 Debugger는 공유 스토리지 Worklet을 비롯한 모든 유형의 웹 작업자 또는 Worklet에서 발생하는 이벤트를 일시중지합니다.
이 예에서는 서비스 워커에서 발생한 setTimer
이벤트에서 일시중지된 Debugger를 보여줍니다.
요소 > 이벤트 리스너 창에서도 이벤트 리스너 목록을 확인할 수 있습니다.
예외 중단점
포착 또는 미포착 예외를 생성하는 코드 줄에서 일시중지하려면 예외 중단점을 사용합니다. Node.js가 아닌 디버그 세션에서 이러한 두 예외에서 개별적으로 일시중지할 수 있습니다.
Sources 탭의 Breakpoints 창에서 다음 옵션 중 하나 또는 둘 다를 사용 설정한 다음 코드를 실행합니다.
확인할 수 없는 예외에서 일시중지를 선택합니다.
이 예에서는 포착되지 않은 예외에서 실행이 일시중지되었습니다.
포착된 예외에서 일시중지를 선택합니다.
이 예에서는 포착된 예외에서 실행이 일시중지됩니다.
비동기 호출의 예외
포착된 체크박스와 포착되지 않은 체크박스 중 하나 또는 모두를 설정하면 Debugger는 동기 호출과 비동기 호출 모두에서 해당하는 예외에서 일시중지를 시도합니다. 비동기식 경우 Debugger는 프로미스에서 거부 핸들러를 찾아 중지할 시점을 결정합니다.
예외 및 무시된 코드 포착
무시 목록을 사용 설정하면 디버거는 무시되지 않은 프레임에서 포착되거나 호출 스택의 이러한 프레임을 통해 전달되는 예외를 일시중지합니다.
다음 예는 무시되지 않은 mycode.js
를 통과하는 무시된 library.js
에 의해 발생한 포착된 예외에서 일시중지된 Debugger를 보여줍니다.
특이 사례의 Debugger 동작에 대해 자세히 알아보려면 이 데모 페이지에서 시나리오 모음을 테스트하세요.
함수 중단점
특정 함수가 호출될 때마다 일시중지하려면 debug(functionName)
를 호출합니다. 여기서 functionName
는 디버그할 함수입니다. 코드에 debug()
를 삽입 (예: console.log()
문)하거나 DevTools 콘솔에서 호출할 수 있습니다. debug()
는 함수의 첫 번째 줄에 코드 줄 중단점을 설정하는 것과 같습니다.
function sum(a, b) {
let result = a + b; // DevTools pauses on this line.
return result;
}
debug(sum); // Pass the function object, not a string.
sum();
타겟 함수가 범위 내에 있는지 확인
DevTools는 디버그하려는 함수가 범위 내에 없으면 ReferenceError
을 발생시킵니다.
(function () {
function hey() {
console.log('hey');
}
function yo() {
console.log('yo');
}
debug(yo); // This works.
yo();
})();
debug(hey); // This doesn't work. hey() is out of scope.
DevTools 콘솔에서 debug()
를 호출하는 경우 타겟 함수가 범위 내에 있는지 확인하는 것이 까다로울 수 있습니다. 다음은 한 가지 전략입니다.
- 함수가 범위 내에 있는 어딘가에 코드 줄 중단점을 설정합니다.
- 중단점을 트리거합니다.
- 코드가 코드 줄 중단점에서 일시중지된 상태에서 DevTools 콘솔에서
debug()
를 호출합니다.
신뢰할 수 있는 유형 중단점
신뢰할 수 있는 유형 API는 교차 사이트 스크립팅 (XSS) 공격이라고 하는 보안 악용으로부터 보호합니다.
소스 탭의 중단점 창에서 CSP 위반 중단점 섹션으로 이동하여 다음 옵션 중 하나 또는 둘 다를 사용 설정한 후 코드를 실행합니다.
싱크 위반을 확인합니다.
이 예시에서는 싱크 위반으로 인해 실행이 일시중지되었습니다.
정책 위반을 확인합니다.
이 예시에서는 정책 위반으로 인해 실행이 일시중지되었습니다. 신뢰할 수 있는 유형 정책은
trustedTypes.createPolicy
를 사용하여 설정됩니다.
API 사용에 대한 자세한 내용은 다음을 참조하세요.
- 보안을 더욱 강화하려면 신뢰할 수 있는 유형으로 DOM 기반 교차 사이트 스크립팅 취약점 방지하기를 참고하세요.
- 디버깅은 Chrome DevTools에서 CSP 및 신뢰할 수 있는 유형 디버깅 구현을 참고하세요.