CDP는 브라우저 내부(DOM, 렌더링, 네트워크, JS 실행 등)를 외부에서 제어하거나 모니터링할 수 있게 해주는 프로토콜이다.
HTML을 작성해서 동영상을 렌더링할 수 있는 라이브러리인 hyperframes가 내부적으로 어떻게 작동하는지 궁금해서 찾아보다가 알게되었다. (=Puppeteer(CDP)로 HTML 페이지를 프레임 단위로 캡처한 뒤 FFmpeg으로 MP4로 인코딩하는 방식)

사용 예시

CDP를 직간접적으로 사용하는 대표적인 도구들:

• Chrome DevTools — 브라우저 개발자 도구 자체가 CDP로 브라우저와 통신한다
• Puppeteer / Playwright — CDP 위에서 동작하는 브라우저 자동화 라이브러리
• Lighthouse — CDP로 데이터를 수집해 성능을 측정한다

사용방법(in Mac)

프로토콜 열기

터미널에서 아래 명령어 입력

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome \
  --remote-debugging-port=9222 \ # 9222 포트로 열기
  --user-data-dir=/tmp/chrome-debug # 안넣으면 기존 크롬 프로필과 충돌

실행 확인하기

브라우저에서 http://localhost:9222/json/version에서 브라우저 정보가 나오면 성공

연결 후 할 수 있는 것들

WebSocket으로 명령을 보내 페이지 이동, 스크린샷 캡처, JS 실행 등을 할 수 있다.