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 원격 디버깅을 사용하여 헤드리스 타겟에 연결하고 검사할 수 있습니다.
chrome://inspect로 이동하여 구성… 버튼을 클릭합니다.- WebSocket URL의 IP 주소와 포트 번호를 입력합니다.
- 이전 예에서는
127.0.0.1:60926를 입력했습니다.
- 이전 예에서는
- 완료를 클릭합니다. 모든 탭과 다른 타겟이 나열된 원격 타겟이 표시됩니다.
- 검사를 클릭하여 Chrome DevTools에 액세스하고 페이지의 실시간 보기를 비롯한 원격 헤드리스 타겟을 검사합니다.
의견
헤드리스 모드에 관한 여러분의 의견을 기다리겠습니다. 문제가 발생하면 버그를 신고하세요.