프로토콜 모니터: CDP 요청 보기 및 전송

Dale St. Marthe
Dale St. Marthe

프로토콜 모니터를 사용하여 DevTools에서 실행한 모든 CDP 요청 및 응답을 확인하고 CDP 명령어를 직접 전송합니다.

개요

Chrome DevTools는 Chrome DevTools 프로토콜 (CDP)을 사용하여 Chrome 브라우저를 계측, 검사, 디버그, 프로파일링합니다. 개발자는 프로토콜 모니터를 사용하여 CDP를 프로그래매틱 방식으로 사용할 수 있습니다.

프로토콜 모니터를 사용하면 다음을 수행할 수 있습니다.

  • CDP 요청 및 응답 기록
  • CDP 메시지 검사
  • CDP 메시지 저장
  • CDP 명령어 전송

프로토콜 모니터 열기

프로토콜 모니터를 열려면 다음 단계를 따르세요.

  1. 실험이 사용 설정되어 있는지 확인합니다. 설정 > 실험에서 프로토콜 모니터 체크박스를 선택합니다.

  2. 다음을 눌러 명령어 메뉴를 엽니다.

    • macOS: Command+Shift+P
    • Windows, Linux, ChromeOS: Control+Shift+P 명령어 메뉴:
  3. Protocol monitor를 입력하고 Show Protocol monitor를 선택한 다음 Enter 키를 누릅니다. DevTools 창 하단에 프로토콜 모니터 패널이 표시됩니다.

또는 오른쪽 상단에서 옵션 더보기 > 도구 더보기 > 프로토콜 모니터를 선택합니다.

CDP 요청 및 응답 기록

프로토콜 모니터를 열면 현재 페이지의 CDP 메시지 녹화가 자동으로 시작됩니다. 페이지를 새로고침하거나 Devtools를 닫아도 프로토콜 모니터는 계속 녹화합니다.

녹화를 중지하거나 시작하려면 패널 상단의 작업 표시줄 왼쪽에 있는 녹화 버튼을 클릭합니다.

프로토콜 모니터 패널의 녹음 버튼

CDP 메시지 검사

프로토콜 모니터가 기록하면 CDP 메시지가 패널 왼쪽의 표에 로깅됩니다.

메서드, 요청 또는 응답 셀을 클릭하여 패널 오른쪽에 있는 요청 또는 응답 데이터의 세부정보 보기를 엽니다.

프로토콜 모니터 패널에 강조 표시된 메서드입니다.

각 헤더 탭을 클릭하여 요청 또는 응답 데이터 간에 전환합니다.

Method 열에서 값을 마우스 오른쪽 버튼으로 클릭하면 컨텍스트 기반 옵션이 표시됩니다.

CDP 메시지 지우기 및 다운로드하기

기록된 모든 CDP 메시지를 삭제하려면 작업 표시줄에서 지우기 버튼을 클릭합니다.

녹음된 메시지를 JSON 파일로 다운로드하려면 다운로드 를 클릭합니다.

원시 CDP 명령어 전송

프로토콜 모니터를 통해 CDP 명령어를 전송하는 방법에는 크게 두 가지가 있습니다.

  • 명령어에 매개변수가 필요하지 않은 경우 프로토콜 모니터 하단의 입력란에 명령어를 입력한 다음 Enter 키를 누릅니다(예: Page.captureScreenshot).

    명령어에 매개변수가 필요한 경우 JSON 형식(예: {"cmd":"Page.captureScreenshot","args":{"format": "jpeg"}})으로 제공합니다.

    입력란 오른쪽의 드롭다운에서 대상을 지정합니다.

프로토콜 모니터에서 강조 표시된 대상 드롭다운

  • CDP 편집기를 사용하여 명령어를 수정하고 실행할 수도 있습니다.

    1. 명령어 입력란 옆에 있는 CDP 명령어 편집기 표시 버튼을 클릭하여 명령어 편집기를 엽니다.
    2. 드롭다운 목록에서 대상을 선택하고 명령 프롬프트 옆에 CDP 명령어를 입력합니다. 자동 완성 기능이 관련 옵션을 제공합니다. 사용할 명령어를 선택합니다. 프로토콜 모니터의 명령어 입력입니다.
    3. CDP 명령어를 입력하면 편집기에서 프로토콜 정의를 기반으로 구조화된 매개변수 형식을 만듭니다. 이러한 매개변수를 작성하여 명령어와 함께 전송합니다. 작성할 서비스 워커 관련 매개변수가 나열된 매개변수 입력
    4. 명령어 전송 버튼을 클릭하거나 Ctrl + Enter 키를 눌러 명령어를 전송합니다.

표에서 명령어를 수정하고 다시 보낼 수도 있습니다. 표에서 항목을 마우스 오른쪽 버튼으로 클릭하고 드롭다운 메뉴에서 수정 및 다시 전송을 선택합니다. 이렇게 하면 CDP 편집기가 자동으로 다시 열리고 선택한 명령어로 미리 채워집니다.

CDP 편집기에 관한 자세한 내용은 새로운 명령어 편집기로 Chrome Devtools 프로토콜 (CDP) 명령어를 효율적으로 작성을 참고하세요.