자바스크립트 디버깅 참조

Sofia Emelianova
Sofia Emelianova

Chrome DevTools 디버깅의 종합 레퍼런스를 통해 새로운 디버깅 워크플로를 살펴보세요 기능을 살펴보겠습니다

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

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

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

일시중지 시 값 확인

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

선언 옆에 표시된 인라인 평가

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

콘솔을 사용하여 평가된 변수, 상수, 객체 쿼리

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

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

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

단계별 코드

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

코드 줄 건너뛰기

문제와 관련 없는 함수가 포함된 코드 줄에서 일시중지되었을 때 Step Over를 클릭합니다. 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에서 Step Over하는 함수(BC)의 모든 코드를 실행합니다. 그러면 DevTools가 D에서 일시중지됩니다.

Step Into 코드 줄

발생한 문제와 관련된 함수 호출이 포함된 코드 줄에서 일시중지되었을 때 Step into를 클릭하여 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 해당 지점까지 모든 코드를 실행한 다음 해당 줄에서 일시 중지합니다.

'여기로 이동'을 선택합니다.

스크립트 실행 재개

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

'스크립트 실행 재개' 선택

스크립트 강제 실행

모든 중단점을 무시하고 스크립트를 강제로 다시 시작하려면 Resume Script(스크립트 재개)를 길게 클릭합니다. 실행 스크립트 실행 재개 강제 스크립트 실행을 선택합니다. 스크립트 강제 실행입니다.

'스크립트 실행 강제 실행'을 선택합니다.

스레드 컨텍스트 변경

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

Threads 창

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

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

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

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

function foo() {}

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

bar();

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

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

디버거도 이러한 표현식을 동일하게 단계별로 살펴봅니다.

쉼표로 구분된 표현식을 진행합니다.

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

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

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

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

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

범위 창

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

현재 호출 스택 보기

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

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

Call Stack 창

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

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

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

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

  1. 중단점에서 함수 실행을 일시중지합니다. Call Stack 창에는 함수 호출 순서가 기록됩니다.
  2. 호출 스택 창에서 함수를 마우스 오른쪽 버튼으로 클릭하고 드롭다운 메뉴에서 프레임 다시 시작을 선택합니다.

    드롭다운 메뉴에서 프레임 다시 시작을 선택합니다.

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

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() 프레임을 다시 시작합니다. bar() 프레임 다시 시작.
  4. F9를 눌러 값 증분 문을 단계별로 살펴봅니다. 현재 값을 늘리는 중입니다. 현재 값이 value = 2로 증가하는 것을 확인할 수 있습니다.
  5. 필요한 경우 범위 창에서 값을 더블클릭하여 수정하고 원하는 값을 설정합니다. 범위 창에서 값을 수정합니다.
  6. bar() 프레임을 다시 시작하고 증분 문을 여러 번 단계별로 진행합니다. 값은 계속 증가합니다. bar() 프레임 다시 시작

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

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

  1. 이제 호출 스택에서 foo() 프레임을 다시 시작합니다. foo() 프레임을 다시 시작합니다.값이 다시 0입니다. ALT_TEXT_HERE

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

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

기본적으로 Call Stack 창에는 코드와 관련된 프레임만 표시되며 설정을 탭합니다. Settings >에 추가된 스크립트는 생략됩니다. 무시 목록:

호출 스택

서드 파티 프레임을 포함한 전체 호출 스택을 보려면 호출 스택 섹션에서 무시 목록에 있는 프레임 표시를 사용 설정하세요.

무시 목록에 포함된 프레임을 표시합니다.

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

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

비동기 프레임 보기

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

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

비동기 호출 프레임

스택 트레이스 복사

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

'Copy Stack Trace'(스택 트레이스 복사)를 선택합니다.

다음은 출력의 예입니다.

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

파일 트리 탐색

페이지을 사용하여 파일 트리를 탐색합니다.

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

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

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

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

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

작성됨/배포됨 기준으로 파일 그룹화

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

직접 생성한 코드에만 집중할 수 있도록 소스 > Page 창에서 설정을 탭합니다. Settings > 기본적으로 무시 목록이 포함됩니다.

이러한 스크립트를 모두 숨기려면 소스 > 페이지 > 점 3개로 된 메뉴 > 무시 목록에 있는 소스 숨기기 시험용입니다.를 선택합니다.

무시 목록에 포함된 소스를 숨기기 전후

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

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

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

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

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

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

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

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

디렉터리 또는 스크립트 파일의 옵션은 무시합니다.

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

선택된 무시된 파일에 삭제 및 구성 버튼이 표시됩니다.

그렇지 않으면 설정을 탭합니다. 설정 > 무시 목록.

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

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

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

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

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

Call Stack 창에서 스크립트 무시

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

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

호출 스택 창에서 스크립트를 무시합니다.

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

설정에서 스크립트 무시

설정을 탭합니다. 설정 >을 확인하세요. 무시 목록.

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

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

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

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

보기 창을 사용하여 맞춤 표현식의 값을 확인합니다. 모든 유효한 JavaScript는 사용할 수 있습니다.

보기 창

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

스크립트 검사 및 수정

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

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

축소된 파일을 읽을 수 있도록 만들기

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

'-'가 포함된 예쁘게 인쇄된 긴 코드 줄이 여러 줄로 표시됨 사용하여 선 연속을 나타냅니다.

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

코드 블록 접기

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

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

이 동작을 구성하려면 설정을 탭합니다. 설정 > 환경설정 > 출처.

스크립트 수정

버그를 수정할 때는 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. 실행을 계속합니다.

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

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

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

  1. 소스 패널의 편집기 창에서 파일을 엽니다.
  2. 내장된 검색창을 열려면 Command+F (Mac) 또는 Ctrl+F (Windows, Linux)를 누릅니다.
  3. 검색창에 검색어를 입력합니다. 검색. 원하는 경우 다음을 수행할 수 있습니다. <ph type="x-smartling-placeholder">
      </ph>
    • 대소문자 일치 Match Case를 클릭하여 검색어에서 대소문자를 구분합니다.
    • 정규식을 사용하여 검색하려면 정규식 버튼 정규 표현식 사용을 클릭합니다.
  4. Enter를 누릅니다. 이전 또는 다음 검색결과로 이동하려면 위쪽 또는 아래쪽 버튼을 누릅니다.

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

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

자바스크립트 사용 중지

Chrome DevTools로 JavaScript 사용 중지를 참고하세요.