JavaScript
디버깅

중단 점

중단 점은 실행이 특정 지점에 도달하면 프로그램을 일시 중지합니다. 그런 다음 프로그램을 단계별로 실행하여 실행을 관찰하고 변수의 내용을 검사 할 수 있습니다.

중단 점을 만드는 세 가지 방법이 있습니다.

1. debugger; 사용하여 코드에서 debugger; 성명서.
2. 개발자 도구를 사용하여 브라우저에서.
3. 통합 개발 환경 (IDE)에서.

디버거 명령문

debugger; 를 배치 할 수 있습니다 debugger; 자바 스크립트 코드의 어디서나 사용할 수 있습니다. JS 인터프리터가 해당 행에 도달하면 스크립트 실행을 중지하므로 변수를 검사하고 코드를 단계별로 실행할 수 있습니다.

개발자 도구

두 번째 옵션은 브라우저의 개발자 도구에서 직접 코드에 중단 점을 추가하는 것입니다.

개발자 도구 열기

Chrome 또는 Firefox

1. F12 키 를 눌러 개발자 도구를 엽니 다.
2. 소스 탭 (Chrome) 또는 디버거 탭 (Firefox)으로 전환하십시오.
3. Ctrl + P를 누르고 자바 스크립트 파일의 이름을 입력하십시오.
4. Enter 키 를 눌러 엽니 다.

Internet Explorer 또는 Edge

1. F12 키 를 눌러 개발자 도구를 엽니 다.
2. 디버거 탭으로 전환하십시오.
3. 창의 왼쪽 위 모서리 근처에있는 폴더 아이콘을 사용하여 파일 선택 창을 엽니 다. JavaScript 파일을 찾을 수 있습니다.

원정 여행

1. Command + Option + C 를 눌러 개발자 도구를 엽니 다.
2. 리소스 탭으로 전환하십시오.
3. 왼쪽 패널에서 "Scripts"폴더를 엽니 다.
4. 자바 스크립트 파일을 선택하십시오.

개발자 도구에서 중단 점 추가

개발자 도구에서 JavaScript 파일을 연 다음 줄 번호를 클릭하여 중단 점을 배치 할 수 있습니다. 다음 번에 프로그램을 실행하면 일시 중지됩니다.

축소 된 출처에 대한 참고 사항 : 출처가 축소되면 Pretty Print (읽을 수있는 형식으로 변환) 할 수 있습니다. Chrome에서는 소스 코드 뷰어의 오른쪽 하단에있는 {} 버튼을 클릭하면됩니다.

십오 일

Visual Studio 코드 (VSC)

VSC에는 JavaScript 디버깅을위한 내장 된 지원 기능이 있습니다.

1. 왼쪽의 디버그 버튼을 클릭하거나 Ctrl + Shift + D를 클릭합니다.
2. 아직 수행하지 않은 경우 톱니 바퀴 아이콘을 눌러 실행 구성 파일 ( launch.json )을 만듭니다.
3. 녹색 재생 버튼을 누르거나 F5 를 눌러 VSC에서 코드를 실행하십시오.

VSC에 중단 점 추가

중단 점을 추가하려면 JavaScript 소스 파일의 줄 번호 옆을 클릭하십시오 (빨간색으로 표시됨). 중단 점을 삭제하려면 빨간색 원을 다시 클릭하십시오.

팁 : 브라우저의 개발 도구에서 조건부 중단 점을 활용할 수도 있습니다. 실행시 불필요한 중단을 건너 뛰는 데 도움이됩니다. 예제 시나리오 : 루프의 변수를 정확히 5 ^번째 반복에서 검사하려고합니다.

코드를 단계별로 실행

중단 점에서 실행을 일시 중지 한 후에는 실행을 관찰하기 위해 실행을 한 줄씩 따라갈 수 있습니다. 브라우저의 개발자 도구를 열고 실행 제어 아이콘을 찾으십시오. 이 예에서는 Google 크롬의 아이콘을 사용하지만 다른 브라우저에서도 유사합니다.

재개 : 실행 일시 중지. Shorcut : F8 (Chrome, Firefox)

스텝 오버 : 다음 코드 행을 실행하십시오. 해당 줄에 함수 호출이 포함되어 있으면 함수가 정의 된 곳으로 이동하는 대신 전체 함수를 실행하고 다음 줄로 이동하십시오. 바로 가기 : F10 (Chrome, Firefox, IE / Edge), F6 (Safari)

Step Into : 다음 코드 행을 실행하십시오. 해당 행에 함수 호출이 포함되어 있으면 함수로 건너 뛰고 거기서 잠시 멈추십시오. 바로 가기 : F11 (Chrome, Firefox, IE / Edge), F7 (Safari)

스텝 아웃 : 현재 함수의 나머지 부분을 실행하고, 함수가 호출 된 곳으로 점프하고, 다음 문장에서 일시 중지합니다. 바로 가기 : Shift + F11 (Chrome, Firefox, IE / Edge), F8 (Safari)

호출 스택 과 함께 사용하면 현재 호출중인 함수, 함수를 호출 한 함수 등을 알 수 있습니다.

자세한 내용 및 조언은 '코드를 단계별로 실행하는 방법' 에 대한 Google 가이드를 참조하십시오.

브라우저 바로 가기 키 문서에 대한 링크 :

• 크롬
• Firefox
• IE
• 가장자리
• 원정 여행

실행을 자동으로 일시 중지합니다.

Chrome에서는 중단 점을 둘 필요없이 실행을 일시 중지 할 수 있습니다.

예외시 일시 중지 : 이 버튼이 켜져있는 동안 프로그램에서 처리되지 않은 예외가 발생하면 프로그램이 중단 점에 도달 한 것처럼 일시 중지합니다. 버튼은 실행 컨트롤 근처에서 찾을 수 있으며 오류를 찾는 데 유용합니다.

HTML 태그 (DOM 노드)가 수정되거나 속성이 변경되면 실행을 일시 중지 할 수도 있습니다. 이렇게하려면 Elements 탭에서 DOM 노드를 마우스 오른쪽 버튼으로 클릭하고 "Break on ..."을 선택하십시오.

인터프리터 인터프리터 변수

이러한 기능은 특정 브라우저의 개발자 도구에서만 작동합니다.

$_ 는 마지막으로 평가 된 표현식의 값을 제공합니다.

"foo"             // "foo"
$_                // "foo"

$0 은 Inspector에서 현재 선택된 DOM 요소를 나타냅니다. 따라서 <div id="foo"> 가 강조 표시된 경우 :

$0                      // <div id="foo">
$0.getAttribute('id')   // "foo"

$1 은 이전에 선택한 요소를 참조하고, $2 는 그 전에 선택한 요소를 참조하고, 나머지는 $3 및 $4 냅니다.

CSS 선택기와 일치하는 요소의 콜렉션을 얻으려면 $$(selector) . 이것은 본질적으로 document.querySelectorAll 의 바로 가기입니다.

var images = $$('img');  // Returns an array or a nodelist of all matching elements

¹ _{document.getElementById 또는 document.querySelector 별칭}

요소 검사기

클릭 페이지의 요소를 선택하여 Chrome의 요소 탭 왼쪽 위 모서리에있는 버튼을 클릭하거나 개발자 도구에서 Firefox의 관리자 탭을 클릭 한 다음 페이지의 요소를 클릭하여 요소를 강조 표시 하고 $0 할당합니다. 변수 .

요소 관리자는 다음과 같이 다양한 방법으로 사용할 수 있습니다.

1. JS가 예상대로 DOM을 조작하고 있는지 확인할 수 있습니다.
2. 요소에 영향을주는 규칙을 볼 때 CSS를 쉽게 디버깅 할 수 있습니다.
   (Chrome의 스타일 탭)
3. 페이지를 다시로드하지 않고 CSS 및 HTML로 재생할 수 있습니다.

또한 Chrome은 요소 탭에서 마지막 5 개의 선택 사항을 기억합니다. $0 은 현재 선택이고 $1 은 이전 선택입니다. 최대 $4 까지 갈 수 있습니다. 그렇게하면 선택 사항을 끊임없이 전환하지 않고 여러 노드를 쉽게 디버그 할 수 있습니다.

Google Developers 에서 더 많은 내용을 읽을 수 있습니다.

setter 및 getter를 사용하여 속성 변경 내용 찾기

다음과 같은 객체가 있다고 가정 해 보겠습니다.

var myObject = {
    name: 'Peter'
}

나중에 코드에서 myObject.name 에 액세스하려고 시도하고 Peter 대신 George 를 얻습니다. 당신은 누가 그것을 바꿨으며 정확히 어디에서 바뀌 었는지 궁금해합니다. debugger (또는 다른 것)를 모든 세트에 배치하는 방법이 있습니다 (누군가 myObject.name = 'something' 할 때마다) :

var myObject = {
    _name: 'Peter',
    set name(name){debugger;this._name=name},
    get name(){return this._name}
}

우리가 이름을 바꾼 것에주의 name 위해 _name 그리고 우리는 세터와의 게터 정의하려고 name .

set name 은 설정자입니다. debugger , console.trace() 또는 디버깅에 필요한 다른 것을 배치 할 수있는 최적의 장소입니다. 설정자는 _name 에 name 값을 설정합니다. getter ( get name 부분)는 거기에서 값을 읽습니다. 이제 우리는 디버깅 기능을 갖춘 완벽하게 기능적인 객체를 갖게되었습니다.

대부분의 경우, 변경된 객체는 우리가 제어 할 수 없습니다. 다행스럽게도 기존 객체에 setter 및 getter를 정의하여 디버깅 할 수 있습니다.

// First, save the name to _name, because we are going to use name for setter/getter
otherObject._name = otherObject.name;

// Create setter and getter
Object.defineProperty(otherObject, "name", {
    set: function(name) {debugger;this._name = name},
    get: function() {return this._name}
});

자세한 정보는 MDN에서 세터 와 게터 를 확인하십시오.

setter / getters에 대한 브라우저 지원 :

함수 호출시 중단

명명 된 (비 익명) 함수의 경우 함수가 실행될 때 중단 될 수 있습니다.

debug(functionName);

functionName 함수가 다음에 실행될 때 디버거는 첫 번째 줄에서 중지합니다.

콘솔 사용

많은 환경에서 표준 출력 장치와 통신하기위한 몇 가지 기본 방법을 포함하는 전역 console 개체에 액세스 할 수 있습니다. 일반적으로 브라우저의 자바 스크립트 콘솔이됩니다 (자세한 내용은 Chrome , Firefox , Safari 및 Edge 참조).

// At its simplest, you can 'log' a string
console.log("Hello, World!");

// You can also log any number of comma-separated values
console.log("Hello", "World!");

// You can also use string substitution
console.log("%s %s", "Hello", "World!");

// You can also log any variable that exist in the same scope
var arr = [1, 2, 3];
console.log(arr.length, this);

다른 콘솔 방법을 사용하여 출력을 다른 방법으로 강조 표시 할 수 있습니다. 다른 방법은 고급 디버깅에도 유용합니다.

자세한 설명서, 호환성 정보 및 브라우저의 콘솔을 여는 방법에 대한 지침은 콘솔 항목을 참조하십시오.

참고 : IE9를 지원해야하는 경우 개발자 도구가 열릴 때까지 console 이 정의되어 있지 않으므로 console.log 를 제거하거나 다음과 같이 호출을 래핑하십시오.

if (console) { //IE9 workaround
    console.log("test");
}