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

Dale St. Marthe
Dale St. Marthe

프로토콜 모니터를 사용하여 DevTools에서 작성한 모든 CDP 요청과 응답을 확인하고 CDP 명령어를 직접 전송하세요.

개요

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

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

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

프로토콜 모니터 열기

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

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

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

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

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

CDP 요청 및 응답 기록

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

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

프로토콜 모니터 패널의 기록 버튼

CDP 메시지 검사

프로토콜 모니터 레코드와 마찬가지로 CDP 메시지는 패널 왼쪽의 테이블에 로깅됩니다.

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

프로토콜 모니터 패널에 강조표시된 방법

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

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

CDP 메시지 삭제 및 다운로드

기록된 CDP 메시지를 모두 삭제하려면 작업 모음에서 차단 삭제 버튼을 클릭합니다.

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

원시 CDP 명령어 전송

프로토콜 모니터를 통해 CDP 명령어를 보내는 방법에는 두 가지가 있습니다.

  • 명령어에 매개변수가 필요하지 않으면 Protocol Monitor 하단의 입력란에 명령어를 입력한 다음 Enter 키를 누릅니다(예: Page.captureScreenshot).

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

    입력 필드 오른쪽의 드롭다운은 타겟을 지정합니다.

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

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

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

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

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