자바 스크립트를 스스로 공부하고 다른 언어를 배우는 경험이없는 나와 같은 사람들에게는 처음에는 JavaScript를 디버깅하는 것도 비교적 어려웠습니다. 많은 기본적인 것들이 그 자체로 탐색해야하며,이 과정은 매우 우울합니다.
FireBug를 사용하여 위의 폐쇄 블로그 게시물의 사진을 보여줄 수있는 기회를 얻었습니다. 이는 디버깅 경험을 공유하는 것으로 간주 될 수 있습니다.
샘플 코드는 다음과 같습니다.
코드 사본은 다음과 같습니다.
함수 fn () {
var max = 10;
반환 기능 바 (x) {
if (x> max) {
Console.log (x);
}
}
}
var fl = fn (),
최대 = 100;
fl (15);
FireBug- 스크립트를 선택하십시오
오른쪽의 모니터링 막대는 창 객체 및 변수 Max, FL 및 Fn 일 수 있습니다.
동시에 아래 창의 속성을 볼 수도 있습니다. 위치를 예로 들어 보면 "콘솔"에서 직접 Window.location 출력을 실행하고 위치의 HREF 속성 값을 추가로 출력 할 수 있습니다. 물론, 창 객체의 속성 및 메소드를 참조 할 때 "window.xxx"양식을 사용할 필요는 없지만 "xxx"를 직접 사용하십시오.
요점으로 돌아가서
"스크립트"열로 돌아가서 "브레이크 포인트"를 누르면 "스크립트"열, 디버그 JavaScript 및 변수 값을 봅니다.
먼저 이해할 수있는 몇 가지 개념이 있습니다 : 중단 점, 단계별 항목, 단계별 건너 뛰기 및 단계별 종료. 나는 여기서 설명하지 않을 것입니다.
이번에는 주로 중단 점을 설정하고 단계별로 들어가는 방법을 사용합니다.
왼쪽 줄 마크에서 중단 점을 설정하고 마우스 오른쪽 버튼을 클릭하여 정기적으로 판단 할 수 있습니다.
여러 중단 점을 설정할 수 있으며 "브레이크 포인트"열에서 설정 중단 점을 삭제할 수 있습니다.
여기서 스크립트 태그의 시작 부분에서 직접 포인트를 깨고 페이지를 새로 고칩니다.
현재
1. 오른쪽 모니터링 영역의 원래 창 객체는 이것이되어 창을 가리 킵니다. "콘솔"의 위치는 위치와 동일한 결과를 얻습니다.
2. 글로벌 변수 Max 및 FL은 정의되지 않은 것으로 초기화됩니다.
3. fn ()는 함수 선언입니다. 파서가 기능 선언을 먼저 읽고 코드를 실행하기 전에 (액세스 가능)를 사용할 수있게하므로 (액세스 가능).
오른쪽 상단에있는 "단일 단계 입력"버튼을 클릭하십시오.
코드를 단계별로 실행하고이를 확인하고 각 변수의 값의 변경 및 모니터링 영역의 스택을 봅니다. 권장 블로그를 참조 할 수 있습니다.
그런 다음 이것의 또 다른 예를보십시오
코드는 다음과 같습니다.
코드 사본은 다음과 같습니다.
var name = '창';
var obj = {
이름 : '현지',
getNameFunc : function () {
Console.log (this.name);
return function () {
Console.log (this.name);
};
}
};
var c = obj.getNameFunc ();
기음();
여전히 "Step In", C () 코드 라인을 실행할 때 GetNameFunc를 입력하고, 이는 창 객체에서 OBJ로, 콘솔 출력 'The Local'으로 변경되는 것을 알 수 있습니다.
단계별 실행을 통해 전체 코드의 실행중인 논리를 매우 명확하게 볼 수 있습니다.
위의 것은 JavaScript 클로저를 이해하기 위해 FireBug의 디버깅 기능을 사용하는 방법을 요약 한 것입니다. 나는 당신이 그것을 좋아하기를 바랍니다