Em 2017, o Chrome 59 lançou o modo headless, que permitem executar o navegador em um ambiente autônomo, sem nenhuma interface visível. Basicamente, era possível executar o Chrome sem ele.
O modo headless é uma escolha comum para automação de navegadores, usando projetos como Puppeteer ou ChromeDriver. Este é um exemplo mínimo de linha de comando usando o modo headless para criar um arquivo PDF de um determinado URL:
chrome --headless --print-to-pdf https://developer.chrome.com/
Como o Headless funciona
Antes de conferir como o Headless funciona, é importante entender como o
“antigo” A headless funcionou. O snippet de linha de comando anterior usa o --headless
, sugerindo que headless é apenas um modo de operação do
navegador Chrome normal. Surpreendentemente, isso não é realmente verdade.
Na verdade, o antigo Headless era
uma implementação separada em navegador alternativo,
que foi enviado como parte do mesmo binário do Chrome. Não compartilha
o código do navegador Chrome
//chrome
Implementar e manter um navegador headless separado trouxe muitos o overhead de engenharia. E, como o Headless era um implementação, ele tinha os próprios bugs e recursos que não estavam presentes no Chrome. Isso criava confusão para os testes automatizados do navegador, o que pode passar mas falha no modo headless ou vice-versa.
Além disso, a headless exclui qualquer teste automatizado que dependia do navegador instalação da extensão. O mesmo vale para outras funções no nível do navegador. a menos que o headless tivesse sua própria implementação separada, ele não teria suporte.
A equipe do Chrome unificou os modos headless e headful.
O novo modo headless está disponível a partir do Chrome 112. Nesse modo, o Chrome cria, mas não exibe nenhuma janela de plataforma. Todas as outras funções, existentes e no futuro, estão disponíveis sem limitações.
Usar o modo headless
Para usar o novo modo headless, transmita a flag de linha de comando --headless=new
:
chrome --headless=new
Por enquanto, o antigo modo headless ainda está disponível com:
chrome --headless=old
No Puppeteer
Para ativar o novo modo headless no 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();
No Selenium-WebDriver
Para usar o novo modo headless no Selenium-WebDriver:
const driver = await env
.builder()
.setChromeOptions(options.addArguments('--headless=new'))
.build();
await driver.get('https://developer.chrome.com/');
// …
await driver.quit();
Consulte a postagem do blog da equipe do Selenium (em inglês) para mais informações, incluindo exemplos que usam outras vinculações de linguagem.
Sinalizações de linha de comando
As sinalizações de linha de comando a seguir estão disponíveis no novo modo headless.
--dump-dom
A sinalização --dump-dom
imprime o DOM serializado da página de destino na stdout.
Exemplo:
chrome --headless=new --dump-dom https://developer.chrome.com/
Isso é diferente de imprimir o código-fonte HTML, que é possível fazer
curl
: Para trazer a saída de --dump-dom
, o Chrome primeiro analisa o HTML
em um DOM, executa qualquer <script>
que possa alterar o DOM
transforma esse DOM de volta em uma string serializada de HTML.
--screenshot
A flag --screenshot
faz uma captura de tela da página de destino e a salva como
screenshot.png
no diretório de trabalho atual. Isso é especialmente útil em
com a sinalização --window-size
.
Exemplo:
chrome --headless=new --screenshot --window-size=412,892 https://developer.chrome.com/
--print-to-pdf
A flag --print-to-pdf
salva a página de destino como um PDF chamado output.pdf
em
diretório de trabalho atual. Exemplo:
chrome --headless=new --print-to-pdf https://developer.chrome.com/
Opcionalmente, adicione a flag --no-pdf-header-footer
para omitir a exibição
cabeçalho (com a data e hora atuais) e rodapé (com o URL e a página
número).
chrome --headless=new --print-to-pdf --no-pdf-header-footer https://developer.chrome.com/
Não: a funcionalidade por trás da flag --no-pdf-header-footer
era
disponível com a flag --print-to-pdf-no-header
. Talvez você precise usar
o nome da sinalização antiga, se uma versão anterior estiver sendo usada.
--timeout
A flag --timeout
define o tempo máximo de espera (em milissegundos) após o qual
o conteúdo da página é capturado por --dump-dom
, --screenshot
e
--print-to-pdf
, mesmo que a página ainda esteja carregando.
chrome --headless=new --print-to-pdf --timeout=5000 https://developer.chrome.com/
A flag --timeout=5000
instrui o Chrome a esperar até cinco segundos antes de imprimir.
o PDF. Assim, esse processo leva no máximo 5 segundos para ser executado.
--virtual-time-budget
O --virtual-time-budget
atua como um "avanço rápido", para qualquer código que depende do horário
(por exemplo, setTimeout
/setInterval
). Ele força o navegador a executar qualquer
do código da página o mais rápido possível, ao mesmo tempo que faz a página acreditar que o
o tempo realmente passa.
Para ilustrar como usá-lo, considere esta demonstração, que
incrementa, registra e exibe um contador a cada segundo
usando setTimeout(fn, 1000)
. Confira o código relevante:
<output>0</output>
<script>
const element = document.querySelector('output');
let counter = 0;
setInterval(() => {
counter++;
console.log(counter);
element.textContent = counter;
}, 1_000);
</script>
Depois de um segundo, a página contém "1"; depois de dois segundos, "2" e assim por diante. Veja como capturar o estado da página após 42 segundos e salvá-lo como PDF:
chrome --headless=new --print-to-pdf --virtual-time-budget=42000 https://mathiasbynens.be/demo/time
--allow-chrome-scheme-url
A sinalização --allow-chrome-scheme-url
é necessária para acessar URLs chrome://
.
Essa flag está disponível no Chrome 123. Veja um exemplo:
chrome --headless=new --print-to-pdf --allow-chrome-scheme-url chrome://gpu
Depurar
Como o Chrome fica efetivamente invisível no modo headless, pode parecer complicado para resolver um problema. É possível depurar o Headless Chrome de uma maneira semelhante ao headful do Chrome.
Inicie o Chrome no modo headless com as
sinalização de linha de comando --remote-debugging-port
.
chrome --headless=new --remote-debugging-port=0 https://developer.chrome.com/
Isso imprime um URL WebSocket exclusivo em stdout, por exemplo:
DevTools listening on ws://127.0.0.1:60926/devtools/browser/b4bd6eaa-b7c8-4319-8212-225097472fd9
Em uma instância headful do Chrome, podemos usar Depuração remota do Chrome DevTools para conectar ao destino headless e inspecioná-lo.
- Acesse
chrome://inspect
e clique no botão Configure.... - Digite o endereço IP e o número da porta do URL do WebSocket.
- No exemplo anterior, inseri
127.0.0.1:60926
.
- No exemplo anterior, inseri
- Clique em Concluído. Um Destino remoto deve aparecer com todas as guias e e outros destinos listados.
- Clique em inspecionar para acessar o Chrome DevTools e inspecionar o controle remoto Destino headless, incluindo uma visualização ao vivo da página.
Feedback
Queremos seu feedback sobre o novo modo headless. Se encontrar problemas, registre um bug.