chrome.devtools.network

설명

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

매니페스트

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

"devtools_page"

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

개요

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

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

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

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

예

다음 코드는 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를 사용해 보려면 devtools API 예시를 chrome-extension-samples 저장소에서 설치하세요.

유형

Request

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

속성

  • getContent

    void

    Promise

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

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

    (callback?: function) => {...}

    • callback

      function optional

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

      (response: object) => void

      • response

        객체

        대기 중

        응답 본문과 인코딩이 포함된 객체입니다.

        • 콘텐츠

          문자열

          응답 본문의 콘텐츠 (인코딩될 수 있음)

        • encoding

          문자열

          콘텐츠가 인코딩되지 않은 경우 비어 있고, 그렇지 않은 경우 인코딩 이름입니다. 현재는 base64만 지원됩니다.

    • returns

      Promise<object>

      대기 중

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

      Promise는 Manifest V3 이상에서만 지원되며 다른 플랫폼에서는 콜백을 사용해야 합니다.

메서드

getHAR()

Promise 
chrome.devtools.network.getHAR(
  callback?: function,
): Promise<object>

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

매개변수

  • callback

    function optional

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

    (harLog: object) => void

    • harLog

      객체

      HAR 로그입니다. 자세한 내용은 HAR 사양을 참고하세요.

반환 값

  • Promise<object>

    대기 중

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

    Promise는 Manifest V3 이상에서만 지원되며 다른 플랫폼에서는 콜백을 사용해야 합니다.

이벤트

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