Chrome 헤드리스 모드

Mathias Bynens
Peter Kvitek
Peter Kvitek

2017년, Chrome 59에서는 헤드리스 모드를 도입했습니다. 가시적인 UI 없이 사용자 없는 환경에서 브라우저를 실행할 수 있습니다. 기본적으로 Chrome 없이도 Chrome을 실행할 수 있습니다.

헤드리스 모드는 다음과 같은 프로젝트를 통해 브라우저 자동화에 인기 있는 선택입니다. Puppeteer 또는 ChromeDriver. 다음은 헤드리스 모드를 사용하여 PDF 파일을 만드는 간단한 명령줄의 예입니다. 다음과 같습니다.

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

헤드리스 작동 방식

지금 헤드리스의 작동 방식을 검토하기 전에 'old' 헤드리스가 작동했습니다. 이전 명령줄 스니펫은 --headless를 사용합니다. 이는 헤드리스가 단지 시스템의 작업 모드일 뿐이라는 것을 일반 Chrome 브라우저 하지만 놀랍게도 이 주장은 사실이 아니었습니다. 실제로 이전의 Headless는 별도의 대체 브라우저 구현으로 Chrome 바이너리의 일부로 제공됩니다 공유하지 않음 Chrome 브라우저 코드를 //chrome

별도의 헤드리스 브라우저를 구현하고 유지 관리하는 데는 많은 노력이 수반되었습니다. 발생할 수 있습니다 그리고 Headless가 헤드풀 버전에는 없는 고유한 버그와 기능이 있습니다. Chrome으로 이동합니다. 이로 인해 자동 브라우저 테스트에 혼란이 발생했으며, 이로 인해 헤드리스 모드에서는 오류가 발생합니다.

게다가 브라우저에 의존하는 자동 테스트는 모두 헤드리스에서 제외했습니다. 확장 프로그램 설치 다른 브라우저 수준 함수도 마찬가지입니다. Headless가 별도의 자체 구현이 없는 한 지원되지 않았습니다.

이제 Chrome팀은 헤드리스 모드와 헤드풀 모드를 통합했습니다.

새로운 Chrome Headless는 더 이상 별도의 브라우저 구현이 아니며 대신 Chrome과 코드를 공유합니다.

Chrome 112부터 새로운 헤드리스 모드를 사용할 수 있습니다. 이 모드에서 Chrome은 플랫폼 창은 표시하지 않습니다. 다른 모든 함수(기존 및 제한 없이 사용할 수 있습니다

헤드리스 모드 사용

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

chrome --headless=new

현재 이전의 헤드리스 모드는 다음에서 계속 사용할 수 있습니다.

chrome --headless=old

Puppeteer에서

Puppeteer에서 새로운 헤드리스 모드를 선택하려면 다음 단계를 따르세요.

import puppeteer from 'puppeteer';

const browser = await puppeteer.launch({
  headless: 'new',
  // `headless: true` (default) enables old Headless;
  // `headless: 'new'` enables new 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=new'))
  .build();

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

// …

await driver.quit();

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

명령줄 플래그

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

--dump-dom

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

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

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

--screenshot

--screenshot 플래그는 대상 페이지의 스크린샷을 찍어 현재 작업 디렉터리에 있는 screenshot.png 이는 특히 --window-size 플래그와 함께 사용할 수 있습니다.

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

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

--print-to-pdf

--print-to-pdf 플래그는 대상 페이지를 output.pdf이라는 PDF로 저장합니다. 확인할 수 있습니다 예를 들면 다음과 같습니다.

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

필요한 경우 --no-pdf-header-footer 플래그를 추가하여 print를 생략할 수 있습니다. 머리글 (현재 날짜 및 시간 포함)과 바닥글 (URL 및 페이지 포함) 숫자)를 입력합니다.

chrome --headless=new --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=new --print-to-pdf --timeout=5000 https://developer.chrome.com/

--timeout=5000 플래그는 Chrome에 인쇄하기 전에 최대 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=new --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=new --print-to-pdf --allow-chrome-scheme-url chrome://gpu

디버그

헤드리스 모드에서는 Chrome이 사실상 표시되지 않으므로 어렵게 들릴 수 있습니다. 문제를 해결할 수 있습니다 헤드리스 Chrome을 디버그하는 것은 헤드풀 Chrome과 유사합니다.

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

chrome --headless=new --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에 액세스하고 리모컨을 검사합니다. 페이지의 실시간 보기를 비롯한 헤드리스 타겟.

Chrome DevTools가 원격 헤드리스 대상 페이지를 검사할 수 있음

의견

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