요약 및 공유: JavaScript의 중단점을 해결하는 6가지 방법(학습을 위해 수집)

이 기사에서는 6가지 JavaScript 중단점 방법을 요약하고 공유합니다. 배우고 수집해 볼 가치가 있는 방법입니다. 모두에게 도움이 되기를 바랍니다!

디버거는 프론트 엔드 개발에 매우 ​​중요한 도구입니다. 우리가 관심을 갖는 코드에서 멈추고 단일 단계 작업을 통해 논리를 명확하게 할 수 있습니다. 디버거의 품질은 중단점의 품질과 직접적인 관련이 있습니다.

Chrome Devtools와 VSCode는 모두 6개의 중단점 메서드를 지원하는 Debugger를 제공합니다.

일반 중단점

중단하려는 줄의 왼쪽을 클릭하여 중단점을 추가하고 거기에서 실행하면 중단됩니다.

가장 기본적인 중단점 방법은 VSCode와 Chrome Devtools 모두 이 중단점을 지원합니다. [관련 추천 : javascript 학습 튜토리얼]

조건 중단점

코드가 있는 줄의 왼쪽을 마우스 오른쪽 버튼으로 클릭하면 조건 중단점을 추가할 수 있는 드롭다운 박스가 나타납니다.

조건식을 입력하세요. 이 코드 줄에 도달하고 식의 값이 true이면 일반 중단점보다 더 유연합니다.

조건에 따른 이러한 유형의 중단점은 VSCode 및 Chrome Devtools에서도 지원됩니다.

DOM 중단점

Chrome Devtools의 요소 패널에서 해당 요소를 마우스 오른쪽 버튼으로 클릭하고 중단점을 선택하여 DOM 중단점을 추가합니다. 즉, 하위 트리가 변경되거나 속성이 변경되거나 노드가 제거될 때 .이런 일이 발생하면 중지됩니다. DOM 변경을 유발하는 코드를 디버깅하는 데 사용할 수 있습니다.

DOM 디버깅이 포함되므로 Chrome Devtools만이 이러한 종류의 중단점을 지원합니다.

URL 중단점

Chrome Devtools의 소스 패널에 XHR URL 중단점을 추가할 수 있습니다. Ajax 요청이 해당 URL에 해당하면 중단되고 요청 관련 코드를 디버깅하는 데 사용될 수 있습니다.

이 기능은 Chrome Devtools에서만 사용할 수 있습니다.

이벤트 리스너 중단점

Chrome Devtools의 소스 패널에 이벤트 리스너 중단점을 추가하여 이벤트가 발생할 때 중단할 이벤트를 지정할 수도 있으며, 이는 이벤트 관련 코드를 디버깅하는 데 사용할 수 있습니다.

이 기능은 Chrome Devtools에서만 사용할 수 있습니다.

예외 중단점

VSCode의 디버거 패널에서 포착되지 않은 예외 및 포착된 예외를 확인하여 예외 중단점을 추가하고, 예외가 발생했지만 포착되거나 포착되지 않을 때 열을 중단합니다. 예외가 발생하는 일부 코드를 디버깅할 때 유용합니다.

요약

디버거 해당 코드 줄을 직접 클릭하는 일반적인 중단점 외에도 다양한 상황에 따라 중단점을 추가하는 방법이 많이 있습니다.

총 6가지 유형이 있습니다.

• 일반 중단점: 작업이 해당 지점에 도달하면 중지됩니다.
• 조건부 중단점: 작업이 해당 지점에 도달하고 표현식이 true일 때 중지됩니다.
• DOM breakpoint: DOM의 하위 트리가 변경되거나, 속성이 변경되거나, 노드가 삭제될 때 중단됩니다.
• URL 중단점: URL이 변경될 때 중단됩니다. 특정 패턴과 일치합니다. 요청 관련 코드를 디버깅하는 데 사용할 수 있습니다.
• 이벤트 리스너 중단점: 이벤트 관련 코드를 디버깅하는 데 사용할 수 있습니다.
• 예외 중단점: 발생하는 예외는 다음과 같습니다. 포착 여부 캡처 중 중단은 예외가 발생하는 코드를 디버깅하는 데 사용할 수 있습니다

이러한 중단점 메서드의 대부분은 Chrome Devtools(일반, 조건부, DOM, URL, 이벤트 리스너, 예외)에서 지원되며 일부는 VSCode에서 지원됩니다. 디버거(정상, 조건부, 비정상).

다양한 상황의 코드는 다양한 중단점 방법을 사용할 수 있으므로 코드 디버깅이 훨씬 더 효율적입니다. 이 6가지 중단점 방법 중 몇 개를 사용해 보셨나요?

(학습 영상 공유: 웹 프론트엔드 튜토리얼)

위 내용은 요약 및 공유: JavaScript의 중단점을 해결하는 6가지 방법(학습을 위해 수집)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!