Chrome 헤드리스 모드

Mathias Bynens

Peter Kvitek

Chrome 헤드리스 모드를 사용하면 표시되는 UI 없이 무인 환경에서 브라우저를 실행할 수 있습니다. 기본적으로 Chrome 없이 Chrome을 실행할 수 있습니다.

헤드리스 모드는 Puppeteer 또는 ChromeDriver와 같은 프로젝트를 통해 브라우저 자동화에 많이 사용됩니다.

헤드리스 모드 사용

헤드리스 모드를 사용하려면 --headless 명령줄 플래그를 전달합니다.

chrome --headless

이전 헤드리스 모드 사용

이전에는 헤드리스 모드가 동일한 Chrome 바이너리의 일부로 제공되는 별도의 대체 브라우저 구현이었습니다. //chrome에서 Chrome 브라우저 코드를 공유하지 않았습니다.

이제 Chrome에 헤드리스 모드와 헤드풀 모드가 통합되었습니다.

현재 다음과 같은 경우 이전 헤드리스 모드를 계속 사용할 수 있습니다.

chrome --headless=old

Puppeteer에서

Puppeteer에서 헤드리스 모드를 사용하려면 다음 단계를 따르세요.

import puppeteer from 'puppeteer';

const browser = await puppeteer.launch({
  headless: 'true', // (default) enables Headless
  // `headless: 'old'` enables old Headless
  // `headless: false` enables "headful" mode
});

const page = await browser.newPage();
await page.goto('https://developer.chrome.com/');

// …

await browser.close();

Selenium-WebDriver

Selenium-WebDriver에서 헤드리스 모드를 사용하려면 다음 단계를 따르세요.

const driver = await env
  .builder()
  .setChromeOptions(options.addArguments('--headless'))
  .build();

await driver.get('https://developer.chrome.com/');

// …

await driver.quit();

다른 언어 바인딩을 사용하는 예를 포함한 자세한 내용은 Selenium팀의 블로그 게시물을 참고하세요.

명령줄 플래그

헤드리스 모드에서는 다음 명령줄 플래그를 사용할 수 있습니다.

--dump-dom

--dump-dom 플래그는 대상 페이지의 직렬화된 DOM을 stdout에 출력합니다. 예를 들면 다음과 같습니다.

chrome --headless --dump-dom https://developer.chrome.com/

이는 curl로 할 수 있는 HTML 소스 코드 출력과는 다릅니다. --dump-dom의 출력을 가져오기 위해 Chrome은 먼저 HTML 코드를 DOM으로 파싱하고, DOM을 변경할 수 있는 <script>를 실행한 후 DOM을 다시 직렬화된 HTML 문자열로 변환합니다.

--screenshot

--screenshot 플래그는 대상 페이지의 스크린샷을 찍고 현재 작업 디렉터리에 screenshot.png로 저장합니다. 이는 --window-size 플래그와 함께 사용하면 특히 유용합니다.

예를 들면 다음과 같습니다.

chrome --headless --screenshot --window-size=412,892 https://developer.chrome.com/

--print-to-pdf

--print-to-pdf 플래그는 타겟 페이지를 현재 작업 디렉터리에 output.pdf라는 PDF로 저장합니다. 예를 들면 다음과 같습니다.

chrome --headless --print-to-pdf https://developer.chrome.com/

원하는 경우 --no-pdf-header-footer 플래그를 추가하여 인쇄 헤더 (현재 날짜 및 시간 포함)와 바닥글 (URL 및 페이지 번호 포함)을 생략할 수 있습니다.

chrome --headless --print-to-pdf --no-pdf-header-footer https://developer.chrome.com/

참고: 이전에는 --no-pdf-header-footer 플래그 뒤에 있는 기능을 --print-to-pdf-no-header 플래그로 사용할 수 있었습니다. 이전 버전을 사용하는 경우 이전 플래그 이름으로 대체해야 할 수 있습니다.

--timeout

--timeout 플래그는 페이지가 아직 로드 중인 경우에도 --dump-dom, --screenshot, --print-to-pdf에 의해 페이지 콘텐츠가 캡처되는 최대 대기 시간 (밀리초)을 정의합니다.

chrome --headless --print-to-pdf --timeout=5000 https://developer.chrome.com/

--timeout=5000 플래그는 Chrome에 PDF를 인쇄하기 전에 최대 5초 동안 기다리라고 지시합니다. 따라서 이 프로세스는 실행하는 데 최대 5초가 소요됩니다.

--virtual-time-budget

--virtual-time-budget는 시간에 종속된 코드(예: setTimeout/setInterval)의 '빨리 감기' 역할을 합니다. 페이지가 시간이 실제로 흐른다고 생각하도록 하면서 브라우저가 페이지의 코드를 최대한 빨리 실행하도록 합니다.

사용법을 알아보려면 setTimeout(fn, 1000)를 사용하여 1초마다 카운터를 증가, 로깅, 표시하는 이 데모를 살펴보세요. 다음은 관련 코드입니다.

<output>0</output>
<script>
  const element = document.querySelector('output');
  let counter = 0;
  setInterval(() => {
    counter++;
    console.log(counter);
    element.textContent = counter;
  }, 1_000);
</script>

1초 후에는 페이지에 '1'이 포함되고, 2초 후에는 '2'가 포함되는 식입니다. 42초 후에 페이지의 상태를 캡처하여 PDF로 저장하는 방법은 다음과 같습니다.

chrome --headless --print-to-pdf --virtual-time-budget=42000 https://mathiasbynens.be/demo/time

--allow-chrome-scheme-url

chrome:// URL에 액세스하려면 --allow-chrome-scheme-url 플래그가 필요합니다. 이 플래그는 Chrome 123부터 사용할 수 있습니다. 예를 들면 다음과 같습니다.

chrome --headless --print-to-pdf --allow-chrome-scheme-url chrome://gpu

디버그

헤드리스 모드에서는 Chrome이 실제로 보이지 않으므로 문제를 해결하기가 까다로울 수 있습니다. 헤드풀 Chrome과 매우 유사한 방식으로 Headless Chrome을 디버그할 수 있습니다.

--remote-debugging-port 명령줄 플래그를 사용하여 헤드리스 모드로 Chrome을 실행합니다.

chrome --headless --remote-debugging-port=0 https://developer.chrome.com/

이렇게 하면 고유한 WebSocket URL이 stdout에 출력됩니다. 예를 들면 다음과 같습니다.

DevTools listening on ws://127.0.0.1:60926/devtools/browser/b4bd6eaa-b7c8-4319-8212-225097472fd9

그러면 헤드풀 Chrome 인스턴스에서 Chrome DevTools 원격 디버깅을 사용하여 헤드리스 타겟에 연결하고 검사할 수 있습니다.

1. chrome://inspect로 이동하여 구성… 버튼을 클릭합니다.
2. WebSocket URL의 IP 주소와 포트 번호를 입력합니다.
   • 이전 예에서는 127.0.0.1:60926를 입력했습니다.
3. 완료를 클릭합니다. 모든 탭과 다른 타겟이 나열된 원격 타겟이 표시됩니다.
4. 검사를 클릭하여 Chrome DevTools에 액세스하고 페이지의 실시간 보기를 비롯한 원격 헤드리스 타겟을 검사합니다.

의견

헤드리스 모드에 관한 여러분의 의견을 기다리겠습니다. 문제가 발생하면 버그를 신고하세요.