JS를 디버깅하는 방법은 무엇입니까? 중단점을 사용하여 js를 디버깅하는 방법

이 글의 내용은 js를 디버깅하는 방법에 관한 것입니다. 중단점을 사용하여 js를 디버깅하는 방법에는 특정 참조 값이 있습니다. 도움이 필요한 친구가 참고할 수 있기를 바랍니다.

저희 프로젝트를 개발하다 보면 알 수 없는 버그가 자주 나타나는데, 때로는 이러한 버그를 찾기 어려울 때도 있기 때문에 중단점 디버깅을 사용하여 프로그램을 어딘가에서 멈추고 프로그램에 오류가 있는지 하나씩 확인해야 합니다. . 우리 모두는 Chrome 브라우저에서 중단점 디버깅을 수행합니다. 먼저 Google Chrome으로 프로젝트를 엽니다.

F12를 눌러 Google 디버깅 인터페이스를 연 다음 소스를 선택하세요. 프로젝트의 JS 코드가 여기에 표시됩니다. 디버깅해야 하는 js 파일을 선택하세요.

먼저 중단점을 수동으로 추가합니다.

중단점 추가:

다음 버튼의 의미를 소개합니다.

먼저 빨간색 영역 왼쪽에서 오른쪽으로:

스크립트 실행 일시 중지/재개: 스크립트 실행 일시 중지/재개(프로그램 실행은 다음에서 중지됩니다.) 중단점).

다음 함수 호출 건너뛰기: 다음 함수 호출을 실행합니다(다음 줄로 점프).

다음 함수 호출 실행: 현재 함수를 입력합니다.

현재 기능에서 나가기: 현재 실행 중인 기능에서 빠져 나옵니다.

모든 중단점 비활성화/활성화: 모든 중단점을 끄거나 켭니다(취소되지 않음).

예외 일시 중지: 예외에 대한 자동 중단점 설정입니다.

녹색 영역:

범위: 현재 중단점의 범위를 표시합니다.

watch: + 기호를 클릭하여 모니터링해야 하는 변수나 표현식을 추가합니다.

Call Stack 현재 중단점의 환경 호출 스택을 표시합니다.

Breakpoints 현재 js 중단점 목록, 추가된 각 중단점은 여기에 표시됩니다. 목록에서 중단점을 클릭하여 콘텐츠 영역에서 중단점을 찾으세요

DOM 중단점 현재 DOM 중단점 목록 목록

XHR 중단점 현재 xhr 중단점 목록에서 +를 클릭할 수 있습니다. 중단점을 추가할 수 있는 권한

이벤트 리스너 중단점 이벤트 리스너 중단점 설정

이벤트 리스너 현재 이벤트 리스너 중단점 목록

디버깅 시작:

디버깅 인터페이스:

디버깅 인터페이스에서 코드의 각 변수에 마우스를 올리면 이 변수의 특정 정보가 표시되므로 점진적으로 BUG 문제를 해결할 수 있습니다.

또한 중단점을 추가하는 방법도 있는데, 이는 코드에 디거거를 추가하는 것입니다. 그것은 중단되었습니다. 코드 실행이 여기서 중지됩니다

관련 권장 사항:

Chrome+JS는 중단점 디버깅을 구현합니다

js 디버깅 시리즈 중단점 및 동적 디버깅 [기본]_javascript 기술

js 디버깅 Google 개발자 도구

위 내용은 JS를 디버깅하는 방법은 무엇입니까? 중단점을 사용하여 js를 디버깅하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!