이 페이지는 Cloud Translation API를 통해 번역되었습니다.

중단점을 사용하여 코드 일시중지

Kayce Basques

Sofia Emelianova

중단점을 사용하여 JavaScript 코드를 일시중지합니다. 이 가이드에서는 각 유형을 사용해야 하는 경우와 설정 방법을 알아보겠습니다. 디버깅 프로세스에 관한 대화형 가이드는 Chrome DevTools에서 자바스크립트 디버깅 시작하기를 참고하세요.

각 중단점 유형을 사용해야 하는 경우에 대한 개요

가장 잘 알려진 중단점 유형은 코드 줄입니다. 그러나 코드 줄 중단점은 설정하는 것이 비효율적이고, 특히 정확히 어디를 살펴봐야 할지 모르거나 사용할 수 있습니다 언제, 어떻게 다른 중단점 유형입니다.

중단점 유형	용도
코드 줄	정확한 코드 영역에서 일시중지합니다.
조건부 코드 줄	정확한 코드 영역에서 일시중지하되 다른 조건이 참인 경우에만 일시중지합니다.
로그 지점	실행을 일시중지하지 않고 콘솔에 메시지를 로깅합니다.
DOM	특정 DOM 노드 또는 그 하위 요소를 변경하거나 삭제하는 코드에서 일시중지합니다.
XHR	XHR URL에 문자열 패턴이 포함되면 일시중지합니다.
이벤트 리스너	`click`와 같은 이벤트가 실행된 후 실행되는 코드에서 일시중지합니다.
예외	포착 또는 미포착 예외를 생성하는 코드 줄에서 일시중지합니다.
함수	특정 함수가 호출될 때마다 일시중지합니다.
신뢰할 수 있는 유형	신뢰할 수 있는 유형 위반 시 일시중지합니다.

코드 줄 중단점

조사해야 하는 정확한 코드 영역을 알고 있는 경우 코드 줄 중단점을 사용합니다. DevTools는 이 코드 줄이 실행되기 항상 일시 중지됩니다.

DevTools에서 코드 줄 중단점을 설정하는 방법:

Sources 패널을 클릭합니다.
중단하려는 코드 줄이 포함된 파일을 엽니다.
코드 줄로 이동합니다.
코드 줄 왼쪽에 줄 번호 열이 있습니다. 클릭합니다. 파란색 아이콘이 행 번호 열의 맨 위쪽에 표시됩니다.

코드 줄 중단점

이 예에서는 29번 줄에 설정된 코드 줄 중단점을 보여줍니다.

코드의 코드 줄 중단점

코드에서 debugger를 호출하여 해당 줄에서 일시중지합니다. 이것은 코드 줄 중단점을 참고하세요. 단, 중단점은 DevTools UI가 아닌 코드에 설정되어 있습니다.

console.log('a');
console.log('b');
debugger;
console.log('c');

조건부 코드 줄 중단점

실행을 중지하고 싶을 때 일부 조건이 참인 경우에만 조건부 코드 줄 중단점을 사용합니다.

이러한 중단점은 특히 루프에서 사례와 관련이 없는 중단을 건너뛰려는 경우에 유용합니다.

조건부 코드 줄 중단점을 설정하려면 다음 안내를 따르세요.

Sources 패널을 엽니다.
중단하려는 코드 줄이 포함된 파일을 엽니다.
코드 줄로 이동합니다.
코드 줄 왼쪽에 줄 번호 열이 있습니다. 마우스 오른쪽 버튼으로 클릭합니다.
조건부 중단점 추가를 선택합니다. 코드 줄 아래에 대화상자가 표시됩니다.
대화상자에 조건을 입력합니다.
Enter 키를 눌러 중단점을 활성화합니다. 줄 번호 열 위에 물음표가 있는 주황색 아이콘이 표시됩니다.

조건부 코드 줄 중단점

이 예에서는 i=6 반복에서 루프에서 x가 10를 초과할 때만 실행된 조건부 코드 줄 중단점을 보여줍니다.

코드 줄 중단점 로깅

로그 코드 줄 중단점 (로그 지점)을 사용하여 실행을 일시중지하지 않고 console.log() 호출로 코드를 복잡하게 만들지 않고 메시지를 콘솔에 로깅합니다.

로그 지점을 설정하려면 다음 안내를 따르세요.

Sources 패널을 엽니다.
중단하려는 코드 줄이 포함된 파일을 엽니다.
코드 줄로 이동합니다.
코드 줄 왼쪽에 줄 번호 열이 있습니다. 마우스 오른쪽 버튼으로 클릭합니다.
로그 지점 추가를 선택합니다. 코드 줄 아래에 대화상자가 표시됩니다.
대화상자에 로그 메시지를 입력합니다. 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 섹션을 사용합니다.

중단점 그룹 수정

Breakpoints 섹션은 파일별로 중단점을 그룹화하고 줄 및 열 번호에 따라 정렬합니다. 그룹으로 다음 작업을 수행할 수 있습니다.

그룹을 접거나 펼치려면 그룹 이름을 클릭합니다.
그룹 또는 중단점을 개별적으로 사용 설정 또는 사용 중지하려면 그룹 또는 중단점 옆에 있는 를 클릭합니다.
그룹을 삭제하려면 그룹 위로 마우스를 가져간 다음 를 클릭합니다.

이 동영상에서는 그룹을 축소하고 중단점을 하나씩 또는 그룹별로 사용 중지하거나 사용 설정하는 방법을 보여줍니다. 중단점을 사용 중지하면 Sources 패널에서 줄 번호 옆의 마커를 투명하게 만듭니다.

그룹에는 컨텍스트 메뉴가 있습니다. 중단점 섹션에서 그룹을 마우스 오른쪽 버튼으로 클릭하고 다음을 선택합니다.

파일 (그룹)의 모든 중단점을 삭제합니다.
파일의 모든 중단점을 사용 중지합니다.
파일의 모든 중단점을 사용 설정합니다.
모든 파일에서 중단점을 모두 삭제합니다.
(다른 그룹에 있는) 다른 중단점을 삭제합니다.

중단점 수정

중단점을 수정하려면 다음 안내를 따르세요.

중단점 옆에 있는 를 클릭하여 사용 설정하거나 사용 중지합니다. 중단점을 사용 중지하면 Sources 패널에서 줄 번호 옆의 마커를 투명하게 만듭니다.
중단점 위로 마우스를 가져간 후 를 클릭하여 수정하고 를 클릭하여 삭제합니다.
중단점을 수정할 때는 인라인 편집기의 드롭다운 목록에서 중단점을 변경합니다.
중단점을 마우스 오른쪽 버튼으로 클릭하여 컨텍스트 메뉴를 표시하고 옵션 중 하나를 선택합니다.
- 위치 표시
- 조건 또는 로그 지점을 수정합니다.
- 모든 중단점을 사용 설정합니다.
- 모든 중단점을 사용 중지합니다.
- 중단점을 삭제합니다.
- (모든 파일에서) 다른 중단점을 삭제합니다.
- 모든 파일에서 중단점을 모두 삭제합니다.

동영상을 보고 다양한 중단점 수정(사용 중지, 삭제, 조건 수정, 메뉴에서 위치 표시 및 유형 변경)이 작동하는 모습을 확인하세요.

'여기에서 일시중지하지 않음'으로 중단점 건너뛰기

여기에서 일시중지 안함 코드 줄 중단점을 사용하여 다른 이유로 발생할 수 있는 일시중지를 건너뜁니다. 이 기능은 예외 중단점을 사용 설정했지만 디버깅에 관심이 없는 특히 시끄러운 예외에서 디버거가 계속 중지되는 경우 유용할 수 있습니다.

휴식 시간 위치를 음소거하는 방법:

Sources 패널에서 소스 파일을 열고 중단하지 않으려는 줄을 찾습니다.
왼쪽 줄 번호 열에서 줄바꿈을 일으키는 문 옆에 있는 줄 번호를 마우스 오른쪽 버튼으로 클릭합니다.
드롭다운 메뉴에서 여기에서 일시중지 안함을 선택합니다. 주황색 (조건부) 중단점이 줄 옆에 표시됩니다.

실행이 일시중지된 동안 중단점을 음소거할 수도 있습니다. 워크플로에 대해 알아보려면 다음 동영상을 시청하세요.

여기에서 일시중지 안함을 사용하면 디버거 문과 코드 줄 중단점과 이벤트 리스너 중단점을 제외한 다른 모든 중단점 유형을 음소거할 수 있습니다.

여기에서 일시중지하지 않음은 일시중지해서는 안 되는 문이 일시중지를 일으키는 문과 다르면 여러 문이 있는 줄에서 실패할 수 있습니다. 소스 매핑 코드에서 모든 중단점 위치가 중단을 일으킨 원래 문에 해당하는 것은 아닙니다.

DOM 변경 중단점

DOM 노드 또는 있습니다.

DOM 변경 중단점을 설정하려면 다음을 수행합니다.

Elements 탭을 클릭합니다.
중단점을 설정하려는 요소로 이동합니다.
요소를 마우스 오른쪽 버튼으로 클릭합니다.
중단 시점 위로 마우스를 가져간 다음 하위 트리 수정, 속성 수정 또는 노드 삭제.

이 예에서는 DOM 변경 중단점을 만드는 컨텍스트 메뉴를 보여줍니다.

다음 위치에서 DOM 변경 중단점 목록을 찾을 수 있습니다.

Elements > DOM 중단점 창
출처 > DOM 중단점 측면 창

Elements and Sources 패널에 있는 DOM 중단점 목록입니다.

이 페이지에서 다음 작업을 수행할 수 있습니다.

로 사용 설정 또는 사용 중지합니다.
마우스 오른쪽 버튼 클릭 > DOM에서 이를 삭제하거나 표시합니다.

DOM 변경 중단점 유형

하위 트리 수정. 현재 선택된 노드의 하위 요소가 삭제되거나 하위 요소의 콘텐츠가 변경되는 경우 하위 노드 속성 변경 시 트리거되지 않음 현재 선택된 노드의 모든 변경사항에서 실행됩니다
속성 수정: 또는 속성 값이 변경될 때 알림을 받습니다.
노드 삭제: 현재 선택된 노드가 삭제될 때 트리거됩니다.

XHR/가져오기 중단점

XHR의 요청 URL에 지정된 문자열. DevTools는 XHR이 send()를 호출하는 코드 줄에서 일시중지됩니다.

이 방법이 유용한 한 가지 예는 페이지에서 잘못된 URL을 요청하고 잘못된 요청을 일으키는 AJAX 또는 가져오기 소스 코드를 빠르게 찾고자 하는 경우

XHR/가져오기 중단점을 설정하려면 다음 단계를 따르세요.

Sources 패널을 클릭합니다.
XHR Breakpoints 창을 펼칩니다.
중단점 추가를 클릭합니다.
중단하고 싶은 문자열을 입력합니다. 이 문자열이 있으면 DevTools가 일시중지합니다. XHR의 요청 URL에서 아무 곳에나 표시됩니다.
Enter를 눌러 확인합니다.

XHR/가져오기 중단점 만들기

이 예에서는 XHR/fetch Breakpoints에 org를 포함해야 합니다.

이벤트 리스너 중단점

이벤트가 시작된 후 실행되는 이벤트 리스너 코드에서 일시중지하려면 이벤트 리스너 중단점을 사용합니다. 이벤트가 시작됩니다. 특정 이벤트(예: click) 또는 이벤트 카테고리(예: 모든 마우스 이벤트를 지원합니다.

Sources 패널을 클릭합니다.
이벤트 리스너 중단점 창을 펼칩니다. DevTools는 애니메이션 형식으로 만듭니다.
이 카테고리 중 하나를 선택하여 해당 카테고리의 이벤트가 실행될 때마다 일시중지하거나 특정 이벤트를 확인할 수 있습니다.

이벤트 리스너 중단점 생성

이 예에서는 deviceorientation의 이벤트 리스너 중단점을 만드는 방법을 보여줍니다.

또한 디버거는 공유 저장소 Worklet을 비롯한 모든 유형의 웹 작업자 또는 Worklet에서 발생하는 이벤트에서 일시중지합니다.

서비스 워커의 이벤트에서 디버거가 일시중지되었습니다.

이 예에서는 서비스 워커에서 발생한 setTimer 이벤트에서 일시중지된 Debugger를 보여줍니다.

또한 이벤트 리스너의 목록은 Elements > 이벤트 리스너 창.

예외 중단점

포착 또는 오류가 발생하는 코드 줄에서 일시 중지하려면 예외 중단점을 사용합니다. 확인할 수 없습니다. Node.js를 제외한 모든 디버그 세션에서는 이러한 예외에서 독립적으로 일시중지할 수 있습니다.

Sources 패널의 Breakpoints 섹션에서 다음 옵션 중 하나 또는 둘 다를 사용 설정한 다음 코드를 실행합니다.

포착되지 않은 예외에서 일시중지를 선택합니다.

이 예에서는 포착되지 않은 예외로 인해 실행이 일시중지됩니다.
포착된 예외에서 일시중지를 선택합니다.

이 예에서는 포착된 예외로 인해 실행이 일시중지됩니다.

비동기 호출의 예외

포착됨 또는 포착되지 않음 체크박스 중 하나 또는 모두가 켜져 있으면 디버거는 동기 및 비동기 호출 모두에서 해당 예외에서 일시중지를 시도합니다. 비동기식의 경우 Debugger가 프로미스에서 거부 핸들러를 찾아 중지할 시점을 결정합니다.

예외 포착 및 코드 무시

무시 목록을 사용 설정하면 디버거는 무시되지 않은 프레임에서 포착되거나 호출 스택의 이러한 프레임을 통해 전달되는 예외에서 일시중지합니다.

다음 예에서는 무시되지 않은 mycode.js를 통과하는 무시된 library.js에서 발생한 포착된 예외에서 일시중지된 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()를 호출합니다. 중단점입니다.

신뢰할 수 있는 유형 중단점

Trusted Type API는 보안으로부터 보호 제공 교차 사이트 스크립팅 (XSS) 공격으로 알려진 익스플로잇을 악용합니다.

핵심 용어: DOM 기반 교차 사이트 스크립팅은 사용자의 데이터가 소스 (예: 사용자 이름 또는 URL 프래그먼트에서 가져온 리디렉션 URL) 싱크에 도달합니다. 싱크는 eval()와 같은 함수 또는 다음과 같은 속성 setter입니다. 임의의 JavaScript 코드를 실행할 수 있는 .innerHTML

Sources 패널의 Breakpoints 섹션에서 CSP Violation Breakpoints 섹션으로 이동하여 다음 옵션 중 하나 또는 둘 다를 사용 설정한 후 코드를 실행합니다.

싱크 위반을 확인합니다.

이 예시에서는 싱크 위반으로 인해 실행이 일시중지되었습니다.
정책 위반을 확인합니다.

이 예에서는 정책 위반으로 인해 실행이 일시중지되었습니다. 신뢰할 수 있는 유형 정책은 trustedTypes.createPolicy를 사용하여 설정됩니다.

다음 페이지에서 API 사용에 대해 자세히 알아볼 수 있습니다.

보안 목표를 강화하려면 신뢰할 수 있는 유형으로 DOM 기반 교차 사이트 스크립팅 취약점 방지하기를 참고하세요.
디버깅에 관해서는 Chrome DevTools에서 CSP 및 신뢰할 수 있는 유형 디버깅 구현을 참고하세요.