자바스크립트 디버깅 참조

Chrome DevTools 디버깅 기능에 관한 포괄적 참조 문서를 통해 새로운 디버깅 워크플로를 살펴보세요.

디버깅의 기본사항을 알아보려면 Chrome DevTools에서 자바스크립트 디버깅 시작하기를 참고하세요.

중단점이 있는 코드 일시중지

중단점을 설정하여 실행 도중에 코드를 일시중지할 수 있도록 합니다. 중단점을 설정하는 방법을 알아보려면 중단점으로 코드 일시중지를 참고하세요.

일시중지 시 값 확인

실행이 일시중지된 동안 디버거는 현재 함수 내의 모든 변수, 상수, 객체를 중단점까지 평가합니다. 디버거는 상응하는 선언 옆에 현재 값을 인라인으로 표시합니다.

콘솔을 사용하여 평가된 변수, 상수, 객체를 쿼리할 수 있습니다.

마우스 오버 시 클래스/함수 속성 미리보기

실행이 일시중지된 동안 클래스 또는 함수 이름 위로 마우스를 가져가 속성을 미리 봅니다.

단계별 코드

코드가 일시중지되면 한 번에 하나의 표현식씩 단계별로 실행하여 제어 흐름과 속성 값을 조사합니다.

코드 줄 Step Over

디버깅 중인 문제와 관련이 없는 함수가 포함된 코드 줄에서 일시중지되면 Step over 를 클릭하여 함수로 이동하지 않고 함수를 실행합니다.

예를 들어 다음 코드를 디버깅한다고 가정해 보겠습니다.

function updateHeader() {
  var day = new Date().getDay();
  var name = getName(); // A
  updateName(name); // D
}
function getName() {
  var name = app.first + ' ' + app.last; // B
  return name; // C
}

A에 일시중지되었습니다. Step Over를 누르면 DevTools가 단계별로 실행하는 함수의 모든 코드(B 및 C)를 실행합니다. 그러면 DevTools가 D에서 일시중지됩니다.

Step Into 코드 줄

디버깅 중인 문제와 관련된 함수 호출이 포함된 코드 줄에서 일시중지되면 Step into 를 클릭하여 함수를 자세히 조사합니다.

예를 들어 다음 코드를 디버깅한다고 가정해 보겠습니다.

function updateHeader() {
  var day = new Date().getDay();
  var name = getName(); // A
  updateName(name);
}
function getName() {
  var name = app.first + ' ' + app.last; // B
  return name;
}

A에 일시중지되었습니다. Step into를 누르면 DevTools가 이 코드 줄을 실행한 다음 B에서 일시중지됩니다.

코드 줄 바깥으로 이동

디버깅 중인 문제와 관련이 없는 함수 내에서 일시중지된 경우 Step out 을 클릭하여 나머지 함수 코드를 실행합니다.

예를 들어 다음 코드를 디버깅한다고 가정해 보겠습니다.

function updateHeader() {
  var day = new Date().getDay();
  var name = getName();
  updateName(name); // C
}
function getName() {
  var name = app.first + ' ' + app.last; // A
  return name; // B
}

A에 일시중지되었습니다. Step out을 누르면 DevTools가 getName()(이 예에서는 B)의 나머지 코드를 실행한 다음 C에서 일시중지합니다.

특정 줄까지 모든 코드 실행

긴 함수를 디버깅할 때 디버깅 중인 문제와 관련 없는 코드가 많이 있을 수 있습니다.

모든 라인을 살펴볼 수도 있지만 지루한 작업입니다. 관심 있는 줄에서 코드 줄 중단점을 설정할 수 있지만 Resume Script Execution 를 누르면 더 빠른 방법이 있습니다.

관심 있는 코드 줄을 마우스 오른쪽 버튼으로 클릭하고 여기로 이동을 선택합니다. DevTools는 그 지점까지 모든 코드를 실행한 다음 해당 줄에서 멈춥니다.

스크립트 실행 재개

일시중지 후 스크립트 실행을 계속하려면 Resume Script Execution 을 클릭합니다. DevTools는 다음 중단점(있는 경우)까지 스크립트를 실행합니다.

스크립트 강제 실행

모든 중단점을 무시하고 스크립트가 실행을 재개하도록 하려면 Resume Script Execution 을 길게 클릭한 다음 Forcescript deployment(스크립트 실행 강제 실행) 를 선택합니다.

스레드 컨텍스트 변경

웹 작업자 또는 서비스 워커로 작업할 때는 Threads 창에 나열된 컨텍스트를 클릭하여 해당 컨텍스트로 전환합니다. 파란색 화살표 아이콘은 현재 선택된 컨텍스트를 나타냅니다.

위 스크린샷의 Threads 창은 파란색 윤곽선으로 표시되어 있습니다.

예를 들어 기본 스크립트와 서비스 워커 스크립트 모두의 중단점에서 일시중지되었다고 가정해 보겠습니다. 서비스 워커 컨텍스트의 로컬 및 전역 속성을 보고 싶지만 Sources 패널에 기본 스크립트 컨텍스트가 표시됩니다. Threads 창에서 서비스 워커 항목을 클릭하면 해당 컨텍스트로 전환할 수 있습니다.

쉼표로 구분된 표현식 단계별 수행

쉼표로 구분된 표현식을 단계별로 실행하면 축소된 코드를 디버그할 수 있습니다. 예를 들어 다음 코드를 살펴보겠습니다.

function foo() {}

function bar() {
  foo();
  foo();
  return 42;
}

bar();

축소되면 쉼표로 구분된 foo(),foo(),42 표현식이 포함됩니다.

function foo(){}function bar(){return foo(),foo(),42}bar();

Debugger는 이러한 표현식을 단계별로 실행합니다.

따라서 단계별 동작은 동일합니다.

• 축소된 코드와 작성된 코드 사이
• 소스 맵을 사용하여 축소된 코드를 원본 코드와 관련하여 디버그하는 경우 즉, 세미콜론이 표시되면 디버깅 중인 실제 소스가 축소된 경우에도 항상 세미콜론을 따라갈 수 있습니다.

로컬, 폐업, 전체 속성 보기 및 수정

코드 줄에서 일시중지된 상태에서 범위 창을 사용하여 로컬, 클로저, 전역 범위의 속성 및 변수 값을 보고 수정합니다.

• 속성 값을 더블클릭하여 변경합니다.
• 열거할 수 없는 속성은 비활성화됩니다.

위 스크린샷에서 Scope 창이 파란색 윤곽선으로 표시되어 있습니다.

현재 호출 스택 보기

코드 줄에서 일시중지된 상태에서 Call Stack 창을 사용하여 이 지점에 도달한 호출 스택을 확인합니다.

항목을 클릭하여 이 함수가 호출된 코드 줄로 이동합니다. 파란색 화살표 아이콘은 DevTools가 현재 강조하고 있는 함수를 나타냅니다.

위 스크린샷에서 Call Stack 창이 파란색 윤곽선으로 표시되어 있습니다.

호출 스택에서 함수 (프레임) 다시 시작

전체 디버깅 흐름을 다시 시작하지 않고 함수의 동작을 관찰하고 다시 실행하려면 이 함수가 일시중지되었을 때 단일 함수의 실행을 다시 시작하면 됩니다. 즉, 호출 스택에서 함수의 프레임을 다시 시작할 수 있습니다.

프레임을 다시 시작하려면 다음 단계를 따르세요.

1. 중단점에서 함수 실행을 일시중지합니다. Call Stack 창에는 함수 호출 순서가 기록됩니다.

2. Call Stack 창에서 함수를 마우스 오른쪽 버튼으로 클릭하고 드롭다운 메뉴에서 Restart frame을 선택합니다.

   

프레임 다시 시작의 작동 방식을 이해하려면 다음 코드를 살펴보세요.

function foo(value) {
    console.log(value);
    bar(value);
}

function bar(value) {
    value++;
    console.log(value);
    debugger;
}

foo(0);

foo() 함수는 0를 인수로 사용하여 기록하고 bar() 함수를 호출합니다. 그러면 bar() 함수는 인수를 증가시킵니다.

다음과 같은 방법으로 두 함수의 프레임을 다시 시작해 보세요.

1. 위의 코드를 새 스니펫에 복사하여 실행합니다. debugger 코드 줄 중단점에서 실행이 중지됩니다.
2. 디버거에 함수 선언 옆에 현재 값(value = 1)이 표시됩니다.
3. bar() 프레임을 다시 시작합니다.
4. F9 키를 눌러 값 증분 문을 단계별로 진행합니다. 현재 값이 증가하는 것을 볼 수 있습니다(value = 2).
5. 필요한 경우 범위 창에서 값을 더블클릭하여 수정하고 원하는 값을 설정합니다.

6. bar() 프레임을 다시 시작하고 증분 문을 여러 번 단계별로 진행합니다. 값이 계속 증가합니다.

프레임 다시 시작은 인수를 재설정하지 않습니다. 즉, 다시 시작할 때 함수 호출 시 초기 상태가 복원되지 않습니다. 대신 실행 포인터를 함수의 시작 부분으로 이동합니다.

따라서 현재 인수 값은 동일한 함수를 다시 시작해도 메모리에 유지됩니다.

1. 이제 Call Stack에서 foo() 프레임을 다시 시작합니다. 값이 다시 0인 것을 확인합니다.

JavaScript에서 인수 변경사항은 함수 외부에서 볼 수 없습니다 (반영됩니다). 중첩 함수는 메모리 내 위치가 아닌 값을 수신합니다. 1. 이 튜토리얼을 완료하려면 스크립트 실행 (F8)을 재개하세요.

무시 목록에 포함된 프레임 표시

기본적으로 Call Stack 창에는 코드와 관련된 프레임만 표시되고 Settings > Ignore List에 추가된 스크립트는 생략됩니다.

서드 파티 프레임을 포함한 전체 호출 스택을 보려면 호출 스택 섹션에서 무시 목록에 포함된 프레임 표시를 사용 설정합니다.

이 데모 페이지에서 사용해 보세요.

1. Sources 패널에서 src > app > app.component.ts 파일을 엽니다.
2. increment() 함수에 중단점을 설정합니다.
3. 호출 스택 섹션에서 무시 목록에 있는 프레임 표시 체크박스를 선택하거나 선택 해제하고 호출 스택에서 관련 프레임 목록 또는 전체 프레임 목록을 관찰합니다.

비동기 프레임 보기

사용 중인 프레임워크에서 지원하는 경우 DevTools는 비동기 코드의 두 부분을 함께 연결하여 비동기 작업을 추적할 수 있습니다.

이 경우 Call Stack에는 비동기 호출 프레임을 포함한 전체 통화 기록이 표시됩니다.

스택 트레이스 복사

Call Stack 창의 아무 곳이나 마우스 오른쪽 버튼으로 클릭하고 Copy stack trace를 선택하여 현재 호출 스택을 클립보드에 복사합니다.

다음은 출력의 예입니다.

getNumber1 (get-started.js:35)
inputsAreEmpty (get-started.js:22)
onClick (get-started.js:15)

파일 트리 탐색

Page 창을 사용하여 파일 트리를 탐색합니다.

파일 트리의 그룹 작성 및 배포 파일

프레임워크 (예: React 또는 Angular)를 사용하여 웹 애플리케이션을 개발할 때 빌드 도구 (예: webpack 또는 Vite)에서 생성되는 축소된 파일 때문에 소스를 탐색하기 어려울 수 있습니다.

소스를 탐색하는 데 도움이 되도록 Sources > Page 창에서 파일을 두 가지 카테고리로 그룹화할 수 있습니다.

• 작성됨. IDE에서 보는 소스 파일과 유사합니다. DevTools는 빌드 도구에서 제공하는 소스 맵을 기반으로 이러한 파일을 생성합니다.
• 배포됨 브라우저가 읽는 실제 파일입니다. 일반적으로 이러한 파일은 축소되어 있습니다.

그룹화를 사용 설정하려면 파일 트리 상단의 점 3개로 된 메뉴에서 > 작성됨/배포된 항목별 파일 그룹화 옵션을 사용 설정합니다.

파일 트리에서 무시 목록에 포함된 소스 숨기기

생성한 코드에만 집중할 수 있도록 Sources > Page 창에서는 기본적으로 Settings > Ignore List에 추가된 모든 스크립트 또는 디렉터리가 회색으로 표시됩니다.

이러한 스크립트를 모두 숨기려면 소스 > 페이지 > > 무시 나열된 소스 숨기기 를 선택합니다.

스크립트 또는 스크립트 패턴 무시

디버깅 중에 건너뛰도록 스크립트를 무시합니다. 무시하면 Call Stack 창에서 스크립트가 가려지며, 코드를 단계별로 실행할 때 스크립트의 함수로 들어가지 않습니다.

예를 들어 다음 코드를 단계별로 실행한다고 가정해 보겠습니다.

function animate() {
  prepare();
  lib.doFancyStuff(); // A
  render();
}

A는 신뢰할 수 있는 서드 파티 라이브러리입니다. 디버깅 중인 문제가 서드 파티 라이브러리와 관련이 없다고 확신하는 경우 스크립트를 무시하는 것이 좋습니다.

파일 트리에서 스크립트 또는 디렉터리 무시

개별 스크립트 또는 전체 디렉터리를 무시하는 방법은 다음과 같습니다.

1. 소스 > 페이지에서 디렉터리 또는 스크립트 파일을 마우스 오른쪽 버튼으로 클릭합니다.
2. 목록에 추가할 디렉터리/스크립트 추가를 선택합니다.

무시 나열된 소스를 숨기지 않았다면 파일 트리에서 이러한 소스를 선택하고 경고 배너에서 무시된 목록에서 삭제 또는 구성을 클릭합니다.

또는 설정 > 무시 목록에 있는 목록에서 숨겨지거나 무시된 디렉터리와 스크립트를 삭제할 수 있습니다.

편집기 창에서 스크립트 무시

Editor 창에서 스크립트를 무시하는 방법은 다음과 같습니다.

1. 파일을 엽니다.
2. 아무 곳이나 마우스 오른쪽 버튼으로 클릭합니다.
3. 무시 목록에 스크립트 추가를 선택합니다.

설정 > 무시 목록에서 무시 목록에 있는 스크립트를 삭제할 수 있습니다.

Call Stack 창에서 스크립트 무시

Call Stack 창에서 스크립트를 무시하는 방법은 다음과 같습니다.

1. 스크립트에서 함수를 마우스 오른쪽 버튼으로 클릭합니다.
2. 무시 목록에 스크립트 추가를 선택합니다.

설정 > 무시 목록에서 무시 목록에 있는 스크립트를 삭제할 수 있습니다.

설정에서 스크립트 무시

설정 > 무시 목록을 참고하세요.

모든 페이지에서 디버그 코드 스니펫 실행

Console에서 동일한 디버그 코드를 반복해서 실행해야 하는 경우 스니펫을 사용해 보세요. 스니펫은 DevTools 내에서 작성, 저장 및 실행할 수 있는 실행 가능한 스크립트입니다.

자세한 내용은 모든 페이지에서 코드 스니펫 실행을 참고하세요.

맞춤 자바스크립트 표현식의 값 확인

Watch 창을 사용하여 커스텀 표현식의 값을 확인합니다. 모든 유효한 JavaScript 표현식을 확인할 수 있습니다.

• Add Expression 을 클릭하여 새 감시 표현식을 만듭니다.
• 새로고침 을 클릭하여 모든 기존 표현식의 값을 새로고침합니다. 코드를 단계별로 실행하는 동안 값이 자동으로 새로고침됩니다.
• 표현식 위로 마우스를 가져가 표현식 삭제 를 클릭하여 삭제합니다.

스크립트 검사 및 수정

Page 창에서 스크립트를 열면 DevTools가 Editor 창에 스크립트를 표시합니다. 편집기 창에서 코드를 탐색하고 수정할 수 있습니다.

또한 콘텐츠를 로컬에서 재정의하거나 작업공간을 만들고 DevTools에서 변경한 내용을 로컬 소스에 직접 저장할 수 있습니다.

축소된 파일을 읽을 수 있도록 설정

기본적으로 Sources 패널은 축소된 파일을 예쁘게 인쇄합니다. 잘 인쇄된 경우 Editor는 여러 줄에 하나의 긴 코드 줄을 표시할 수 있으며 -은 줄 연속임을 나타냅니다.

축소된 파일이 로드되었을 때 이를 확인하려면 편집기 왼쪽 하단의 { }를 클릭합니다.

코드 블록 접기

코드 블록을 접으려면 왼쪽 열의 줄 번호 위로 마우스를 가져간 다음 접기를 클릭합니다.

코드 블록을 펼치려면 옆에 있는 {...}를 클릭합니다.

이 동작을 구성하려면 Settings > Preferences > Sources를 참고하세요.

스크립트 수정

버그를 수정할 때 JavaScript 코드의 일부 변경사항을 테스트하려는 경우가 많습니다. 외부 브라우저에서 변경한 후 페이지를 새로고침할 필요가 없습니다. DevTools에서 스크립트를 수정할 수 있습니다.

스크립트를 수정하려면 다음 단계를 따르세요.

1. Sources 패널의 Editor 창에서 파일을 엽니다.
2. Editor 창에서 원하는 내용을 변경합니다.

3. Command+S (Mac) 또는 Ctrl+S (Windows, Linux)를 눌러 저장합니다. DevTools가 전체 JS 파일을 Chrome의 JavaScript 엔진에 패치합니다.

   

   위 스크린샷에서 Editor 창이 파란색 윤곽선으로 표시되어 있습니다.

일시중지된 함수 실시간 수정

실행이 일시중지된 동안 현재 함수를 수정하고 변경사항을 실시간으로 적용할 수 있지만 다음과 같은 제한사항이 있습니다.

• 호출 스택에서는 최상위 함수만 수정할 수 있습니다.
• 스택 아래쪽에 동일한 함수에 대한 재귀 호출이 없어야 합니다.

함수를 실시간 수정하려면 다음 안내를 따르세요.

1. 중단점을 사용하여 실행을 일시중지합니다.
2. 일시중지된 함수를 수정합니다.
3. Command / Control + S를 눌러 변경사항을 적용합니다. 디버거가 자동으로 함수를 다시 시작합니다.
4. 실행을 계속합니다.

이 워크플로에 대해 알아보려면 아래 동영상을 시청하세요.

이 예에서 addend1 및 addend2 변수는 처음에 잘못된 string 유형을 가집니다. 따라서 숫자를 추가하는 대신 문자열이 연결됩니다. 이를 해결하기 위해 실시간 수정 중에 parseInt() 함수를 추가합니다.

스크립트에서 텍스트 찾기 및 바꾸기

스크립트에서 텍스트를 검색하려면 다음 단계를 따르세요.

1. Sources 패널의 Editor 창에서 파일을 엽니다.
2. 내장된 검색창을 열려면 Command+F (Mac) 또는 Ctrl+F (Windows, Linux)를 누릅니다.
3. 검색창에 검색어를 입력합니다. 원하는 경우 다음 작업을 할 수 있습니다.
   • 대소문자 일치를 클릭하여 쿼리를 대소문자를 구분합니다.
   • 정규식을 사용하여 검색하려면 정규 표현식 사용을 클릭합니다.
4. Enter를 누릅니다. 이전 또는 다음 검색결과로 이동하려면 위쪽 또는 아래쪽 버튼을 누릅니다.

찾은 텍스트를 바꾸려면 다음 단계를 따르세요.

1. 검색창에서 바꾸기 버튼을 클릭합니다.
2. 바꿀 텍스트를 입력한 다음 바꾸기 또는 모두 바꾸기를 클릭합니다.

자바스크립트 사용 중지

Chrome DevTools로 자바스크립트 사용 중지를 참고하세요.