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

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

중단점을 사용하여 JavaScript 코드를 일시중지합니다. 이 가이드에서는 DevTools에서 사용할 수 있는 각 중단점 유형과 각 유형의 사용 시기 및 설정 방법을 설명합니다. 디버깅 프로세스에 관한 대화형 가이드는 Chrome DevTools에서 자바스크립트 디버깅 시작하기를 참고하세요.

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

가장 잘 알려진 유형의 중단점은 코드 줄입니다. 그러나 코드 줄 중단점은 특히 정확히 어디를 봐야 할지 모르거나 대규모 코드베이스를 사용하는 경우 비효율적일 수 있습니다. 다른 유형의 중단점을 언제 어떻게 사용해야 하는지 알면 디버깅을 할 때 시간을 절약할 수 있습니다.

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

코드 줄 중단점

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

DevTools에서 코드 줄 중단점을 설정하려면 다음 단계를 따르세요.

  1. 소스 탭을 클릭합니다.
  2. 중단하려는 코드 줄이 포함된 파일을 엽니다.
  3. 코드 줄로 이동합니다.
  4. 코드 줄의 왼쪽에는 줄 번호 열이 있습니다. 그 탭을 클릭합니다. 파란색 아이콘이 줄 번호 열 위에 표시됩니다.

코드 줄 중단점입니다.

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

코드의 코드 줄 중단점

코드에서 debugger를 호출하여 해당 줄에서 일시중지합니다. 이는 코드 줄 중단점과 동일하지만 중단점이 DevTools UI가 아닌 코드에 설정된다는 점이 다릅니다.

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

조건부 코드 줄 중단점

실행을 중지하려는 경우 일부 조건이 true인 경우에만 조건부 코드 줄 중단점을 사용합니다.

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

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

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

조건부 코드 줄 중단점

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

코드 줄 중단점 로그

코드 줄 중단점 (로그 지점)을 사용하여 실행을 일시중지하거나 코드를 복잡하게 만들지 않으면서 콘솔에 메시지를 로깅할 수 있습니다.console.log()

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

  1. 소스 탭을 엽니다.
  2. 중단하려는 코드 줄이 포함된 파일을 엽니다.
  3. 코드 줄로 이동합니다.
  4. 코드 줄의 왼쪽에는 줄 번호 열이 있습니다. 마우스 오른쪽 버튼으로 클릭합니다.
  5. 로그 지점 추가를 선택합니다. 코드 줄 아래에 대화상자가 표시됩니다.

  6. 대화상자에 로그 메시지를 입력합니다. 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'}

  7. Enter 키를 눌러 중단점을 활성화합니다. 두 개의 점이 있는 분홍색 아이콘이 줄 번호 열 위에 표시됩니다.

콘솔에 문자열과 변수 값을 로깅하는 로그 지점입니다.

이 예는 문자열과 변수 값을 콘솔에 로깅하는 30번째 줄의 로그 지점을 보여줍니다.

코드 줄 중단점 수정

Breakpoints 창을 사용하여 코드 줄 중단점을 사용 중지, 수정 또는 삭제합니다.

중단점 그룹 수정

Breakpoints 창은 파일별로 중단점을 그룹화하고 줄 및 열 번호를 기준으로 정렬합니다. 그룹으로 다음과 같은 작업을 할 수 있습니다.

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

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

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

그룹의 컨텍스트 메뉴

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

중단점 수정

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

  • 중단점 옆에 있는 체크박스입니다.를 클릭하여 사용 설정하거나 사용 중지합니다. 중단점을 사용 중지하면 Sources 패널에서 줄 번호 옆의 마커를 투명하게 만듭니다.
  • 중단점 위로 마우스를 가져간 후 수정을 클릭합니다.를 클릭하여 수정하고 닫기.를 클릭하여 삭제합니다.

  • 중단점을 수정할 때는 인라인 편집기의 드롭다운 목록에서 유형을 변경합니다.

    중단점 유형 변경

  • 중단점을 마우스 오른쪽 버튼으로 클릭하여 컨텍스트 메뉴를 표시하고 옵션 중 하나를 선택합니다.

    중단점 컨텍스트 메뉴

    • 위치 공개
    • 조건 또는 로그 지점을 수정합니다.
    • 모든 중단점을 사용 설정합니다.
    • 모든 중단점을 사용 중지합니다.
    • 중단점을 삭제합니다.
    • 모든 파일에서 다른 중단점을 삭제합니다.
    • 모든 파일에서 모든 중단점을 삭제합니다.

사용 중지, 삭제, 조건 수정, 메뉴에서 위치 표시, 유형 변경 등 다양한 중단점 수정 사항을 동영상을 통해 확인해 보세요.

DOM 변경 중단점

DOM 노드 또는 하위 요소를 변경하는 코드에서 일시중지하려면 DOM 변경 중단점을 사용하세요.

DOM 변경 중단점을 설정하려면 다음 단계를 따르세요.

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

DOM 변경 중단점을 만들기 위한 컨텍스트 메뉴

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

DOM 변경 중단점 목록은 다음 위치에서 확인할 수 있습니다.

  • 요소 > DOM 중단점 창
  • 소스 > DOM 중단점 측면 창

Elements 및 Sources 패널의 DOM 중단점 목록

여기에서 다음 작업을 수행할 수 있습니다.

  • 체크박스입니다.로 사용 설정 또는 사용 중지합니다.
  • 마우스 오른쪽 버튼을 클릭하고 DOM에서 삭제 또는 표시를 클릭합니다.

DOM 변경 중단점 유형

  • 하위 트리 수정. 현재 선택된 노드의 하위 요소가 삭제 또는 추가되거나 하위 요소의 콘텐츠가 변경될 때 트리거됩니다. 하위 노드 속성이 변경되거나 현재 선택된 노드가 변경될 때는 트리거되지 않습니다.
  • 속성 수정: 현재 선택한 노드에서 속성이 추가 또는 삭제되거나 속성 값이 변경될 때 트리거됩니다.
  • 노드 삭제: 현재 선택된 노드가 삭제될 때 트리거됩니다.

XHR/가져오기 중단점

XHR의 요청 URL에 지정된 문자열이 포함되어 있을 때 중단하려면 XHR/가져오기 중단점을 사용합니다. DevTools는 XHR이 send()를 호출하는 코드 줄에서 일시중지됩니다.

이 방법이 도움이 되는 한 가지 예는 페이지에서 잘못된 URL을 요청함을 발견하여 잘못된 요청을 야기하는 AJAX 또는 Fetch 소스 코드를 빠르게 찾는 경우입니다.

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

  1. 소스 탭을 클릭합니다.
  2. XHR Breakpoints 창을 펼칩니다.
  3. 추가 중단점 추가를 클릭합니다.
  4. 중단하려는 문자열을 입력합니다. DevTools는 이 문자열이 XHR의 요청 URL 어디든 존재하면 일시 중지합니다.
  5. Enter를 눌러 확인합니다.

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

이 예에서는 URL에 org가 포함된 요청의 XHR/fetch Breakpoints에서 XHR/가져오기 중단점을 만드는 방법을 보여줍니다.

이벤트 리스너 중단점

이벤트가 시작된 후 실행되는 이벤트 리스너 코드에서 일시중지하려면 이벤트 리스너 중단점을 사용합니다. click와 같은 특정 이벤트나 모든 마우스 이벤트와 같은 이벤트 카테고리를 선택할 수 있습니다.

  1. 소스 탭을 클릭합니다.
  2. Event Listener Breakpoints 창을 펼칩니다. DevTools에 애니메이션과 같은 이벤트 카테고리 목록이 표시됩니다.
  3. 해당 카테고리의 이벤트가 실행될 때마다 이러한 카테고리 중 하나를 선택하여 일시중지하거나 카테고리를 펼치고 특정 이벤트를 선택하세요.

이벤트 리스너 중단점 만들기

이 예에서는 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()를 호출하는 경우 타겟 함수가 범위 내에 있는지 확인하는 것이 까다로울 수 있습니다. 다음은 한 가지 전략입니다.

  1. 함수가 범위 내에 있는 어딘가에 코드 줄 중단점을 설정합니다.
  2. 중단점을 트리거합니다.
  3. 코드가 코드 줄 중단점에서 일시중지된 상태에서 DevTools 콘솔에서 debug()를 호출합니다.

신뢰할 수 있는 유형 중단점

신뢰할 수 있는 유형 API는 교차 사이트 스크립팅 (XSS) 공격이라고 하는 보안 악용으로부터 보호합니다.

소스 탭의 중단점 창에서 CSP 위반 중단점 섹션으로 이동하여 다음 옵션 중 하나 또는 둘 다를 사용 설정한 후 코드를 실행합니다.

  • 체크박스입니다. 싱크 위반을 확인합니다.

    해당 체크박스가 사용 설정되었을 때 싱크 위반으로 인해 일시중지되었습니다.

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

  • 체크박스입니다. 정책 위반을 확인합니다.

    관련 체크박스가 사용 설정되었을 때 정책 위반으로 인해 일시중지됨

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

API 사용에 대한 자세한 내용은 다음을 참조하세요.