Chrome 헤드리스 모드

Mathias Bynens

Peter Kvitek

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

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

헤드리스 모드 사용

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

chrome --headless

이전 헤드리스 모드 사용

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

이제 Chrome에 통합된 헤드리스 및 헤드풀 모드가 있습니다.

Chrome 132.0.6793.0부터 이전 헤드리스 모드는 chrome-headless-shell이라는 독립형 바이너리로만 제공되며 여기에서 다운로드할 수 있습니다.

Puppeteer에서

Puppeteer에서 헤드리스 모드를 사용하려면 다음을 실행하세요.

import puppeteer from 'puppeteer';

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

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

// …

await browser.close();

Puppeteer에서 Headless를 사용하는 방법에 관한 자세한 내용은 여기에 있는 리소스를 참고하세요.

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)를 사용하여 매초 카운터를 증가시키고, 기록하고, 표시하는 이 데모를 살펴보겠습니다. 관련 코드는 다음과 같습니다.

<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은 헤드풀 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에 액세스하고 페이지의 라이브 뷰를 비롯한 원격 헤드리스 타겟을 검사합니다.

의견

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