서문 : 디버깅 코드는 모든 프로그래머에게 필수 불가결합니다. 마스터이든 초보자이든, 디버깅 프로그램은 필수적인 작업입니다. 일반적으로, 디버깅 프로그램은 코드를 작성한 후 또는 테스트 중에 버그를 수정할 때 수행됩니다. 디버깅 코드 중에 프로그래머의 수준과 문제 분석의 정확성을 반영하는 것이 좋습니다. 많은 초보자는 오류의 원인을 찾을 때 항상 문제를 알지 못하고 많은 시간을 소비하지만 궁극적으로 매우 간단한 버그를 해결할 수는 없습니다. 다양한 디버깅 기술을 습득하면 작업의 절반의 노력으로 결과의 두 배를 달성 할 수 있습니다. 예를 들어, 문제를 신속하게 찾고, 실패 가능성을 줄이고, 논리적 오류를 분석하는 데 도움이됩니다. 오늘날 오늘날 인터넷의 프론트 엔드 개발이 점점 더 중요 해지고있는 경우, 개발 비용을 줄이고, 업무 효율성을 향상시키고, 프론트 엔드 개발 및 프론트 엔드 개발의 디버깅 기술을 마스터하는 것이 특히 중요합니다.
이 기사는 다양한 프론트 엔드 JS 디버깅 기술을 하나씩 설명합니다. 어쩌면 당신은 그들을 마스터했을 것입니다. 그래서 함께 검토합시다. 어쩌면 전에 보지 못한 방법이있을 수 있습니다. 당신은 그들을 함께 배울 수도 있습니다. 어쩌면 당신은 디버그하는 방법을 모른다. 이 기회를 잡고 격차를 메우십시오.
1. Alert, Arout 디버깅 마스터
그때 인터넷이 막 시작되었고 웹 페이지의 프런트 엔드는 주로 컨텐츠 디스플레이에 관한 것이 었으며 브라우저 스크립트는 페이지에 대해 매우 간단한 보조 기능 만 제공 할 수있었습니다. 당시 웹 페이지는 주로 IE6에 의해 지배되는 브라우저에서 실행되었으며 JS의 디버깅 기능은 여전히 매우 약해서 창 객체에 내장 된 경고 방법을 통해서만 디버깅 될 수 있습니다. 그 당시에는 다음과 같이 보였을 것입니다.
여기에서 볼 수있는 효과는 당시 IE 브라우저에서 볼 수있는 효과가 아니라 IE의 더 높은 버전에서 효과가 있다는 점에 유의해야합니다. 또한 당시에는 고급 콘솔이없는 것 같았으며 Alert의 사용은 실제 Page JS 코드에도 사용되었습니다. 디버깅 경고 방법은 매우 원시적이지만 당시에는 잊을 수없는 가치가 있었으며 오늘날에도 사용할 장소가 있습니다.
2. 새로운 세대의 디버깅 킹 콘솔
JS가 웹 프론트 엔드에서 점점 더 많은 일을 할 수 있으므로 책임은 점점 커지고 있으며 상태가 점점 더 중요 해지고 있습니다. 전통적인 경고 디버깅 방법은 프론트 엔드 개발의 다양한 시나리오를 점차적으로 충족시키지 못했습니다. 또한, 경고 디버깅 방법에 의해 디버깅 정보가 나타나는 것은 실제로 아름답 지 않으며 일부 페이지 컨텐츠를 차단할 것입니다.
반면에, 경고의 디버깅 정보는 정상적으로 작동하기 위해 "Alert (xxxxx)와 같은 프로그램 논리에 추가되어야하며 Alert는 페이지의 지속적인 렌더링을 방해합니다. 즉, 개발자 디버깅이 완료된 후에는 이러한 디버깅 코드를 수동으로 지워야합니다.
따라서 새로운 세대의 브라우저 Firefox, Chrome 및 IE는 PAGE 디버깅 콘솔을 연속적으로 시작하여 "Console.Log (XXXX)"와 유사한 양식의 사용을 지원하여 페이지 디스플레이에 직접 영향을 미치지 않으면 서 콘솔의 디버깅을 인쇄했습니다. 예를 들어, 다음과 같이 보입니다.
좋아, 못생긴 경고 팝업 상자에 작별 인사. Chrome이 이끄는 Rising Star는 콘솔로보다 풍부한 기능을 확장했습니다.
이것이 만족 스럽다고 생각하십니까? 크롬 개발 팀의 상상력은 정말 훌륭합니다.
좋아, 나는 조금 더 주제를 더 많이 말했다. 요컨대, 콘솔 및 브라우저에서 내장 콘솔 객체가 출현하면 프론트 엔드 개발 및 디버깅에 큰 편의를 제공했습니다.
일부 사람들은 디버깅이 완료된 후이 디버깅 코드를 청소해야합니까?
이 문제와 관련하여 콘솔 객체를 사용하기 전에 진보 된 존재 검증이있는 경우 삭제하지 않고 비즈니스 로직에 손상되지 않습니다. 물론, 깔끔한 코드를 보장하기 위해 디버깅이 완료된 후 비즈니스 로직과 관련이없는 디버깅 코드는 가능한 한 많이 삭제해야합니다.
3. JS 브레이크 포인트 디버깅
디버거의 기능 중 하나 인 브레이크 포인트는 필요한 경우 프로그램 인터럽트를 중단 할 수 있도록하여 분석을 용이하게합니다. 한 번의 디버깅으로 중단 점을 설정할 수도 있습니다. 다음 번에는 프로그램이 자동으로 설정 중단 점 위치로 실행되도록해야하며 마지막 세트 중단 점 위치에서 방해하여 작동을 크게 용이하게하고 시간을 절약 할 수 있습니다. -Baidu 백과 사전
JS 브레이크 포인트 디버깅은 브라우저 개발자 도구에서 JS 코드에 중단 점을 추가하여 특정 위치에서 JS 실행이 중지 될 수 있으므로 개발자가 코드 세그먼트를 분석하고 논리적으로 처리 할 수 있습니다. 브레이크 포인트 디버깅의 효과를 관찰하기 위해 JS 코드를 미리 준비합니다.
코드는 매우 간단합니다. 함수를 정의하고 두 숫자로 전달하고 지저분한 임의의 정수를 추가 한 다음 두 숫자의 합을 반환하는 것입니다. Chrome 개발자 도구를 예로 들어 JS 브레이크 포인트 디버깅의 기본 방법을 살펴 보겠습니다.
3.1. 소스 중단 점
우선, 테스트 코드에서 위의 그림에서 콘솔의 출력 결과를 통해 코드가 정상적으로 실행되어야한다는 것을 알 수 있지만 왜 그렇게되어야합니까? 임의의 숫자가 함수에 추가되기 때문에 최종 결과가 실제로 맞습니까? 이것은 의미없는 추측이지만, 지금 확인할 것이라고 가정합니다. 두 숫자는 함수에 전달되었고, 임의의 숫자가 추가되었으며, 최종 합계. 그래서 어떻게 작동 하는가?
방법 1, Alert 또는 Console을 사용하든 위에서 언급 한 가장 일반적인 방법은 다음과 같은 방식으로 확인할 수 있습니다.
위의 그림에서, 우리는 코드에 3 줄의 콘솔 코드를 추가하여 우리가 관심있는 데이터 변수를 인쇄했습니다. 결국, 전체 계산 프로세스가 정상인지 명확하게 확인한 다음 질문에 의해 설정된 확인 요구 사항을 충족 할 수 있습니다.
방법 2 및 방법 1은 검증 프로세스에 명백한 단점이 있으며, 이는 많은 중복 코드가 추가된다는 것입니다. 다음으로 검증을 위해 중단 점을 사용하는 것이 더 편리한 지 살펴 보겠습니다. 먼저 중단 점을 추가하는 방법과 중단 점 이후의 효과가 무엇인지 확인하십시오.
그림과 같이 코드에 중단 점을 추가하는 프로세스는 "F12 (Ctrl + Shift + I) 개발 도구 열기" - "클릭 소스 메뉴" - "왼쪽 트리에서 해당 파일 찾기" - "행 번호 열"을 클릭하여 현재 행에서 브레이크 포인트의 추가/삭제를 완료하는 것입니다. 중단 점이 추가되면 페이지 js 실행이 중단 점 위치에서 정지됩니다. 소스 인터페이스에는 모든 변수와 값이 현재 범위에 표시됩니다. 검증 요구 사항을 완료하려면 각 값을 확인하십시오.
문제는 여기에 있습니다. 조심하면 내 코드가 중단 점에 도달하면 표시된 변수 A 및 B의 값이 추가되었음을 알 수 있습니다. 합 함수를 호출 할 때 초기 10과 20이 통과 된 것을 볼 수 없습니다. 그래서 어떻게해야합니까? 이를 위해서는 되돌아 가서 브레이크 포인트 디버깅에 대한 기본 지식을 배워야합니다. 소스 패널을 열면 실제로 인터페이스에 다음 내용이 표시됩니다. 우리는 마우스 트랙을 따라 그 의미를 확인합니다.
왼쪽에서 오른쪽으로 각 아이콘으로 표시되는 기능은 다음과 같습니다.
일시 정지/이력서 스크립트 실행 : 일시 정지/이력서 스크립트 실행 (프로그램 실행은 다음 중단 점에서 중지 됨).
다음 함수 통화 : 다음 단계로 함수 호출을 실행합니다 (다음 줄로 이동).
다음 함수로 들어가십시오. 호출 : 현재 함수를 입력하십시오.
현재 기능을 중단하십시오 : 현재 실행 함수에서 벗어나십시오.
Deactive/Active 모든 중단 점 : 모든 중단 점 (취소되지 않음).
예외에서 일시 중지 : 예외를위한 자동 중단 점 설정.
이 시점에서 브레이크 포인트 디버깅의 기능 키가 거의 도입되었습니다. 다음으로, 아래 그림과 같이 각 라인이 실행 된 후 각 라인의 변경 사항을 볼 수 있도록 프로그램 코드 라인을 살펴볼 수 있습니다.
위에서 언급했듯이, 초기 값에서 변수 A와 B의 전체 프로세스를보고 중간에 임의의 값을 추가 한 다음 마지막으로 합계를 계산하고 최종 결과를 출력 할 수 있습니다. 질문 설정의 확인 요구 사항을 완료하는 것은 문제가되지 않습니다.
나머지 기능 키의 경우 테스트 코드를 약간 변경하고 GIF 다이어그램을 사용하여 사용법을 보여줍니다.
여기서 주목해야 할 것은 코드 영역에서 변수 값을 직접 인쇄하는 기능이 최신 버전의 Chrome에 추가 된 새로운 기능이라는 것입니다. 여전히 이전 버전의 Chrome을 사용하는 경우 브레이크 포인트 바로 아래에서 가변 정보를 보지 못할 수 있습니다. 현재 마우스를 변수 이름으로 이동하여 짧은 시간 동안 일시 중지 할 수 있으며 변수 값이 나타납니다. 마우스로 변수 이름을 선택하고 "add to watch"를 마우스 오른쪽 버튼으로 클릭하여 시계 패널에서 볼 수 있습니다. 이 방법은 표현에도 적용됩니다. 또한 중단 점에서 콘솔 패널로 전환하고 콘솔에 직접 변수 이름을 입력 한 다음 변수 정보를 입력 할 수 있습니다. 이 부분은 기사의 길이를 고려하고 그림과 시연을 만들지 않는 비교적 간단합니다.
3.2. 디버거 브레이크 포인트
소위 디버거 브레이거는 실제로 나에 의해 명명되었으며 전문적인 용어를 말하는 방법을 모르겠습니다. 구체적으로, "디버거"를 추가함으로써; 코드에 대한 명령문은 코드가 명령문을 실행할 때 포인트를 자동으로 중단합니다. 다음 작업은 소스 패널에서 브레이크 포인트 디버깅을 추가하는 것과 거의 동일합니다. 유일한 차이점은 디버깅 후 명령문을 삭제해야한다는 것입니다.
브레이크 포인트를 설정하는 것과 동일한 방법이 다르기 때문에 기능은 소스 패널에 중단 점을 추가하는 것과 동일합니다. 왜이 메소드가 여전히 존재합니까? 그 이유는 다음과 같습니다. 우리는 때때로 개발 중에 HTML 조각 (임베디드 JS 코드 포함)의 비동기 적재량을 만날 수 있으며, JS 코드 의이 부분은 소스 트리 종에서 찾을 수 없으므로 개발 도구에서 브레이크 포인트를 직접 추가 할 수 없습니다. 그런 다음 비동기로드 된 스크립트 "Debugger"에 중단 점을 추가하려면; 현재 작동합니다. GIF 다이어그램을 통해 그 효과를 직접 보자.
4. DOM 브레이크 포인트 디버깅
이름에서 알 수 있듯이 Dom Breakpoint는 DOM 요소에 중단 점을 추가하여 디버깅 목적을 달성하는 것입니다. 실제 사용에서 중단 점을 사용하는 효과는 궁극적으로 JS 로직에서 구현됩니다. 각 DOM 브레이크 포인트의 특정 효과를 차례로 살펴 보겠습니다.
4.1. 하위가 노드 내부에 노드가 변경 될 때 하위 트리 수정을 중단합니다 (하위 트리 수정에서 중단)
오늘날 프론트 엔드 개발이 점점 더 복잡해지면 프론트 엔드 JS 코드가 점점 더 복잡해지고 있으며, 겉보기에 간단한 웹 페이지에는 일반적으로 DOM 노드를 추가, 삭제 및 수정하는 많은 작업과 관련된 많은 JS 코드 세그먼트가 동반됩니다. JS 코드를 통해 직접 코드 세그먼트를 찾기가 어렵지만 개발자 도구의 요소 패널을 통해 관련 DOM 노드를 빠르게 찾을 수 있습니다. 현재 DOM 브레이크 포인트를 통해 스크립트를 찾는 것이 특히 중요합니다. GIF 데모를 살펴 보겠습니다.
위의 그림은 UL 하위 노드 (LI)의 중단 점 트리거 작업을 추가, 삭제 및 교환하는 효과를 보여줍니다. 그러나 자식 노드의 속성과 내용을 수정하는 것은 중단 점을 트리거하지 않을 것입니다.
4.2. 속성 수정을 중단하십시오
반면, 프론트 엔드 처리의 비즈니스 논리가 점점 더 복잡해짐에 따라 일부 데이터에 대한 스토리지 의존성이 강해지고 강해지고 있습니다. DOM 노드의 (사용자 정의) 속성에 임시 데이터를 저장하는 것은 많은 경우 개발자에게 선호되는 방법입니다. 특히 HTML5 표준이 사용자 정의 속성 지원 (예 : 데이터 세트, 데이터-*등)을 향상시킨 후에는 점점 더 많은 속성 설정이 적용되므로 Chrome 개발자 도구도 속성 변경 중단 점 지원을 제공하며 효과는 다음과 같습니다.
이 방법은 또한 하위 노드의 속성에 대한 모든 작업이 노드 자체의 중단 점을 트리거하지는 않는다는 점에 유의해야합니다.
4.3. 노드 제거를 중단하십시오
이 DOM 브레이크 포인트 설정은 매우 간단하며 노드가 삭제 될 때 트리거링 메소드가 매우 명확합니다. 따라서 일반적으로 "parentnode.removechild (childnode)"문을 실행할 때 사례가 있어야합니다. 이 방법은 많이 사용되지 않습니다.
우리가 이전에 소개 한 것은 기본적으로 우리가 일상 개발에 자주 사용하는 디버깅 방법입니다. 그들은 올바르게 사용될 때 일상 개발에서 거의 모든 문제를 처리 할 수 있습니다. 그러나 개발자 도구는 더 많은 상황을 고려하고 그림과 같이 더 많은 방법을 제공합니다.
5. XHR 중단 점
프론트 엔드 개발은 최근 알려지지 않은 명성에서 현재 번영에 이르기까지 지구를 흔들리는 변화를 겪었으며, Ajax는 풍부한 웹 애플리케이션을 주도하며 모바일 웹 섹스 단일 페이지 응용 프로그램은 호황을 누리고 있습니다. 이 모든 것은 XMLHTTPREQUEST 객체와 분리 할 수 없으며 "XHR 브레이크 포인트"는 비동기 목적으로 설계된 중단 점 디버깅 기능입니다.
"XHR 중단 점"오른쪽의 "+"부호를 통해 비동기 중단 점에 중단 점 조건을 추가 할 수 있습니다. 비동기 요청이 트리거 될 때 URL이 트리거되면 JS 로직은 자동으로 중단 점을 생성합니다. 데모는 jQuery가 캡슐화 한 AJAX 메소드를 사용하기 때문에 데모 애니메이션에서는 드레이프 포인트 위치가 시연되지 않습니다. 코드가 압축되었으며 효과가 없습니다. 실제로 XHR 브레이크 포인트는 "xhr.send ()"문에 의해 생성됩니다.
XHR 브레이크 포인트의 힘은 중단 점 규칙을 사용자 정의 할 수 있다는 것입니다. 즉, 특정 배치, 특정 배치, 심지어 모든 비동기 요청에 대한 중단 점을 설정할 수 있습니다. 그러나이 기능은 매일 개발에 많이 사용되지 않는 것 같습니다. 적어도 나는 그것을 많이 사용하지 않습니다. 그것에 대해 생각하면, 대략 두 가지 이유가 있습니다. 첫째, 이러한 유형의 중단 점 디버깅 요구 사항은 일상 사업에 크게 관여하지 않습니다. 둘째,이 단계에서 대부분의 프론트 엔드 개발은 JS 프레임 워크를 기반으로하며 가장 기본적인 jQuery는 AJAX를 잘 캡슐화했습니다. Ajax 방법을 자체적으로 캡슐화하는 사람은 거의 없습니다. 코드 크기를 줄이기 위해 프로젝트는 일반적으로 압축 코드베이스를 선택하여 XHR 브레이크 포인트 추적이 비교적 덜 쉬워집니다.
6. 이벤트 청취자 중단 점
이벤트 리스너 브레이크 포인트, 즉 브레이크 포인트 설정은 이벤트 이름에 따라 수행됩니다. 이벤트가 트리거되면 중단 점은 이벤트가 바인딩되는 위치입니다. 이벤트 리스너 중단 점은 마우스, 키보드, 애니메이션, 타이머, XHR 등을 포함한 모든 페이지 및 스크립트 이벤트를 나열합니다. 이벤트에서 비즈니스 로직을 디버깅하는 데 어려움이 크게 줄어 듭니다.
데모 예제는 클릭 이벤트가 발사 될 때와 설정 타임 아웃이 설정 될 때 중단 점 효과를 보여줍니다. 예제는 클릭 이벤트 브레이크 포인트가 선택된 후 두 버튼을 클릭 할 때 중단 점이 트리거되고 설정 타임 아웃이 설정되면 "세트 타이머"브레이크 포인트가 트리거됨을 보여줍니다.
디버깅은 프로젝트 개발의 매우 중요한 부분입니다. 문제를 신속하게 찾는 데 도움이 될뿐만 아니라 개발 시간을 절약 할 수 있습니다. 다양한 디버깅 방법에 능숙하면 경력 개발에 많은 이점이 있습니다. 그러나 많은 디버깅 방법을 사용하므로 현재 응용 프로그램 시나리오에 적합한 방법을 선택하는 방법에는 경험과 지속적인 시도가 필요합니다.
이것을 썼을 때, 그것은 기본적으로 그것이 본격적으로 나왔다고 말할 수 있습니다. 나는 그것이 당신의 관심을 끌 수 있기를 바랍니다. 그리고 그것이 당신이 조금 감동을 느끼고 조금 친숙하게 느낄 수 있기를 바랍니다. 가장 중요한 것은 기술을 빠르게 향상시키고 숙련 된 사람이되기를 바랍니다.