10
필자는 Firebug를 사용하여 JavaScript를 통해 수백 번 이상 디버깅을 했었습니다. 파이어 버그가 자바 스크립트/DOM 디버깅을 정확히 처리하는 방법을 알고 싶습니다.Firebug는 내부적으로 어떻게 작동합니까?
말 일부 메서드에서 중단 점을 설정하고 디버깅을 시작한다고 가정 해보십시오. 거기에 무슨 일이 일어나고 있는지 알고 싶습니까?
A
답변
8
줄을 클릭하여 중단 점을 설정할 때 Firebug는 페이지를 다시로드 할 때 파일 URL과 줄 번호를 기록합니다. 그런 다음 내부 데이터 구조에서 URL/라인을 조회하여 어떤 자바 스크립트 함수 (Mozilla에서 '스크립트'라고 함)를 중단 점으로 만들 것인지 결정합니다. 다음으로 모질라 플랫폼 함수를 호출하여 라인 번호를 함수 시작과 관련된 프로그램 카운터에 매핑합니다. 마지막으로 플랫폼을 호출하여 프로그램 카운터에 중단 점을 설정합니다.
위로 Script 패널을 활성화하면 Firebug가 플랫폼에 콜백을 등록합니다. onBreak 중 하나는 중단 점을 처리합니다. 플랫폼이 JS 코드를 실행하면 내부 구조를 검사하여 현재 프로그램 카운터에 중단 점 세트가 있는지 확인합니다. 그렇다면 JS 실행을 멈추고 방화 광 호출을 다시 호출합니다.
그런 다음 Firebug는 중단 점을보고이 중단 점에서 디버거 UI를 지원하는 올바른 데이터가있는 경우 조건부 중단 점인지 결정합니다. 조건이 좋으면 플랫폼에 디버깅 일시 중단, 웹 페이지에 대한 Javascript 실행 및 웹 페이지에 대한 플랫폼 이벤트를 알립니다. 그런 다음 중단 점에 대한 소스 파일을 표시하고 해당 행을 강조 표시합니다. 조건이 좋지 않으면 계속됩니다.
플랫폼이 프로그램 카운터 매핑에 올바른 행 번호를 지원하지 않을 때 복잡한 부분이 나타납니다. 예를 들어, Firebug는 eval() 및 브라우저 생성 이벤트 핸들러를 처리 할 수있는 많은 코드를 제공합니다.
내 의견으로는 Firebug 뉴스 그룹에서 더 좋은 질문이 있습니다.
+2
자세한 답변을 보내 주셔서 감사합니다. 나는 이렇게 생각하는 그런 질문을위한 아주 좋은 장소라고 생각하지. 수많은 기술에는 자체 뉴스 그룹과 전자 메일 요약 및 포럼이 있지만 여기에서 정보를 훨씬 쉽게 찾을 수 있습니다. 새 프로젝트를 시작한다면 나는 공식적인 Q & A 사이트가 될 것입니다. –
2
방화 광은 디버거 서비스 인 jsdIDebuggerService을 사용하고 있습니다.
이 페이지는 firebug internals에 대한 정보와 소스 코드에 대한 링크를 포함합니다. 모든 세부 사항을 정확하게 지정하지는 않지만 출발점으로 사용해야합니다.
또한 커서가 커서를 가리키면 요소가 강조되도록 웹 페이지를 어떻게 수정합니까? – djondal