chrome.devtools.network

설명

chrome.devtools.network API를 사용하여 개발자 도구의 Network 패널에 표시되는 네트워크 요청에 관한 정보를 가져옵니다.

네트워크 요청 정보는 HTTP Archive 형식 (HAR)으로 표시됩니다. HAR 설명은 이 문서의 범위를 벗어납니다. HAR v1.2 사양을 참고하세요.

HAR 측면에서 chrome.devtools.network.getHAR() 메서드는 전체 HAR 로그를 반환하는 반면 chrome.devtools.network.onRequestFinished 이벤트는 이벤트 콜백에 HAR 항목을 인수로 제공합니다.

효율성상의 이유로 요청 콘텐츠는 HAR의 일부로 제공되지 않습니다. 요청의 getContent() 메서드를 호출하여 콘텐츠를 가져올 수 있습니다.

페이지가 로드된 후 개발자 도구 창이 열리면 getHAR()에서 반환된 항목 배열에 일부 요청이 누락될 수 있습니다. 페이지를 새로고침하여 모든 요청을 가져옵니다. 일반적으로 getHAR()에서 반환된 요청 목록은 Network 패널에 표시된 목록과 일치해야 합니다.

개발자 도구 API 사용에 관한 일반적인 소개는 DevTools API 요약을 참고하세요.

매니페스트

이 API를 사용하려면 다음 키를 매니페스트에 선언해야 합니다.

"devtools_page"

예

다음 코드는 40KB보다 큰 모든 이미지의 URL을 로드될 때 로깅합니다.

chrome.devtools.network.onRequestFinished.addListener(
  function(request) {
    if (request.response.bodySize > 40*1024) {
      chrome.devtools.inspectedWindow.eval(
          'console.log("Large image: " + unescape("' +
          escape(request.request.url) + '"))');
    }
  }
);

이 API를 사용해 보려면 chrome-extension-samples 저장소에서 devtools API examples를 설치하세요.

유형

Request

문서 리소스 (스크립트, 이미지 등)에 대한 네트워크 요청을 나타냅니다. 참고용 HAR 사양을 참고하세요.

속성

  • getContent

    void

    응답 본문의 콘텐츠를 반환합니다.

    getContent 함수는 다음과 같습니다. 

    () => {...}

    • returns

      Promise<object>

      대기 중

      요청이 완료될 때 응답 본문을 수신하는 함수입니다.

메서드

getHAR()

chrome.devtools.network.getHAR(): Promise<object>

알려진 모든 네트워크 요청이 포함된 HAR 로그를 반환합니다.

반환 값

  • Promise<object>

    대기 중

    요청이 완료될 때 HAR 로그를 수신하는 함수입니다.

이벤트

onNavigated

chrome.devtools.network.onNavigated.addListener(
  callback: function,
)

검사된 창이 새 페이지로 이동할 때 발생합니다.

매개변수

  • callback

    함수

    callback 매개변수는 다음과 같습니다. 

    (url: string) => void

    • URL

      문자열

onRequestFinished

chrome.devtools.network.onRequestFinished.addListener(
  callback: function,
)

네트워크 요청이 완료되고 모든 요청 데이터를 사용할 수 있을 때 발생합니다.

매개변수

  • callback

    함수

    callback 매개변수는 다음과 같습니다. 

    (request: Request) => void