Nel 2017, in Chrome 59 è stata introdotta la modalità headless, che consente di eseguire il browser in un ambiente inattivo, senza UI visibile. Essenzialmente, potresti eseguire Chrome senza Chrome.
La modalità headless è una scelta popolare per l'automazione del browser, attraverso progetti come Puppeteer o ChromeDriver. Ecco un esempio minimo della riga di comando che utilizza la modalità headless per creare un file PDF di un determinato URL:
chrome --headless --print-to-pdf https://developer.chrome.com/
Come funziona headless
Prima di vedere come funziona ora Headless, è importante capire come funziona.
"vecchio" Senza testa funzionava. Lo snippet della riga di comando precedente utilizza --headless
della riga di comando, suggerendo che headless è solo una modalità operativa
il normale browser Chrome. Forse non era vero in realtà.
Infatti, il vecchio Headless era
un'implementazione separata del browser
che è stato fornito come parte dello stesso file binario di Chrome. Non condivide
qualsiasi codice del browser Chrome
//chrome
L'implementazione e la gestione di un browser headless separato hanno comportato molte dell'ingegneria civile. E, poiché Headless era un'azienda presentava bug e funzionalità che non erano presenti in Chrome. Questo ha creato confusione per i test automatici del browser, che potrebbero passare headful, ma non in modalità headless o viceversa.
Inoltre, Headless ha escluso tutti i test automatici basati sul browser l'installazione delle estensioni. Lo stesso vale per qualsiasi altra funzione a livello di browser; a meno che Headless non avesse una propria implementazione separata, non era supportata.
Il team di Chrome ha ora unificato le modalità headless e headful.
La nuova modalità headless è disponibile in Chrome 112. In questa modalità, Chrome crea, ma non mostra alcuna finestra della piattaforma. Tutte le altre funzioni, esistenti in futuro, sono disponibili senza limitazioni.
Usa la modalità headless
Per utilizzare la nuova modalità headless, passa il flag della riga di comando --headless=new:
chrome --headless=new
Per il momento, la vecchia modalità headless è ancora disponibile con:
chrome --headless=old
In un burattinaio
Per attivare la nuova modalità headless in 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();
In Selenium-WebDriver
Per utilizzare la nuova modalità headless in Selenium-WebDriver:
const driver = await env
.builder()
.setChromeOptions(options.addArguments('--headless=new'))
.build();
await driver.get('https://developer.chrome.com/');
// …
await driver.quit();
Consulta il post del blog del team di Selenium per ulteriori informazioni, inclusi esempi che utilizzano associazioni di altre lingue.
Flag della riga di comando
I seguenti flag della riga di comando sono disponibili nella nuova modalità headless.
--dump-dom
Il flag --dump-dom stampa il DOM serializzato della pagina di destinazione su stdout.
Ad esempio:
chrome --headless=new --dump-dom https://developer.chrome.com/
Questa operazione è diversa dalla stampa del codice sorgente HTML, che puoi utilizzare con
curl. Per fornirti l'output di --dump-dom, Chrome prima analizza il codice HTML
in un DOM, esegue qualsiasi elemento <script> che potrebbe alterare il DOM,
trasforma quel DOM in una stringa serializzata di HTML.
--screenshot
Il flag --screenshot acquisisce uno screenshot della pagina di destinazione e lo salva come
screenshot.png nella directory di lavoro attuale. Ciò è particolarmente utile
combinato con il flag --window-size.
Ad esempio:
chrome --headless=new --screenshot --window-size=412,892 https://developer.chrome.com/
--print-to-pdf
Il flag --print-to-pdf salva la pagina di destinazione come PDF denominato output.pdf in
nell'attuale directory di lavoro. Ad esempio:
chrome --headless=new --print-to-pdf https://developer.chrome.com/
Se vuoi, puoi aggiungere il flag --no-pdf-header-footer per omettere la stampa
intestazione (con la data e ora correnti) e piè di pagina (con l'URL e la pagina
).
chrome --headless=new --print-to-pdf --no-pdf-header-footer https://developer.chrome.com/
No: la funzionalità alla base del flag --no-pdf-header-footer in precedenza era
disponibili con il flag --print-to-pdf-no-header. Potresti dover ricorrere
il vecchio nome del flag, se utilizzi una versione precedente.
--timeout
Il flag --timeout definisce il tempo di attesa massimo (in millisecondi) dopodiché
i contenuti della pagina vengono acquisiti da --dump-dom, --screenshot e
--print-to-pdf anche se la pagina è ancora in fase di caricamento.
chrome --headless=new --print-to-pdf --timeout=5000 https://developer.chrome.com/
Il flag --timeout=5000 indica a Chrome di attendere fino a 5 secondi prima di stampare
il PDF. Pertanto, l'esecuzione di questo processo richiede al massimo 5 secondi.
--virtual-time-budget
Il --virtual-time-budget funge da "avanzamento veloce" per qualsiasi codice dipendente dal tempo
(ad es. setTimeout/setInterval). Obbliga il browser a eseguire qualsiasi
del codice della pagina il più velocemente possibile, facendo credere alla pagina che
che passa effettivamente il tempo.
Per illustrarne l'utilizzo, consideriamo questa demo,
incrementa, registra e visualizza un contatore al secondo
utilizzando setTimeout(fn, 1000). Ecco il codice pertinente:
<output>0</output>
<script>
const element = document.querySelector('output');
let counter = 0;
setInterval(() => {
counter++;
console.log(counter);
element.textContent = counter;
}, 1_000);
</script>
Dopo un secondo, la pagina contiene "1"; dopo due secondi, "2" e così via. Ecco come acquisire lo stato della pagina dopo 42 secondi e salvarlo come PDF:
chrome --headless=new --print-to-pdf --virtual-time-budget=42000 https://mathiasbynens.be/demo/time
--allow-chrome-scheme-url
Per accedere a chrome:// URL è necessario il flag --allow-chrome-scheme-url.
Questo flag è disponibile a partire dalla versione 123 di Chrome. Ecco un esempio:
chrome --headless=new --print-to-pdf --allow-chrome-scheme-url chrome://gpu
Debug
Poiché Chrome è effettivamente invisibile in modalità headless, potrebbe sembrare difficile per risolvere un problema. È possibile eseguire il debug di Chrome headless in un modo molto in modo simile a Chrome headful.
Avvia Chrome in modalità headless con il
Flag della riga di comando --remote-debugging-port.
chrome --headless=new --remote-debugging-port=0 https://developer.chrome.com/
Viene stampato un URL WebSocket univoco allo stdout, ad esempio:
DevTools listening on ws://127.0.0.1:60926/devtools/browser/b4bd6eaa-b7c8-4319-8212-225097472fd9
In un'istanza "headful" di Chrome, Debug remoto di Chrome DevTools per connetterti al target headless e lo ispeziona.
- Vai a
chrome://inspecte fai clic sul pulsante Configura.... - Inserisci l'indirizzo IP e il numero di porta dall'URL WebSocket.
- Nell'esempio precedente, ho inserito
127.0.0.1:60926.
- Nell'esempio precedente, ho inserito
- Fai clic su Fine. Dovresti vedere un oggetto target remoto con tutte le sue schede e altri obiettivi elencati.
- Fai clic su Ispeziona per accedere a Chrome DevTools e ispezionare il telecomando Target headless, inclusa una visualizzazione in tempo reale della pagina.
Feedback
Non vediamo l'ora di ricevere il tuo feedback sulla nuova modalità headless. Se problemi, segnala un bug.