javascript debug_javascript 팁에서 DOM 중단점 디버깅 방법 사용에 대한 팁

어떤 학생들은 소스코드 검색을 이용할 수 있다고 말할 것입니다. 실제로 비교적 간단한 페이지의 경우 이 접근 방식이 효과적인 경우가 많습니다. 그러나 비교적 복잡한 구성을 가진 페이지(예를 들어 페이지에 많은 스크립트 파일과 조각이 포함되어 있고, 객체지향 구현의 큰 부분을 사용하고, 구현 코드가 숨겨져 있는 페이지)의 경우 찾기가 그리 원활하지 않을 수 있습니다.

Javascript 디버깅에서는 중단점 디버깅을 자주 사용합니다. 실제로 DOM 구조를 디버깅할 때 DOM 중단점이라는 중단점 방법을 사용할 수도 있습니다.

구체적인 사용법:

1. Chrome 브라우저에서 개발자 도구를 열고 먼저 페이지 요소를 선택한 다음 마우스 오른쪽 버튼을 클릭하고 메뉴에서 "Break on..."을 클릭한 다음 "속성 수정"을 확인합니다. 페이지를 새로 고침합니다. 요소의 속성이 변경되면 스크립트 실행이 일시 중지되고 변경된 위치가 검색됩니다.

2. Firebug가 설치된 Firefox 브라우저에서 Firebug를 열고 "HTML" 탭으로 전환한 후 모니터링해야 하는 DOM 요소를 선택하고 마우스 오른쪽 버튼을 클릭한 다음 "속성이 변경되면 중단"을 선택합니다. 메뉴. HTML 중단점이 성공적으로 추가되었습니다. 페이지를 새로 고친 후 Firebug는 요소의 속성을 변경하는 코드를 찾는 데도 도움이 됩니다.

Chrome과 Firebug는 DOM 요소 자체의 속성 변경 사항을 모니터링하는 것 외에도 하위 요소의 변경 사항과 요소가 삭제되는 시기도 모니터링할 수 있습니다.