JavaScript 프로그램을 어떻게 디버그합니까? 가장 원시적 인 방법은 Alert ()를 사용하여 페이지에서 컨텐츠를 인쇄하는 것이며, 약간 개선 된 방법은 Console.log ()를 사용하여 JavaScript 콘솔에서 콘텐츠를 출력하는 것입니다. 글쎄,이 두 가지 방법을 사용하면 실제로 작은 JavaScript 스크립트의 많은 디버깅 문제가 해결되었습니다. 그러나 크롬에서 점점 더 강력 해지는 개발자 도구를 사용하지 않는 것은 유감입니다. 이 기사는 주로 JavaScript BreakPoint 설정 및 디버깅 기능, 즉 소스 패널 (이전 스크립트라고 함)을 소개합니다. Eclipse의 다양한 Java 디버깅 기술에 능숙하다면 여기의 개념이 비슷합니다. 이 기사를 쓸 때 사용되는 크롬 버전은 25.0.1364.172입니다.
기본 환경
Sourcessanel의 왼쪽에는 페이지의 다양한 리소스를 포함하여 컨텐츠 소스가 있습니다. 그 중에서도 소스와 콘텐츠 스크립트로 나뉩니다. 소스는 페이지 자체에 포함 된 다양한 리소스입니다. 그것들은 페이지에 나타나는 도메인에 따라 우리가주의를 기울여야 할 것입니다. 비동기로로드 된 JS 파일도로드 후 여기에 나타납니다. 컨텐츠 스크립트는 확장 ID에 따라 구성된 크롬 확장자입니다. 이러한 유형의 확장은 실제로 페이지에 포함 된 리소스이며 DOM을 읽고 쓸 수도 있습니다. 이와 같은 확장을 작성하고 디버그하는 개발자만이 그들에게 관심을 가져야합니다. 브라우저에 확장자가 설치되어 있지 않으면 콘텐츠 스크립트가 아무것도 볼 수 없습니다.
소스의 중간 영역 패널은 왼쪽의 리소스 파일의 내용을 표시하는 데 사용됩니다.
소스의 오른쪽에는 패널이 디버깅 기능 영역이 있습니다. 맨 위 행 버튼은 일시 중지/계속, 단계별, 단계별 점프, 단계별 점프, 모든 중단 점을 비활성화/활성화합니다. 다음은 다양한 기능 영역입니다. 이것은 나중에 소개됩니다.
양쪽 영역은 기본적으로 줄어들고 양쪽에 표시되지 않을 수 있습니다. 양쪽의 망원경 버튼을 클릭하여 표시합니다. 왼쪽 영역이 표시되면 기본값은 자동으로 축소됩니다. 옆에 핀 버튼을 클릭하면 후퇴하지 않습니다.
하단에는 매우 유용한 몇 가지 기능 버튼도 있습니다.
소스 코드에서 중단 점을 설정하십시오
왼쪽의 컨텐츠 소스를 통해 해당 JavaScript 파일을 열면 파일 줄 번호를 클릭하고 중단 점을 설정하고 삭제하십시오. 추가 된 각 중단 점은 오른쪽의 디버그 영역의 중단 점 목록에 나타납니다. 목록 브레이크 포인트를 클릭하면 컨텐츠 영역에서 중단 점이 찾을 수 있습니다. 여러 파일과 여러 중단 점이있는 경우 중단 점 목록에서 중단 점을 빠르게 찾는 것이 매우 편리합니다.
추가 된 각각의 중단 점에는 두 개의 상태가 있습니다 : 활성화 및 비활성화. 방금 추가 된 중단 점은 모두 활성화 된 상태이며 장애인 상태는 중단 점을 유지하지만 중단 점 기능을 일시적으로 취소하는 것입니다. 중단 점 목록의 각 중단 점 앞에 확인란이 있으며, 선택 취소는 중단 점을 비활성화합니다. 브레이크 포인트 위치의 마우스 오른쪽 버튼 클릭 메뉴에서 중단 점을 비활성화 할 수도 있습니다. 오른쪽 리본의 버튼에서 추가 된 모든 중단 점을 일시적으로 비활성화하고 클릭하여 원래 상태를 복원 할 수 있습니다.
조건부 중단 점 : 브레이크 포인트 위치의 오른쪽 클릭 메뉴에서 "브레이크 포인트 편집 ..."를 선택하여 중단 점을 트리거하도록 조건을 설정하여 표현식을 작성하면 표현식이 참을 때만 중단 점이 트리거됩니다. 브레이크 포인트의 환경 호출 스택을 확인하십시오 (통화 스택) : 브레이크 포인트가 중지되면 오른쪽의 디버깅 영역의 통화 스택에 현재 중단 점이있는 메소드 콜 스택이 표시됩니다. 예를 들어, 함수 f ()가 호출되는 함수 g ()가 있고 f ()에서 중단 점을 설정합니다. 그런 다음 콘솔에서 함수 g ()를 실행하면 중단 점이 트리거되고 통화 스택은 다음과 같이 표시됩니다.
상단은 f (), 그리고 g ()입니다. 통화 스택의 각 레이어를 프레임이라고합니다. 각 프레임을 클릭하면 해당 프레임의 호출 지점으로 이동할 수 있습니다.
또한 오른쪽 클릭 메뉴, 즉 프레임의 시작부터 프레임에서 현재 프레임의 실행을 다시 시작할 수 있습니다. 예를 들어, 함수 f ()의 프레임에서 중단 점은 f ()의 시작과 다시 실행되며 컨텍스트의 변수 값도 복원됩니다. 이러한 방식으로 변수 수정 및 코드 편집과 같은 기능을 결합하면 페이지를 새로 고치지 않고 중단 점을 다시 트리거하지 않고 현재 프레임의 반복적으로 디버그 할 수 있습니다. 변수를 봅니다
통화 스택 목록 아래에는 스코프 변수 목록이 있으며 현재 로컬 및 글로벌 변수의 값을 볼 수 있습니다. 선택한 코드를 실행하십시오
브레이크 포인트 디버깅 중에 마우스를 사용하여 볼 변수 또는 표현식을 선택한 다음 메뉴를 마우스 오른쪽 버튼으로 클릭하여 "콘솔에서 평가"를 실행하여 표현식의 현재 값을 확인할 수 있습니다. 다음 번에 실행될 JavaScript 문의 오른쪽에있는 디버깅 영역 상단의 "인터럽트/계속"버튼에 기능이 있습니다. 브레이크 포인트가 트리거되지 않으면이 버튼을 클릭하면 "준비"인터럽트 상태가 입력됩니다. 다음에 페이지가 JavaScript 문을 실행할 때 클릭 조치가 트리거 될 때 실행되는 코드와 같이 자동으로 인터럽합니다. 자바 스크립트 코드를 일시적으로 수정합니다. 우리는 일반적으로 코드를 디버깅 할 때이 루프에 익숙해집니다. 코드 수정 → 페이지 새로 고침 → 다시 확인하십시오. 그러나 실제로 JS 파일의 내용은 크롬에서 일시적으로 수정 될 수 있습니다. 저장 (ctrl+s)은 즉시 적용 할 수 있으며 콘솔 및 기타 기능으로 즉시 다시 섭취하십시오. 그러나이 수정은 일시적이며 새로 고침 페이지 수정이 사라질 것입니다.
예외의 중단점
인터페이스 아래의 버튼을 볼 수 있습니다. 프로그램이 실행 중일 예외가 발생할 때 프로그램이 중단되는지 여부를 설정하는 스위치입니다. 이 버튼을 클릭하면 3 개의 상태가 전환됩니다.
기본적으로 중단은 발생하지 않습니다
포착 된 상황을 포함하여 모든 예외가 중단됩니다
끊임없는 예외가 발생하는 경우에만 방해합니다
주로 상태 2와 상태 3의 차이점을 설명합니다.
노력하다{
'예외'를 던지십시오.
} catch (e) {
Console.log (e);
}
위의 시도의 코드는 예외가 발생하지만 뒤에있는 캐치 코드는 예외를 포착 할 수 있습니다. 모든 예외가 중단되면 코드는 예외를 생성 할 Throw 문에 실행될 때 자동으로 방해됩니다. 그리고 그것이 잡힌 예외가 발생했을 때만 중단되면 여기서 방해받지 않습니다. 일반적으로, 우리는 매치되지 않는 예외를 만나는 것에 대해 더 우려 할 것입니다.
DOM 요소에서 중단 점을 설정하십시오
때때로 우리는 어떤 코드 라인이 수정되었는지를 돌보지 않고 수정되는 특정 DOM을들을 필요가 있습니다 (또는 수정 될 장소가 많이있을 수 있음). 그런 다음 DOM에서 직접 중단 점을 설정할 수 있습니다.
그림과 같이 Elements of Elements 리뷰에서 오른쪽 클릭 메뉴에서 요소에서 세 가지 중단 점을 설정할 수 있습니다. 자식 노드가 자체 속성을 수정하고 자체 노드를 수정 한 후 DOM 브레이크 포인트가 소스 패널의 오른쪽 측면의 DOM 브레이크 포인트 목록에 나타납니다. DOM에 해당하는 수정을하기 위해 실행되면 아래 그림과 같이 코드가 중지됩니다.
XHR 브레이크 포인트
오른쪽의 디버깅 영역에 XHR 브레이크 포인트가 있습니다. +를 클릭하고 URL에 포함 된 문자열을 입력하여 URL에 대한 Ajax 요청을 들으십시오. 입력 컨텐츠는 URL 필터와 같습니다. 아무것도 채워지지 않으면 모든 XHR 요청을 들어보십시오. XHR 호출이 트리거되면 request.send ()가 요청되는 장소에서 중단됩니다.
이벤트 유형별로 브레이크 포인트를 트리거합니다
다양한 가능한 이벤트 유형이 나열된 오른쪽의 디버그 영역에있는 이벤트 리스너 목록. 해당 이벤트 유형을 확인하면 해당 유형의 이벤트를 트리거하는 JavaScript 코드가 자동으로 방해됩니다.
디버그 바로 가기 키
모든 개발 도구의 바로 가기 키는 인터페이스의 오른쪽 하단에있는 설정에서 찾을 수 있습니다. F8, F10, F11 또는 SHITF+F11은 일반적으로 중단 점을 디버깅 할 때 사용되지만 F10과 같은 기능 키는 시스템의 기본 단축키 키와 충돌 할 수 있습니다. 문제가되지 않습니다. CMD+/, CMD+', CMD+로 대체 할 수 있습니다. , shift+cmd+; 각기. //@ sourceUrl Name Eval에 의해 생성 된 코드. 때로는 별도의 JS 파일로로드하는 대신 eval () 함수를 통해 문자열 형태로 현재 JavaScript 컨텍스트에서 일부 매우 동적 코드가 생성됩니다. 이런 식으로 왼쪽의 내용 영역에서 파일을 찾지 못하므로 디버그하기가 어렵습니다. 실제로, 우리는 Eval 이이 코드를 지정하기 위해 Eval의 끝에 "//@ sourceUrl = name" 을 추가합니다 (브라우저는이 특별한 형태의 주석을 구체적으로 처리 할 것입니다). 따라서 지정된 이름으로 JS 파일을로드하고 Debug를로드 할 수 있습니다. 아래 그림에서는 Eval 및 사용을 통해 코드 조각을 실행하여 Dynamicscript.js를 지명합니다. 실행 후이 "파일"은 왼쪽의 컨텐츠 영역에 나타나고 그 내용은 Eval의 내용입니다. 동적으로 컴파일 된 커피 스크립트 코드 이름을 지정하는이 예를 살펴볼 수도 있습니다.
var coffee = coffeeScript.comPile (code.Value) + "//@ sourceUrl =" + (Evalname.Value || "Coffeeeeeeee!");
평가 (커피);
실제로, //@ sourceUrl은 평가 코드에서 사용할 수있을뿐만 아니라 JS 파일 또는 JavaScript 콘솔에서 입력 한 코드를 동일한 효과로 사용할 수 있습니다! 형식 코드 (Pretty Print) 버튼은 기본적으로 읽을 수 없거나 디버깅 된 일부 압축 JS 파일과 같은 지저분한 코드를 아름다운 코드로 재구성하는 데 사용됩니다. 형식을 클릭 한 다음 정보를 얻지 못합니다. 미화 전에
Beautified Reference : Chrome 개발자 도구 공식 문서