Chrome 개발자 도구에서 가져오기 중단점을 효과적으로 사용하기

디버깅 도구는 코드를 분석하고 오류를 식별하는 데 매우 중요합니다. 크롬 개발자 도구는 네트워크 요청을 모니터링하고 애플리케이션이 서버와 통신하는 방식을 이해하는 데 도움이 되는 다양한 기능을 제공합니다. 이 가이드에서는 네트워크 요청이 발생하는 즉시 코드를 중지할 수 있는 가져오기 중단점에 중점을 두겠습니다. 이를 통해 앱 작동 방식에 대한 심층적인 인사이트를 얻고 문제를 신속하게 해결할 수 있습니다.

주요 결과

• 가져오기 중단점을 사용하면 모든 네트워크 요청에서 코드를 중지할 수 있습니다.
• 특정 URL을 입력하여 특정 방식으로 동작을 제어할 수 있습니다.
• 개발자 도구의 네트워크 섹션에서 어떤 요청이 누구에 의해 트리거되었는지 추적할 수 있습니다.

단계별 지침

1. 개발자 도구에 액세스

가져오기 중단점으로 작업하려면 먼저 Chrome 개발자 도구를 열어야 합니다. Chrome의 오른쪽 상단에 있는 점 3개 메뉴를 클릭한 다음 '기타 도구'로 이동하고 마지막으로 '개발자 도구'로 이동하면 됩니다. 또는 키보드 단축키(Windows의 경우 Ctrl + Shift + I, Mac의 경우 Cmd + Option + I)를 사용할 수도 있습니다.

2. 소스로 이동

개발자 도구에서 "요소", "콘솔", "소스", "네트워크" 등의 탭을 찾을 수 있습니다. 이제 프로젝트의 소스에 액세스하려면 "소스" 탭을 클릭해야 합니다. 여기에서 JavaScript 코드를 보고 중단점을 설정할 수 있습니다.

3. 가져오기 중단점 설정

"소스" 탭에는 "XHR" 또는 "불러오기 중단점" 섹션이 있습니다. 가져오기 중단점을 설정하려면 해당 버튼을 클릭하여 새 중단점을 추가합니다. 중단점을 특정하기 위해 URL 또는 URL의 일부를 입력하라는 메시지가 표시됩니다. 그러나 아무 것도 입력하지 않으면 수행되는 모든 가져오기 요청에 대해 중단점이 활성화됩니다.

4. 중단점 트리거

가져오기 중단점이 올바르게 설정되었는지 테스트하려면 데이터 쿼리를 수행하는 버튼을 클릭하는 등 가져오기 요청을 트리거하는 작업을 수행합니다. 중단점이 올바르게 작동하면 코드가 이 지점에서 중지되고 코드의 현재 상태가 표시됩니다.

5. 네트워크 요청 확인

코드가 중지되면 변수의 현재 상태를 확인하고 네트워크 요청을 분석할 수 있는 옵션이 있습니다. 여기에서 예상되는 데이터가 검색되는지 확인할 수 있습니다. 예를 들어, 코드에서 가져오기 요청을 실행하는 변수를 관찰하면 올바른 엔드포인트가 처리되고 있는지 확인할 수 있습니다.

6. 특정 중단점 구성

특정 가져오기 요청에만 관심이 있는 경우 새 중단점을 추가하고 특정 URL을 지정할 수 있습니다. 예를 들어 URL을 "main.js"로 설정할 수 있습니다. 그런 다음 이 URL에 대한 가져오기 요청을 실행하면 중단점이 트리거됩니다. URL을 지정하지 않으면 모든 네트워크 요청에 중단점이 적용되므로 일반적인 문제를 조사하는 데 유용합니다.

7. 개시자 확인

가져오기 요청의 원인을 자세히 알아보려면 개발자 도구의 '네트워크' 탭으로 전환할 수 있습니다. 여기에서 모든 가져오기 요청의 목록을 볼 수 있습니다. "개시자" 열에는 코드의 어느 부분이 요청을 트리거했는지 표시됩니다. 이러한 항목 중 하나를 클릭하면 "소스" 탭의 해당 줄로 이동합니다.

8. 마지막 확인

URL을 변경하는 등 코드를 조정한 경우 개발자 도구를 다시 로드하여 변경 사항을 적용해야 합니다. 페이지를 새로 고치면 쉽게 할 수 있습니다. 그런 다음 가져오기 요청이 다시 성공적으로 작동하고 중단점이 원하는 대로 트리거되는지 확인합니다.

요약

이 가이드에서는 Chrome 개발자 도구에서 가져오기 중단점을 사용하여 네트워크 요청에서 코드를 일시 중지하는 방법을 배웠습니다. 코드의 특정 지점에서만 중지하도록 특정 중단점을 설정하는 방법, 개발자 도구에서 읽을 수 있는 정보 및 가져오기 요청을 트리거한 사용자를 추적하는 방법을 배웠습니다.