개발자 리소스: 소스 맵 보기 및 수동으로 로드

Sofia Emelianova
Sofia Emelianova

Developer Resources 패널을 사용하여 DevTools가 소스 맵을 성공적으로 로드하는지 확인합니다. 필요한 경우 수동으로 로드할 수 있습니다.

개요

DevTools를 열면 소스 맵을 로드하려고 시도합니다(있는 경우). 실패할 경우 콘솔에 다음과 유사한 오류가 기록됩니다.

콘솔의 소스 맵 로드 오류

개발자 리소스 패널에서 소스 맵 로드 상태를 볼 수 있으며 소스 맵을 수동으로 로드할 수도 있습니다.

개발자 리소스를 열고 상태 확인

소스 맵의 로드 상태를 확인하려면 다음 단계를 따르세요.

  1. DevTools를 열고 소스 맵을 사용 설정한 다음 more_vert > 도구 더보기 > 개발자 리소스.
  2. 표에서 다음 열의 값을 확인합니다.

    • 상태: 소스 맵 로드의 성공 또는 실패 여부를 확인할 수 있습니다.
    • Error: 오류 메시지를 읽습니다(있는 경우).

상태 및 오류 열

URL 또는 오류로 리소스 필터링

관심 있는 소스 맵에 집중하려면 상단의 텍스트 상자에 텍스트를 입력하여 URL 또는 오류 메시지에 이 텍스트가 포함되지 않은 소스 맵을 필터링하세요.

'js'를 포함하지 않는 소스 맵 필터링 을 입력합니다.

소스 맵 로드 문제 해결

기본적으로 DevTools는 웹사이트가 아닌 소스 맵을 요청합니다. 이러한 요청은 교차 출처로 취급될 수 있으며 전송되지 않을 수 있습니다.

먼저 웹사이트 요청 소스 맵을 만들려면 개발자 리소스의 오른쪽 상단에서 체크박스입니다. 웹사이트 로드를 선택합니다.

'로드 스루 웹사이트' 체크박스

소스 맵을 로드하는 데 여전히 문제가 있으면 아래에 설명된 대로 수동으로 로드해 보세요.

수동으로 소스 맵 로드

로드에 실패하거나 예를 들어 소스 맵이 없는 프로덕션 환경의 웹사이트에서 원본 코드를 디버그하려는 경우 수동으로 로드할 수 있습니다.

  1. 소스 맵을 지원하는 도구를 사용하여 소스 맵을 생성합니다.
  2. 소스 맵을 로컬로 호스팅합니다.
  3. 페이지에서 DevTools를 열고 소스 맵을 사용 설정합니다.
  4. Sources에서 배포된 (처리된) 파일을 열고 Editor에서 마우스 오른쪽 버튼으로 클릭한 다음 메뉴에서 Add source map을 선택합니다.

    '소스 맵 추가' 선택 선택합니다.

  5. 텍스트 상자에서 소스 맵 URL을 지정하고 추가를 클릭합니다.

    소스 맵 URL 지정

  6. 소스 맵이 개발자 리소스에 표시되고 원본 파일 (배포된 파일에서 매핑됨)이 파일 트리에 표시되었는지 확인합니다.

    수동으로 로드된 소스 맵은 파일 트리에 원본 파일을 표시합니다.

  7. 원본 파일을 디버그합니다.