> 웹 프론트엔드 > 프런트엔드 Q&A > JavaScript 중단점의 유형은 무엇입니까?

JavaScript 중단점의 유형은 무엇입니까?

青灯夜游
풀어 주다: 2022-01-12 13:46:28
원래의
2290명이 탐색했습니다.

JavaScript 중단점 유형: 1. 소스 중단점 2. 디버거 중단점 3. 디버깅 목적을 달성하기 위해 DOM 요소에 중단점을 추가합니다. 5. 이벤트 리스너 중단점.

JavaScript 중단점의 유형은 무엇입니까?

이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

JS 중단점 분류

1. JS 중단점

(1) 소스 중단점

소스 중단점을 추가하는 과정은 "F12(Ctrl + Shift + I) 개발 도구 열기" - - "소스 메뉴 클릭" - "왼쪽 트리에서 해당 파일 찾기" - "라인 번호 열 클릭"을 클릭하면 현재 라인에 중단점 추가/삭제 작업이 완료됩니다. 중단점이 추가된 후 페이지를 새로 고치면 JS 실행이 중단점 위치에서 중지됩니다. 소스 인터페이스에서 현재 범위의 모든 변수와 값을 볼 수 있으며, 질문 디자인을 완료하려면 각 값만 확인하면 됩니다. 확인 요구 사항

소스에서 조건부 중단점을 설정할 수도 있습니다. 중단점 위치의 마우스 오른쪽 버튼 클릭 메뉴에서 "중단점 편집..."을 선택하여 중단점을 트리거하는 조건을 설정하면 중단점이 됩니다. 표현식이 true인 경우에만 트리거됩니다.

(2) 디버거 중단점

코드에 "debugger;" 문을 추가하면 이 문에 코드가 실행될 때 자동으로 해당 지점이 중단됩니다.

2. break

DOM 중단점을 클릭합니다. 이름에서 알 수 있듯이 디버깅 목적을 달성하기 위해 DOM 요소에 중단점을 추가하는 것입니다. 중단점을 실제로 사용할 때 효과는 궁극적으로 JS 로직 내에서 구현됩니다.

DOM 중단점 추가 방법: Elements-요소 요소 마우스 오른쪽 버튼 클릭-Break on-중단점 선택

(1) 하위 트리 수정 하위 트리 수정 하위 트리 수정 중단점

주로 순서 추가, 삭제, 교환과 같은 작업에 사용됩니다. 하위 노드는 있지만 하위 트리 수정은 중단점을 트리거하지 않습니다.

(2) 속성 수정 노드 속성 중단점

(3) 노드 제거 노드 제거 중단점

3, XHR 중단점

XHR 중단점

이름에서 알 수 있듯이 비동기 요청에서 보낸 URL이 중단점 조건을 충족하면 중단점이 트리거됩니다.

Breakpoint 방법: 소스 - 이벤트 리스너 중단점은 이벤트 이름을 기준으로 설정됩니다. 이벤트가 트리거되면 중단점은 이벤트가 바인딩되는 위치로 설정됩니다. 이벤트 리스너 중단점은 마우스, 키보드, 애니메이션, 타이머, XHR 등을 포함한 모든 페이지 및 스크립트 이벤트를 나열합니다. (위치는 일반적으로 소스의 XHR/fetch Breakpoints 아래에 있습니다)

[관련 권장 사항: javascript 학습 튜토리얼]

위 내용은 JavaScript 중단점의 유형은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿