자바스크립트 디버깅 참조

Chrome DevTools 디버깅 기능에 관한 종합 레퍼런스를 통해 새로운 디버깅 워크플로를 살펴보세요.

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

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

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

일시중지 시 값 확인

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

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

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

실행이 일시중지된 상태에서 클래스 또는 함수 이름 위로 마우스를 가져가면 속성을 미리 볼 수 있습니다.

단계별 코드

코드가 일시중지되면 한 번에 하나의 표현식에 코드를 단계별로 실행하여 그 과정에서 제어 흐름과 속성 값을 조사하세요.

Step Over Code

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

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

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에서 일시중지됩니다.

코드 줄 나가기

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

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

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 을 길게 클릭한 다음 Force 스크립트 실행 을 선택합니다.

스레드 컨텍스트 변경

웹 워커 또는 서비스 워커로 작업할 때 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();

디버거는 이러한 표현식을 통해 똑같이 단계를 거칩니다.

따라서 스테핑 동작은 동일합니다.

• 축소된 코드와 작성된 코드 사이
• 소스 맵을 사용하여 원본 코드 측면에서 축소된 코드를 디버그하는 경우 즉, 세미콜론이 표시되면 디버깅하는 실제 소스가 축소된 경우에도 항상 단계별로 실행할 수 있습니다.

지역, 폐업 및 전체 숙박 시설 보기 및 수정

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

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

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

현재 호출 스택 보기

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

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

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

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

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

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

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

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

   

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. 이제 호출 스택에서 foo() 프레임을 다시 시작합니다. 값이 다시 0인 것을 확인할 수 있습니다.

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

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

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

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

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

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

비동기 프레임 보기

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

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

스택 트레이스 복사

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

다음은 출력의 예입니다.

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

파일 트리 탐색

페이지 창을 사용하여 파일 트리를 탐색할 수 있습니다.

파일 트리에서 그룹으로 작성 및 배포된 파일

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

소스 탐색을 돕기 위해 소스 > 페이지 창에서 파일을 두 가지 카테고리로 그룹화할 수 있습니다.

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

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

파일 트리에서 무시 목록에 있는 소스 숨기기

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

이러한 스크립트를 모두 숨기려면 소스 > 페이지 > > 무시 목록에 포함된 소스 숨기기 를 선택합니다.

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

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

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

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

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

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

개별 스크립트 또는 전체 디렉터리를 무시하려면 다음 단계를 따르세요.

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

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

또는 Settings > Ignore List의 목록에서 숨겨진 디렉터리 및 무시된 디렉터리와 스크립트를 삭제할 수 있습니다.

Editor 창에서 스크립트 무시

Editor 창에서 스크립트를 무시하려면 다음을 실행합니다.

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

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

Call Stack 창에서 스크립트 무시

Call Stack 창에서 스크립트를 무시하려면 다음 단계를 따르세요.

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

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

설정에서 스크립트 무시

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

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

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

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

커스텀 JavaScript 표현식의 값 감시

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

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

스크립트 검사 및 수정

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

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

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

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

로드된 파일을 축소한 파일을 보려면 Editor 왼쪽 하단의 { }를 클릭하세요.

코드 블록 접기

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

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

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

스크립트 수정하기

버그를 수정할 때 자바스크립트 코드의 몇 가지 변경사항을 테스트해 보고 싶은 경우가 많습니다. 외부 브라우저에서 변경한 후 페이지를 새로고침할 필요가 없습니다. 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로 자바스크립트 사용 중지를 참고하세요.