중단점을 사용하여 JavaScript 코드를 일시중지합니다. 이 가이드에서는 DevTools에서 이용할 수 있는 중단점의 각 유형을 설명하고, 각각을 사용해야 하는 경우와 설정 방법도 설명합니다. 디버깅 프로세스에 관한 대화형 튜토리얼은 Chrome DevTools에서 JavaScript 디버깅 시작하기를 참고하세요.
각 중단점 유형을 사용해야 하는 경우에 대한 개요
가장 잘 알려진 유형의 중단점은 코드 줄(Line-of-code)입니다. 그러나 코드 줄 중단점 설정은 정확히 어디를 봐야 하는지 모를 때나, 큰 규모의 코드베이스로 작업할 때 특히 비효율적입니다. 언제 어떤 다른 유형의 중단점을 사용해야 하는지 알면 디버깅을 할 때 시간을 절약할 수 있습니다.
중단점 유형 | 다음과 같은 경우에 사용하세요. |
---|---|
코드 줄 | 정확한 코드 영역에서 일시중지합니다. |
조건부 코드 줄 | 정확한 코드 영역에서 일시중지하되 다른 조건이 참일 때만 일시중지합니다. |
Logpoint | 실행을 일시중지하지 않고 콘솔에 메시지를 로깅합니다. |
DOM | 특정 DOM 노드 또는 하위 요소를 변경하거나 삭제하는 코드에서 일시중지합니다. |
XHR | XHR URL에 문자열 패턴이 포함되면 일시중지합니다. |
이벤트 리스너 | 이벤트(예: click )가 실행된 후 실행되는 코드에서 일시중지합니다. |
예외 | 포착 또는 미포착 예외를 생성하는 코드 줄에서 일시중지합니다. |
함수 | 특정 함수가 호출될 때마다 일시중지합니다. |
신뢰할 수 있는 유형 | 신뢰할 수 있는 유형 위반 시 일시중지 |
코드 줄 중단점
조사해야 하는 정확한 코드 영역을 알고 있을 때 코드 줄 중단점을 사용합니다. DevTools는 이 코드 줄이 실행되기 전에 항상 일시중지합니다.
DevTools에서 코드 줄 중단점을 설정하려면 다음 단계를 따르세요.
- 소스 패널을 클릭합니다.
- 중단하려는 코드 줄이 포함된 파일을 엽니다.
- 코드 줄로 이동합니다.
- 코드 줄의 왼쪽에 줄 번호 열이 있습니다. 클릭합니다. 파란색 아이콘이 줄 번호 열 위에 나타납니다.
이 예에서는 29번 줄에 설정된 코드 줄 중단점을 보여줍니다.
코드 내 코드 줄 중단점
코드 내의 일시 중지할 줄에서 debugger
를 호출합니다. 이는 코드 줄 중단점과 동일하지만, 중단점이 DevTools UI가 아니라 코드에 설정된다는 점이 다릅니다.
console.log('a');
console.log('b');
debugger;
console.log('c');
조건부 코드 줄 중단점
실행을 중지하려는 경우, 하지만 특정 조건이 참일 때만 조건부 코드 줄 중단점을 사용합니다.
이러한 중단점은 특히 루프에서 케이스와 관련 없는 중단을 건너뛰려는 경우에 유용합니다.
조건부 코드 줄 중단점을 설정하려면 다음 단계를 따르세요.
- 소스 패널을 엽니다.
- 중단하고 싶은 코드 줄이 담긴 파일을 엽니다.
- 코드 줄로 이동합니다.
- 코드 줄 왼쪽에 줄 번호 열이 있습니다. 오른쪽 클릭합니다.
- 조건부 중단점 추가를 선택합니다. 코드 줄 아래에 대화상자가 표시됩니다.
- 대화상자에 조건을 입력합니다.
- Enter 키를 눌러 중단점을 활성화합니다. 물음표가 있는 주황색 아이콘이 줄 번호 열 위에 표시됩니다.
이 예에서는 i=6
반복에서 루프에서 x
가 10
를 초과할 때만 실행된 조건부 코드 줄 중단점을 보여줍니다.
코드 줄 중단점 로깅
로그 코드 줄 중단점(logpoints)을 사용하여 실행을 일시중지하지 않고 console.log()
호출로 코드를 어지럽히지 않고 콘솔에 메시지를 로깅합니다.
로그 포인트를 설정하려면 다음 단계를 따르세요.
- Sources 패널을 엽니다.
- 중단하고 싶은 코드 줄이 담긴 파일을 엽니다.
- 코드 줄로 이동합니다.
- 코드 줄의 왼쪽에 줄 번호 열이 있습니다. 오른쪽 클릭합니다.
- Logpoint 추가를 선택합니다. 코드 줄 아래에 대화상자가 표시됩니다.
대화상자에 로그 메시지를 입력합니다.
console.log(message)
호출과 동일한 문법을 사용할 수 있습니다.예를 들어 다음을 로깅할 수 있습니다.
"A string " + num, str.length > 1, str.toUpperCase(), obj
이 경우 로깅된 메시지는 다음과 같습니다.
// str = "test" // num = 42 // obj = {attr: "x"} A string 42 true TEST {attr: 'x'}
Enter 키를 눌러 중단점을 활성화합니다. 줄 번호 열 위에 점 2개가 있는 분홍색 아이콘이 표시됩니다.
이 예에서는 30번 줄에 있는 로그 포인트를 보여줍니다. 이 로그 포인트는 문자열과 변수 값을 콘솔에 로깅합니다.
코드 줄 중단점 수정
Breakpoints 섹션을 사용하여 코드 줄 중단점을 사용 중지, 수정 또는 삭제합니다.
중단점 그룹 수정
중단점 섹션은 중단점을 파일별로 그룹화하고 행 및 열 번호순으로 정렬합니다. 그룹으로 다음 작업을 할 수 있습니다.
- 그룹을 접거나 펼치려면 그룹 이름을 클릭합니다.
- 그룹 또는 중단점을 개별적으로 사용 설정 또는 중지하려면 그룹 또는 중단점 옆에 있는 아이콘을 클릭합니다.
- 그룹을 삭제하려면 그룹 위로 마우스를 가져간 다음 아이콘을 클릭합니다.
이 동영상에서는 그룹을 접고 하나씩 또는 그룹별로 중단점을 사용 중지하거나 사용 설정하는 방법을 보여줍니다. 중단점을 사용 중지하면 소스 패널에서 줄 번호 옆의 마커를 투명하게 만듭니다.
그룹에는 컨텍스트 메뉴가 있습니다. 중단점 섹션에서 그룹을 마우스 오른쪽 버튼으로 클릭하고 다음 중 하나를 선택합니다.
- 파일 (그룹)의 모든 중단점을 삭제합니다.
- 파일의 모든 중단점을 사용 중지합니다.
- 파일의 모든 중단점 사용 설정
- 모든 파일에서 모든 중단점을 삭제합니다.
- 다른 그룹의 다른 중단점을 삭제합니다.
중단점 수정
중단점을 수정하는 방법은 다음과 같습니다.
- 중단점 옆에 있는 아이콘을 클릭하여 중단점을 사용 설정하거나 사용 중지합니다. 중단점을 사용 중지하면 소스 패널에서 줄 번호 옆의 마커를 투명하게 만듭니다.
- 중단점에 마우스를 가져가 를 클릭하여 수정하고 를 클릭하여 삭제합니다.
중단점을 수정할 때는 인라인 편집기의 드롭다운 목록에서 중단점을 변경합니다.
중단점을 마우스 오른쪽 버튼으로 클릭하여 컨텍스트 메뉴를 표시하고 다음 옵션 중 하나를 선택합니다.
- 위치를 표시합니다.
- 조건 또는 로그 지점을 수정합니다.
- 모든 중단점을 사용 설정합니다.
- 모든 중단점을 사용 중지합니다.
- 중단점을 삭제합니다.
- (모든 파일에서) 다른 중단점을 삭제합니다.
- 모든 파일에서 모든 중단점을 삭제합니다.
동영상을 시청하여 중단점 편집의 다양한 작업(중지, 삭제, 조건 수정, 메뉴에서 위치 표시, 유형 변경)을 확인하세요.
'여기에서 일시중지하지 않음'으로 중단점 건너뛰기
여기서 일시중지 안 함 코드 줄 중단점을 사용하여 다른 이유로 발생하는 일시중지를 건너뜁니다. 이 기능은 예외 중단점을 사용 설정했지만 디버깅에 관심이 없는 특히 시끄러운 예외에서 디버거가 계속 중지되는 경우 유용할 수 있습니다.
휴식 시간을 음소거하는 방법:
- 소스 패널에서 소스 파일을 열고 중단하고 싶지 않은 줄을 찾습니다.
- 왼쪽 줄 번호 열에서 줄바꿈을 일으키는 문 옆에 있는 줄 번호를 마우스 오른쪽 버튼으로 클릭합니다.
- 드롭다운 메뉴에서 여기에서 일시중지 안함을 선택합니다. 주황색 (조건부) 중단점이 줄 옆에 표시됩니다.
실행이 일시중지된 동안 중단점을 음소거할 수도 있습니다. 다음 동영상을 시청하여 워크플로를 알아보세요.
여기에서 일시중지 안함을 사용하면 디버거 문과 코드 줄 중단점과 이벤트 리스너 중단점을 제외한 다른 모든 중단점 유형을 음소거할 수 있습니다.
일시중지해서는 안 되는 문이 일시중지를 일으키는 문과 다른 경우 여기서 일시중지하지 않음이 여러 문이 있는 줄에서 실패할 수 있습니다. 소스 매핑 코드에서 모든 중단점 위치가 중단을 일으키는 원래 문에 해당하는 것은 아닙니다.
DOM 변경 중단점
DOM 노드 또는 그 하위 요소를 변경하는 코드에서 일시중지하려면 DOM 변경 중단점을 사용하세요.
DOM 변경 중단점을 설정하려면 다음을 수행합니다.
- 요소 탭을 클릭합니다.
- 중단점을 설정할 요소로 이동합니다.
- 요소를 마우스 오른쪽 버튼으로 클릭합니다.
- Break on으로 마우스를 가져간 다음 Subtree modifications, Attribute modifications 또는 Node removal을 선택합니다.
이 예에서는 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
의 이벤트 리스너 중단점을 만드는 방법을 보여줍니다.
또한 디버거는 웹 워커 또는 공유 저장소 워크렛을 비롯한 모든 유형의 워크렛에서 발생하는 이벤트에서 일시중지됩니다.
이 예에서는 서비스 워커에서 발생한 setTimer
이벤트에서 일시중지된 디버거를 보여줍니다.
요소 > 이벤트 리스너 창에서도 이벤트 리스너 목록을 확인할 수 있습니다.
예외 중단점
포착 또는 미포착 예외를 생성하는 코드 줄에서 일시중지하고 싶은 경우 예외 중단점을 사용합니다. Node.js 이외의 디버그 세션에서 이러한 두 예외를 개별적으로 일시중지할 수 있습니다.
소스 패널의 중단점 섹션에서 다음 옵션 중 하나 또는 둘 다를 사용 설정한 다음 코드를 실행합니다.
포착되지 않은 예외에서 일시중지를 선택합니다.
이 예에서는 포착되지 않은 예외에서 실행이 일시중지됩니다.
포착된 예외에서 일시중지를 선택합니다.
이 예에서는 포착된 예외에서 실행이 일시중지됩니다.
비동기 호출의 예외
포착된 오류 체크박스와 포착되지 않은 오류 체크박스 중 하나 또는 둘 다를 사용 설정하면 디버거가 동기식 호출과 비동기식 호출 모두에서 해당 예외에서 일시중지하려고 시도합니다. 비동기인 경우 디버거는 중지 시점을 결정하기 위해 약속에서 거부 핸들러를 찾습니다.
포착된 예외 및 무시된 코드
무시 목록을 사용 설정하면 디버거는 무시되지 않는 프레임에서 포착되거나 호출 스택에서 이러한 프레임을 통과하는 예외에서 일시중지됩니다.
다음 예에서는 무시되지 않는 mycode.js
를 통과하는 무시된 library.js
에서 발생한 포착된 예외에서 일시중지된 디버거를 보여줍니다.
특이 사례에서 디버거 동작에 대해 자세히 알아보려면 이 데모 페이지에서 시나리오 모음을 테스트하세요.
함수 중단점
특정 함수가 호출될 때마다 일시중지하려면 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 및 신뢰할 수 있는 유형 디버깅 구현을 참고하세요.